VS Code 本身不配置 Vue 环境，真正需配置的是 Node.js + npm + @vue/cli 或 Vite；务必先验证 node -v 和 npm -v 可用，设置国内镜像源，安装 Volar（禁用 Vetur），优先使用 npm create vue@latest 或 vite 创建项目，并确保 source map 正确启用。
直接说结论：VS Code 本身不“配置 Vue 环境”，它只是编辑器；真正要配的是 Node.js + npm + @vue/cli（或 vite）这套运行和构建链路，VS Code 只负责提供语法支持、调试能力和项目打开方式。
确认 Node.js 和 npm 已正确安装并可用
这是所有后续操作的前提。很多“配置失败”其实卡在这一步。
-
node -v和npm -v必须在任意终端（CMD/PowerShell/Terminal）中能直接执行并返回版本号（如v20.16.0、10.5.0） - Windows 用户务必检查安装时是否勾选了「Add to PATH」；没勾选就手动把
nodejs目录加进系统环境变量 - 路径含中文或空格会导致
@vue/cli创建项目失败，错误常表现为spawn UNKNOWN或EPERM - 国内用户建议立即设置国内镜像源：
npm config set registry https://registry.npmmirror.com/，否则npm install极易超时或卡死
VS Code 安装关键插件：Volar 而不是 Vetur
Vue 3 项目必须用 Volar，装 Vetur 会导致 SFC（.vue）文件无法识别 <script setup>、类型提示错乱、甚至编辑器假死。
- 打开 VS Code 扩展面板（Ctrl+Shift+X），搜
Volar，安装官方插件Vue Language Features (Volar) - 如果之前装过
Vetur，必须禁用或卸载——两者冲突，且 Volar 会主动提示 “Vetur detected, please disable it” - 装完 Volar 后，打开任意
.vue文件，右下角状态栏应显示Vue (Volar)，而不是Vue (Vetur) - 不需要额外配置，但确保工作区根目录有
tsconfig.json或jsconfig.json（哪怕空文件），否则部分类型推导不生效
创建项目别用全局 vue-cli，优先用 create-vue 或直接 vite
@vue/cli 是 Vue 2 时代的主力工具，Vue 3 官方已转向更轻量、更快的脚手架方案。
立即学习“前端免费学习笔记（深入）”；
- 推荐命令：
npm create vue@latest（交互式创建）或npm create vite@latest my-project -- --template vue（零交互） - 避免全局安装
@vue/cli（npm install -g @vue/cli），它依赖较老的 Webpack，启动慢、HMR 延迟高，且对defineProps/defineEmits支持滞后 - 新项目默认带
vue-tsc类型检查，VS Code 的 Volar 会自动读取tsconfig.json提供精准提示 - 如果硬要用
@vue/cli，请确认版本 ≥ 5.0.8，否则<script setup>中的defineOptions会报错
调试配置容易漏掉 source-map，导致断点无效
VS Code 调试 Vue 项目时，断点打在 .vue 文件里却跳不到源码，90% 是因为没生成正确的 source map。
- Vite 项目默认已启用
sourceMap: true（开发模式），无需额外配置 - Vue CLI 项目需在
vue.config.js中显式设置：configureWebpack: { devtool: 'source-map' } - launch.json 中的
webRoot必须指向项目根目录（"${workspaceFolder}"），不能写成"./src"或其他子路径 - Chrome 调试器里看到的文件路径是
webpack://开头，说明 source map 生效；若看到的是压缩后的一行代码，就是没生效
最常被忽略的其实是 Node.js 路径和镜像源——它们不出错时不显眼，一出错就全链路阻塞，连 npm create 都跑不起来。动手前先在终端里敲两行验证，比后面反复重装快得多。
