安装 Volar、ESLint、Prettier 等插件并正确配置，可实现语法高亮、智能提示、保存时自动修复与格式化；通过设置 tsconfig.json、.eslintrc.js、.prettierrc 和 settings.json，统一代码风格；结合 Emmet、Folding、Peek 等功能提升开发效率。
在 vscode 中开发 vue.js 应用已经成为 前端 开发的主流选择。通过合理的配置和技巧，可以大幅提升 编码 效率、减少错误并提升团队协作体验。以下是一些实用的设置与技巧，帮助你更高效地使用 VSCode 开发 Vue 项目。
安装必备插件
合适的扩展是提升开发体验的基础。以下是几个关键插件：
- Volar：Vue 3 官方推荐的语言支持插件，提供语法高亮、智能提示、类型检查等功能。如果你还在使用 Vue 2，可切换为 Vetur，但建议新项目统一使用 Volar。
- ESLint：集成 代码规范 检查，配合项目中的 ESLint 配置实时提示问题。
- Prettier – Code formatter：用于代码格式化，确保风格统一。
- Path Intellisense：自动补全文件路径，尤其在引入组件或资源时非常方便。
- auto Rename Tag：修改标签时自动重命名闭合标签，适用于模板部分。
配置智能提示与语法支持
Volar 提供了强大的语言支持，但需要正确启用才能发挥最大作用。
如果项目使用 typescript，确保 tsconfig.json 或 jsconfig.json 存在并配置正确。Volar 依赖这些文件进行类型推断。
立即学习 “ 前端免费学习笔记（深入）”；
在 VSCode 设置中（Settings），搜索“vue”并确认：
- “TypeScript: Validate Enable”可关闭，由 Volar 提供验证更准确。
- 确保默认格式化 工具 设为 Prettier 或 Volar，避免格式冲突。
- 启用“Volar: Use Syntax Server”可提升大型文件的响应速度。
统一代码风格与自动格式化
保持团队代码风格一致至关重要。结合 ESLint 和 Prettier 实现保存时自动修复。
在项目根目录创建或更新以下配置文件：
- .eslintrc.js：启用 vue/vue3-recommended 规则集。
- .prettierrc：定义缩进、引号、换行等格式规则。
- .editorconfig：基础编辑器行为控制，如行尾、缩进风格。
在 VSCode 的 settings.json 中添加：
"[vue]": {"editor.defaultFormatter": "vue.volar", "editor.formatOnSave": true}, "editor.codeActionsOnSave": {"source.fixAll.eslint": true}这样在保存 .vue 文件时，会自动运行 ESLint 修复并格式化代码。
提升开发效率的小技巧
除了基本配置，一些日常操作习惯也能显著提升效率。
- 使用 Emmet 缩写快速生成模板结构，比如输入 div.my-card>p.title 然后按 Tab，即可生成对应 dom 结构。
- 利用 Folding 折叠 script、style 或 template 区块，聚焦当前编辑区域。
- 开启 Peek 功能（Alt+F12）查看组件引用或定义，无需跳转文件。
- 使用 File Nesting 将 css/TS 与 Vue 文件视觉分组，保持侧边栏整洁。
基本上就这些。合理配置 VSCode 不仅让 Vue 开发更流畅，还能减少低级错误，提升整体开发节奏。关键是根据项目实际需求调整 工具 链，保持一致性。
