配置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项目

  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(强烈推荐),这可能会很有用。

TIP

如果您只想使用Chrome或Firefox调试器,但是您发现很难在浏览器的源代码选项卡中找到正确的源文件,那么可以在代码中使用debugger语句强制调试器停止在该行并调出正确的源代码。