配置vscode进行vue开发需安装Volar、ESLint、Prettier等扩展，并在settings.json中设置文件关联、格式化规则及保存时自动修复；结合项目级.eslintrc.js和prettier.config.js实现代码规范统一，再通过launch.json集成调试，提升开发效率。
要高效进行 Vue.js 开发，visual studio Code（VSCode）是一个非常流行且功能强大的编辑器。通过合理配置，可以大幅提升编码效率和开发体验。
安装必要的扩展
vue.js 开发依赖几个核心扩展来提供语法高亮、智能提示、错误检查等功能。
- Volar：Vue 官方推荐的开发工具，支持 Vue 3 的语法和类型检查。如果你使用的是 Vue 2 项目，可启用 Volar 的兼容模式或继续使用 Vetur。
- ESLint：集成代码规范检查，配合项目中的 ESLint 配置自动提示和修复问题。
- Prettier – Code formatter：统一代码格式化风格，建议与 ESLint 协同工作。
- Path Intellisense：自动补全文件路径，对导入组件时特别有用。
配置编辑器设置
在 VSCode 的设置中（可通过 Ctrl + , 打开），建议添加以下配置项到 settings.json 文件中：
{ “files.associations”: { “*.vue“: “vue” }, “emmet.includeLanguages”: { “vue-html“: “html”, “vue”: “html” }, “eslint.validate”: [ “javascript“, “typescript”, “vue” ], “editor.defaultFormatter”: “esbenp.prettier-vscode“, “editor.formatOnSave”: true, “editor.codeActionsOnSave”: { “source.fixAll.eslint”: true }, “vetur.validation.script”: false, “typescript.preferences.includePackageJsonautoImports”: “auto” }
这段配置启用了保存时自动格式化和 ESLint 自动修复，同时确保 Vue 文件中的 Emmet 展开正常工作。
立即学习“前端免费学习笔记（深入）”；
项目级配置协同
确保项目根目录有正确的 .eslintrc.js 或 eslint.config.js 和 prettier.config.js 配置文件。例如使用 Vue 官方的 ESLint 插件：
// .eslintrc.js module.exports = { extends: [ ‘eslint:recommended’, ‘plugin:vue/vue3-recommended’, ‘prettier’ ], rules: { // 自定义规则 } }
这样 VSCode 中的 ESLint 扩展就能读取项目规则，实现统一的代码质量控制。
启动开发服务器快速调试
利用 VSCode 的调试功能，可以集成运行 npm run dev 命令。创建 .vscode/launch.json 并配置启动任务，结合 Debugger for chrome 或 edge 扩展，直接在编辑器内调试前端代码。
基本上就这些。配好之后，写 Vue 组件会流畅很多，语法提示准，格式自动对齐，错误也能即时发现。