VS Code 扩展

基本的 (IntelliSense, Linting, Formatting)

• Vue Language Features (Volar)
• ESLint
• Prettier
• EditorConfig

推荐的

• TODO Highlight
• GitLens — Git supercharged
• Import Cost
• npm
• VS Code Icons
• Quasar Docs

Quasar CLI

如果您用Quasar CLI创建您的项目，您已经有了推荐的VS Code配置。💪

当您在VS Code上打开您的项目时，如果您还没有安装我们推荐的扩展，它将会提示您安装。 安装完毕后，只需重新启动VS Code，你就可以开始使用了。🚀

Vite & Vue CLI & UMD

根据你所使用的功能/预设，你可以将相关的选项添加到.vscode/settings.json中。

通用配置

{
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true
}

ESLint

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": [
    "source.fixAll.eslint"
  ],
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"]
}

未使用Prettier

{
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
}

使用Prettier

{
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

TypeScript

{
  "typescript.tsdk": "node_modules/typescript/lib"
}

在VS Code中调试一个Quasar项目

最好的方法是在本页旁边的浏览器中打开，这样你就可以在阅读这些说明时回顾这些说明。并在你的项目中应用这些修改。

正确开始调试的第一步是启用源码图。Quasar会自动启用开发模式的源码图。这里有一篇很好的文章](https://blog.scottlogic.com/2017/11/01/webpack-source-map-options-quick-guide.html)，描述了Webpack的devtool设置（控制源码地图的那个）的不同值。Quasar默认使用_eval-cheap-module-source-map_。

eval-cheap-module-source-map构建速度慢(不是最慢的)，重建速度快(不是最快的)，并且保留了原始线条(不是最好的质量)。如果你想在放弃一些准确性的同时加快构建速度，或者在放弃速度的同时提高准确性，你可以选择其他值。devtool的最慢但最准确（_原始的）的值是source-map。这使得VS Code中的调试可以正常工作，因为你的完整Vue源文件可以在内置的Chrome调试器中使用。所以，这将更容易找到你的原始源代码，并找到你想设置断点的那一行。如果你想启用这个功能，你需要像这样更新[quasar.config.js > build > devtool]（/quasar-cli-webpack/quasar-config-js#property-build）。

// quasar.config.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 Cookbook(对于Vue 2，可能已经过时了)。

在下面的例子中，用你的package.json文件中的name属性替换package-name：

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

现在保存该文件，然后在调试和运行窗格的标题栏的下拉菜单中选择该配置。在你启动调试器之前，应用程序必须正在运行。通过运行quasar dev启动开发服务器。然后点击"运行和调试"窗格中的绿色"开始调试"按钮（或按F5），启动调试会话，并将其附加到正在运行的应用程序上。你现在可以设置断点，控制步进/步出等，所有这些都来自VSCode。你也可以启动内置的Chrome调试器，它将保持同步。如果你还安装了Vue devtools（强烈推荐），这可能很有用。