Standard ES-Lint规则

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

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

• ESLint
• Vetur

为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
$ yarn create quasar
# or:
$ npm init quasar
# ..then select "App with Quasar CLI" and "Quasar v1" options
# ..and project folder: qt

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

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

Prettier ES-Lint规则

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

• ESLint
• Prettier
• Vetur

为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
$ yarn create quasar
# or:
$ npm init quasar
# ..then select "App with Quasar CLI" and "Quasar v1" options
# ..and project folder: qtp

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

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

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

• Auto Rename Tag
• Auto Close Tag
• Bracket Pair Colorizer
• ESLint
• Format in context menus
• GitLens
• Import Cost
• Sass
• Sass Lint
• language-stylus
• npm
• npm Intellisense
• Prettier
• Sorting HTML and Jade attributes
• TODO Highlight
• Vetur
• Vue Peek
• VS Code Icons

要编辑设置，请使用“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项目

1. 首先，转到用于Chrome的调试器并仔细阅读。
2. 然后，由于Quasar是基于Vue的，所以您还需要参考VSCode调试的Vue指南用于设置调试Vue应用程序。

最好的方法是在这个页面旁边的浏览器中打开它，这样你可以在阅读这些说明的同时查看那些说明。并将更改应用到您的项目中。

Vue指南的第一步是启用源映射(source maps)。Quasar自动启用开发模式的源映射。这是一篇好文章，它描述了[webpack devtool设置]的不同值(https://webpack.js.org/configuration/devtool/)（打开或关闭源映射的一个）。Quasar默认使用_cheap-module-eval-source-map_。

虽然cheap-module-eval-source-map可能构建得更快，但它使调试更加困难，并且几乎不可能在VSCode中进行调试。在本例中，devtool的建议值为“source map”。这使得VSCode中的调试能够正常工作，因为内置chrome调试器中有完整的vue源文件，因此更容易找到原始源代码，也更容易正确定位要设置断点的行。如果要启用此功能，请将此行添加到 _quasar.config.js_文件：

// quasar.conf.js
build: {
  // ...

  // this is a configuration passed on
  // to the underlying Webpack
  devtool: 'source-map'
}

然后，您需要告诉VSCode向调试器添加配置。最简单的方法是单击操作栏上的bug图标（对于ltr语言，这是最左边的栏）。单击该bug图标后，文件树区域将切换到调试和运行区域。单击窗口标题栏中的齿轮图标，它将显示一个名为_launch.json_的文件. 这是要调试的启动应用的不同配置的地方。下面是在Chrome中启动Quasar应用程序的设置。对于Firefox版本，请查看上面提到的Vue指南。

{
  "type": "chrome",
  "request": "launch",
  "name": "Quasar App: chrome",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceFolder}/src",
  "breakOnLoad": true,
  "sourceMapPathOverrides": {
    "webpack:///./src/*": "${webRoot}/*"
  }
}

现在保存文件，然后在“调试和运行”窗格标题栏的下拉列表中选择该配置。在启动调试器之前，必须先运行应用程序。从命令行，使用quasar dev启动应用程序的dev模式。然后单击debug and run窗格中的绿色“go”按钮启动调试会话并附加到running应用程序。现在，您可以设置断点和控制step over/in/out等，所有这些都来自VSCode。您也可以启动内置的Chrome调试器，它将保持同步。如果您还安装了Vue devtools（强烈推荐），这可能会很有用。