Configure VS Code

TIP

This guide assumes you have already installed Quasar CLI 1.0 or greater and Visual Studio Code.

Standard ES-Lint rules

Without some customizations the default formatting in VS Code will generate a seemingly endless number of errors when quasar dev or quasar build commands are run because they include a call to es-lint with the ruleset specified when you create a project. The configuration in this guide is for the standard ruleset.

Install VS Code Extensions for Standard

Update VS Code settings file for Standard

To edit the settings, use the command Open Settings JSON in the Command Palette in the View menu (ctrl+shift+p).

{
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,

    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "javascript",
            "autoFix": true
        }
    ],

    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
    "javascript.format.placeOpenBraceOnNewLineForFunctions": false,

    "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
    "typescript.format.placeOpenBraceOnNewLineForControlBlocks": false,
    "typescript.format.placeOpenBraceOnNewLineForFunctions": false,

    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript"
}

Test Standard on a new Quasar project

# I selected default values for all options to create this guide
$ quasar create qt

# Verify it runs without error
$ cd qt
$ quasar dev

You can now edit files without violating the standard es-lint rules!

Prettier ES-Lint rules

Install VS Code Extensions for Prettier

Update VS Code settings file for Prettier

To edit the settings use the command Open Settings JSON in the Command Palette in the View menu (ctrl+shift+p).

{
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,

    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "javascript",
            "autoFix": true
        }
    ],

  "prettier.eslintIntegration":true,

  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.js": "prettier-eslint"
}

Test Prettier on a new Quasar project

# I selected default values for all options to create this guide
# except for the linting profile, I selected prettier instead of standard
$ quasar create qtp

# Verify it runs without error
$ cd qtp
$ quasar dev

You can now edit files without violating the standard es-lint rules!

To edit the settings use the command Open Settings JSON in the Command Palette in the View menu (ctrl+shift+p).

{
  "attrsSorter.order": [
    "is",
    "v-for",
    "v-if",
    "v-else-if",
    "v-else",
    "v-show",
    "v-cloak",
    "v-once",
    "v-pre",
    "id",
    "ref",
    "key",
    "v-slot",
    "v-slot.+",
    "#.*",
    "slot",
    "v-model",
    "v-model.+",
    "v-bind",
    "v-bind.+",
    ":.+",
    "v-text",
    "v-text.+",
    "v-html",
    "v-html.+",
    "class",
    "v-on.+",
    "@.+",
    "name",
    "data-.+",
    "ng-.+",
    "src",
    "for",
    "type",
    "href",
    "values",
    "title",
    "alt",
    "role",
    "aria-.+",
    "$unknown$"
  ],
  "todohighlight.isEnable": true,
  "todohighlight.include": [
    "**/*.js",
    "**/*.jsx",
    "**/*.ts",
    "**/*.tsx",
    "**/*.html",
    "**/*.php",
    "**/*.css",
    "**/*.scss",
    "**/*.vue",
    "**/*.styl"
  ],
  "workbench.iconTheme": "vscode-icons"
}

Debugging a Quasar project in VS Code

Detailed instructions on how to configure with Quasar coming soon.