用VSCode高效开发Vue.js项目需配对环境、装准插件、调稳配置：安装Node.js v18+，装Volar、ESLint、Prettier等插件；用Vite创建项目；配置.vscode/settings.json启用Volar接管模式、保存自动修复ESLint、禁用TS自动导入、设Prettier为默认格式化器。
用 vscode 开发 vue.js 项目很顺手，关键在于环境配得对、插件装得准、配置调得稳。不需要重装系统或折腾复杂工具链，一套轻量但完整的组合就能高效写代码、实时预览、快速调试。
安装基础环境与核心插件
先确保本地已安装 Node.js（建议 v18+）和 npm。然后打开 VSCode，去扩展市场搜索并安装这几个必装插件：
- Volar：Vue 官方推荐的语言支持插件（替代旧版 Vetur），提供语法高亮、智能提示、组件跳转、类型推导等；
- ESLint：配合项目中的 eslint-config-prettier 和 eslint-plugin-vue，实时校验代码风格与潜在错误；
- Prettier：格式化代码，和 ESLint 配合可做到保存即修复+格式化；
- Auto Rename Tag 和 Bracket Pair Colorizer：提升模板编辑效率，尤其在写大量嵌套标签时很实用。
创建 Vue 项目（推荐 Vite + Vue）
不用 CLI 全局安装，直接用 npm 或 pnpm 快速初始化：
- 终端执行：npm create vite@latest my-vue-app -- --template vue；
- 进入项目：cd my-vue-app；
- 安装依赖：npm install；
- 启动开发服务器：npm run dev，默认访问 http://localhost:5173。
VSCode 打开该项目文件夹后，Volar 会自动激活，.vue 文件获得完整语言支持，setup script 中的 ref、computed 等也能正确推导类型。
优化开发体验的关键配置
在项目根目录新建 .vscode/settings.json（VSCode 工作区专属设置），填入以下内容让协作和编码更统一：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 启用 Volar 的“Take Over Mode”，禁用内置 HTML/TypeScript 插件对
.vue的干扰； - 设置保存时自动格式化并修复 ESLint 问题：
"editor.codeActionsOnSave": {"source.fixAll.eslint": true}； - 关闭 TypeScript 自动检查（避免和 Volar 冲突）：
"typescript.preferences.includePackageJsonAutoImports": "off"； - 指定默认格式化工具为 Prettier：
"editor.defaultFormatter": "esbenp.prettier-vscode"。
日常开发常用技巧
写 Vue 组件时，几个小操作能明显提效：
- 在
<script setup></script>中输入ref，按 Tab 可快速生成响应式声明； - 右键组件标签（如
<mybutton></mybutton>）→ “Go to Definition”，直接跳转到组件源码； - 使用
console.log后，选中变量名 → 按Ctrl+Shift+P→ 输入 “Log” → 选 “Log Console: Insert Debug Log”，自动生成带变量名的调试语句； - 开启 VSCode 的“Live Server”插件（非必须，但适合快速预览纯 HTML 模板片段）。
基本上就这些。不复杂但容易忽略的是 Volar 的接管模式和 ESLint+Prettier 的联动配置——设对了，写 Vue 就像写 TS 一样丝滑。其他都是顺手加点，越用越顺。
