VS Code 扩展

核心扩展（代码补全、检查、格式化）

• Vue Language Features (Volar) - Vue 3 的官方扩展
• ESLint - JavaScript/TypeScript 代码检查
• Prettier - 代码格式化
• EditorConfig - 编辑器配置统一

推荐扩展

• TODO Highlight - 高亮显示 TODO 注释
• GitLens - Git 增强功能
• Import Cost - 显示导入包的大小
• VS Code Icons - 文件图标主题

Quasar CLI 项目

Quasar CLI 在创建项目时已经自动配置好了 VS Code 的推荐设置。💪

当您用 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"]
}

使用 ESLint 作为默认格式化工具

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

使用 Prettier 作为默认格式化工具

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

TypeScript 配置

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

调试配置

启用 Source Map

开发模式下，Quasar 会自动启用 source map。这里有一篇关于 Webpack 开发工具设置 的详细文章。

Quasar 默认使用 eval-cheap-module-source-map，这是一个在构建速度和调试质量之间的平衡选项。如果您需要：

• 更快的构建速度：可以使用更简单的 source map 选项
• 更高的调试质量：可以使用 source-map 选项

要使用 source-map（最慢但最精确的选项），在 quasar.config.js 中添加：

// quasar.config.js
build: {
  // ...
  devtool: "source-map";
}

配置 VS Code 调试器

1. 点击 VS Code 侧边栏的调试图标
2. 点击调试面板顶部的齿轮图标，创建 launch.json
3. 添加以下配置（将 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}/*"
  }
}

开始调试

1. 在终端中运行 quasar dev 启动开发服务器
2. 在 VS Code 调试面板中选择配置
3. 点击绿色的开始调试按钮（或按 F5）
4. 现在您可以：
   • 设置断点
   • 使用步进执行
   • 查看变量值
   • 使用 Chrome 开发者工具（与 VS Code 调试器同步）

视频教程

如果您需要更详细的说明，可以观看以下视频教程：

• 为 Quasar 项目配置 VS Code 扩展
• 在 VS Code 中调试 Quasar 项目