在VSCode中配置Vue.js项目的开发与调试

安装Volar、ESLint、Prettier和Debugger for Chrome等扩展；2. 配置settings.json实现保存时自动格式化与ESLint修复；3. 创建launch.json配置本地调试环境；4. 启用自动导入和路径映射提升开发效率。

要在 VSCode 中高效开发和调试 Vue.js 项目，关键在于正确配置编辑器功能、语言支持和调试工具。以下是一套实用的配置方案，帮助你快速搭建开发环境。

安装必要的扩展

VSCode 的强大之处在于其丰富的扩展生态。开发 Vue.js 项目需要安装以下几个核心扩展：

• Volar：Vue 3 官方推荐的语言支持插件，提供语法高亮、智能补全、类型检查等功能（如果你使用 Vue 2，可选择 Vetur，但建议升级到 Vue 3）。
• ESLint：集成代码规范检查，配合项目中的 ESLint 配置自动提示和修复问题。
• Prettier - Code formatter：统一代码格式，可与 ESLint 协同工作。
• Debugger for Chrome / Edge：用于在浏览器中调试前端代码。

提示：安装完 Volar 后，如果之前用过 Vetur，建议在设置中禁用 Vetur，避免冲突。

配置编辑器格式化与校验

为了让代码风格一致并减少低级错误，需配置 Prettier 和 ESLint 协同工作。

立即学习“前端免费学习笔记（深入）”；

在项目根目录确保有以下文件：

• .eslintrc.js 或 .eslintrc.json：定义 ESLint 规则，建议使用 eslint-plugin-vue 支持 Vue 文件。
• .prettierrc：定义 Prettier 格式化规则。
• .editorconfig：统一基础编辑风格（如缩进）。

在 VSCode 的 settings.json 中添加以下配置：

面试猫

AI面试助手，在线面试神器，助你轻松拿Offer

39

查看详情

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[vue]": {
    "editor.defaultFormatter": "vue.volar"
  }
}

这样保存 Vue 文件时会自动使用 ESLint 修复问题，并用 Prettier 格式化。

配置调试环境

借助 VSCode 内置调试器，可以直接在编辑器中打断点、查看变量。

步骤如下：

1. 确保项目通过 npm run serve 或 vite 启动，服务运行在本地（如 http://localhost:3000）。
2. 打开 VSCode 的调试面板，点击“创建 launch.json”文件。
3. 选择环境为 Chrome 或 Edge，然后添加以下配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch localhost",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    }
  ]
}

启动调试后，可在 VSCode 中设置断点，刷新页面即可触发调试。

提升开发体验的小技巧

• 开启 Auto Import：Volar 支持自动导入组件和 API，打字时会提示未导入的内容。
• 使用 Vue Language Features (Volar) 的模板类型检查，在 settings.json 中启用："vue.inlayHints.enabled": true。
• 配置 Path Mapping：若项目使用别名（如 @/components），在 jsconfig.json 或 tsconfig.json 中声明路径映射，确保跳转和提示正常。

基本上就这些。合理配置后，VSCode 能提供接近 IDE 的 Vue 开发体验，写代码更顺手，查 bug 更高效。

以上就是在VSCode中配置Vue.js项目的开发与调试的详细内容，更多请关注php中文网其它相关文章！