使用 vscode 进行 vue 开发需安装 Volar、ESLint、Prettier 等插件，配置默认格式化 工具 及保存自动修复，并结合 Debugger for chrome调试，可显著提升开发效率。
使用 VSCode 进行 Vue.js 开发是目前 前端 开发中最常见且高效的方式之一。VSCode 轻量、功能强大，配合丰富的插件生态，能极大提升 Vue 项目的 编码 体验和开发效率。
安装必要插件
为了获得最佳的 Vue 开发支持，建议安装以下核心插件：
- Volar：Vue 3 官方推荐的开发 工具，提供语法高亮、智能补全、类型检查和错误提示等功能。如果你使用的是 Vue 2 项目，可启用 Volar 的兼容模式或继续使用 Vetur。
- ESLint：集成 代码规范 检查，配合项目中的 ESLint 配置实时提示和自动修复问题。
- Prettier – Code formatter：统一代码格式，可与 ESLint 协同工作，确保团队代码风格一致。
- Path Intellisense：自动补全文件路径，写 import 语句时非常方便。
- auto Rename Tag：修改 html 或模板中的标签时，自动重命名对应的闭合标签。
配置 开发环境
合理配置编辑器设置，可以让开发更顺畅：
- 在 settings.json 中设置默认格式化工具为 Prettier，并启用保存时自动格式化：
- 如果项目使用 ESLint，确保开启保存时自动修复：
- 针对 .vue 文件启用 Volar 的语言功能：
“editor.defaultFormatter”: “esbenp.prettier-vscode“,
“editor.formatOnSave”: true
“eslint.run”: “onSave”,
“editor.codeActionsOnSave”: {
“source.fixAll.eslint”: true
}
“vetur.experimental.templateInterpolationService”: false
提升开发效率的小技巧
立即学习 “ 前端免费学习笔记（深入）”；
- 使用 Emmet 缩写快速生成 HTML 结构，在 .vue 的 template 中同样生效。
- 通过 F12 跳转到组件定义，Ctrl+ 点击 快速查看引用或进入方法 / 变量定义。
- 利用 TODO Highlight 插件标记待办事项，便于后续追踪。
- 开启 VSCode 内置终端（Ctrl + `），直接运行 npm run serve 或其他命令，无需切换窗口。
调试 Vue 应用
结合 Debugger for Chrome 插件，可以在 VSCode 中直接调试 Vue 页面：
- 安装 Debugger for Chrome 插件。
- 在 .vscode 目录下创建 launch.json，配置启动项指向本地服务器地址（如 http://localhost:8080）。
- 设置断点后，按 F5 启动调试，即可在编辑器中查看变量、调用 栈和执行流程。
基本上就这些。一套合适的插件组合加上合理的配置，能让 VSCode 成为非常顺手的 Vue 开发利器。不复杂但容易忽略。
