首先安装Volar、ESLint、Prettier等核心扩展，再通过配置setting.json实现保存时自动格式化与错误修复，结合项目级.eslintrc和prettier.config.js确保代码风格统一，最后确认Volar启用以获得vue单文件组件的完整智能支持。
要让 vscode 成为高效的 Vue.js 开发环境，需要集成语法高亮、智能提示、代码格式化、错误检查和调试能力。下面是一套完整且实用的配置方案，适用于现代 Vue 项目（Vue 2 和 Vue 3）。
安装核心扩展
打开 VSCode 扩展市场（Ctrl+Shift+X），搜索并安装以下关键插件：
- Volar：Vue 3 推荐的语言支持工具，提供类型推断、模板智能提示、语法高亮等。如果你使用的是 Vue 2，可选择 Vetur，但建议升级到 Vue 3 并使用 Volar。
- ESLint：集成 javaScript/typescript 的静态代码检查，配合 Prettier 可实现自动修复和统一风格。
- Prettier – Code formatter：主流的代码格式化工具，支持 html、css、JS、Vue 文件。
- TypeScript Vue Plugin (Volar)：让 TypeScript 正确识别 .vue 文件中的类型，提升 TS 支持体验。
配置 setting.json 实现无缝协作
在项目根目录或用户设置中修改 VSCode 配置文件（可通过 Ctrl+Shift+P 输入 “Preferences: Open Settings (json)” 打开），添加以下内容：
{ “editor.defaultFormatter”: “esbenp.prettier-vscode“, “editor.formatOnSave”: true, “editor.codeActionsOnSave”: { “source.fixAll.eslint”: true }, “eslint.validate”: [ “javascript”, “typescript”, “vue” ], “vetur.validation.script”: false, “vetur.validation.style”: false, “vetur.validation.template”: false, “[vue]”: { “editor.defaultFormatter”: “vue.volar” }, “typescript.tsdk”: “node_modules/typescript/lib” }
说明：
立即学习“前端免费学习笔记（深入）”；
- 启用保存时自动格式化，并优先使用 Prettier。
- 保存时运行 ESLint 自动修复常见问题。
- 禁用 Vetur 的验证（避免与 Volar 冲突）。
- 确保 TypeScript 使用项目本地版本，提高类型准确性。
项目级依赖配置（.eslintrc, prettier.config.js）
为了保证团队一致性，应在项目中配置 Lint 和格式化规则。
示例：.eslintrc.js
module.exports = { root: true, env: { browser: true, es2021: true }, extends: [ ‘eslint:recommended’, ‘plugin:vue/vue3-recommended’, ‘prettier’ ], parserOptions: { ecmaVersion: 2021 }, rules: { ‘vue/multi-word-component-names’: ‘off’ } };
示例：prettier.config.js
module.exports = { semi: true, trailingComma: ‘es5’, singleQuote: true, printWidth: 80, tabWidth: 2 };
同时安装相关依赖：
npm install –save-dev eslint eslint-plugin-vue prettier eslint-config-prettier eslint-plugin-prettier
启用 Vue 单文件组件智能支持
Volar 提供了对 .vue 文件的全面支持。确保你在使用 Vue 3 项目时：
- 在 script setup 中获得完整的类型提示。
- 在 template 中输入标签时有组件名称提示。
- 支持 ref 类型推导、props 智能补全。
如果发现模板无提示，请确认已启用 Volar 并关闭 Vetur。可在右下角状态栏点击语言模式，选择 “Configure ‘vue’ language mode”，设置为 “Vue (Volar)”。
基本上就这些。配置完成后，重启编辑器，打开一个 .vue 文件测试语法高亮、自动补全和保存格式化是否正常工作。这套组合稳定、高效，是当前 Vue 开发的标准实践。