配置VS Code

TIP

本指南假设您已经安装了Quasar CLI 1.0或更高版本以及Visual Studio Code。

Standard ES-Lint规则

当您创建项目时,代码将在运行quasar devquasar build命令时生成看似无穷无尽的错误,因为他们调用了它 - 在创建项目时指定了规则集。 本指南中的配置适用于标准规则集。

为Standard ES-Lint规则安装VS Code扩展

为Standard ES-Lint规则更新VS Code配置文件

要编辑设置,请使用“View”菜单中命令选项板中的Open Settings JSON命令(ctrl + shift + p)。

{
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
      "source.fixAll": 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"
}

新Quasar项目的Standard ES-Lint规则测试

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

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

您现在可以编辑文件而不违反标准的es-lint规则!

Prettier ES-Lint规则

为Prettier ES-Lint规则安装VS Code扩展

为Prettier ES-Lint规则更新VS Code配置文件

要编辑设置,请使用“View”菜单中命令选项板中的Open Settings JSON命令(ctrl + shift + p)。

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

     "editor.codeActionsOnSave": {
        "source.fixAll": true
    },

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

新Quasar项目的Prettier ES-Lint规则测试

# 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

您现在可以编辑文件而不违反标准的es-lint规则!

建议的其他VS代码扩展和设置更新

要编辑设置,请使用“View”菜单中命令选项板中的Open Settings JSON命令(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"
}

在VS Code中调试Quasar项目

有关如何配置Quasar的详细说明即将推出。