必须安装Volar、Prettier、ESLint三个插件：Volar提供vue 3官方语言支持，Pretterr统一代码格式，ESLint检查响应式语法错误；新项目用create-vue而非vue-cli；script setup中ref不自动解包是因类型系统与运行时分离。
VS Code 开发 Vue.js 应用不需要“重装环境”或“全盘配置”，核心是装对插件、选对脚手架、避开默认模板的坑。
必须安装的 VS Code 插件有哪些
只装三个关键插件，其他按需加：
-
Volar（不是 Vetur）：Vue 3 官方推荐的语言支持，提供语法高亮、类型推导、ref()自动解包、defineProps类型提示。Vetur 已弃用，混用会导致类型错误或跳转失效 -
Prettier：格式化代码，配合.prettierrc使用。注意关闭 VS Code 内置格式化器，否则保存时冲突 -
ESLint：检查script setup中的响应式语法（如误写const count = ref(0); count++不触发更新）
插件启用后，打开 .vue 文件右下角应显示 “Vue (Volar)” 而非 “Vue (Vetur)” 或 “html”。
创建项目该用 create-vue 还是 vue-cli
新项目一律用 create-vue（官方推荐），vue-cli 已进入维护模式，不支持 Vue 3.4+ 的新特性（如 defineModel 自动推导）：
立即学习“前端免费学习笔记（深入）”；
- 运行
npm create vue@latest，交互式选择是否启用 typescript、Pinia、vitest、router 等——别全选，按需勾选，否则生成大量冗余配置 - 避免直接
npm init vue@latest（旧命令），可能拉取过期模板 - 生成后进目录，
npm install前先检查package.json中vue版本是否 ≥ 3.4，否则手动升级：npm install vue@latest
为什么 script setup 里 ref() 不自动解包
这是常见困惑点，本质是 Volar 的类型系统和运行时行为分离导致的视觉错觉：
-
ref在模板中自动解包（{{ count }}显示值），但在script setup中仍是包装对象（count.value才能读写） - Volar 提供了
ref的类型提示，但不会改写 JS 运行逻辑；误以为“应该自动解包”往往是因为看了带reactivity-transform（已废弃）的旧教程 - 若想少写
.value，可用shallowRef+unref组合，或改用computed封装读写逻辑，但不建议为省字符牺牲可读性
热更新失效或控制台报 Failed to resolve component
多数情况不是插件问题，而是组件注册方式与 Volar 类型推导不匹配：
- 全局注册组件（如
app.component('MyBtn', MyBtn)）在单文件组件中仍需显式声明components: { MyBtn }，否则 Volar 不识别，且 HMR（热更新）会丢失该组件定义 - 使用
defineAsyncComponent时，确保defineOptions({ name: 'MyAsyncComp' })存在，否则 Devtools 和 Volar 都无法正确追踪 - 路径别名（如
@/components）需在tsconfig.json的compilerOptions.paths和vite.config.ts的resolve.alias中**同时配置**，缺一不可
最易被忽略的是：Volar 的“模板类型检查”默认开启，但某些组合式 API（如嵌套 defineProps）仍可能绕过检查——别完全依赖红色波浪线，运行时错误才是最终依据。