VSCode Vue开发需装Volar、ESLint、Prettier三插件并正确配置：启用Volar接管模式，配置eslint.config.js支持.vue和TS，设置tsconfig.json路径别名并重启服务。
VSCode 本身不自带 Vue 开发支持，所谓“快速搭建”其实是组合几个关键插件 + 正确配置，跳过手动配 eslint、prettier、volar 冲突、tsconfig.json 路径别名这些典型卡点。
必须装的三个插件：Volar（不是 Vetur）
Volar 是 Vue 3 官方推荐的语言服务器，Vetur 已停止维护且与 Composition API / TS 类型推导严重不兼容。装错会导致 ref 类型不识别、defineProps 报红、模板中无法跳转到 script 变量。
- 在扩展市场搜
Volar，认准作者是Vue官方（ID: vuejs-language-tools） - 禁用或卸载
Vetur—— 两者共存会直接让.vue文件失去语法高亮和类型检查 - 启用
Take Over Mode：按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS），输入Volar: Switch to Take Over Mode并执行；这是让 Volar 接管全部.vue文件的关键一步
ESLint + Prettier 协同工作的最小配置
只装插件不配规则，eslint 会报一堆 no-unused-vars 或 no-undef，尤其在 setup 语法糖里。核心是让 ESLint 知道它正在处理 Vue SFC，且要兼容 TypeScript。
- 项目根目录下确保有
eslint.config.js（或.eslintrc.cjs），内容至少包含：export default [ { files: ['**/*.vue'], languageOptions: { parserOptions: { parser: '@typescript-eslint/parser', ecmaFeatures: { jsx: true } } }, plugins: ['@typescript-eslint', 'vue'], rules: { 'vue/multi-word-component-names': 'off' } } ] - 装两个插件：
ESLint（作者：Microsoft）和Prettier（作者：Esben Petersen） - 在 VSCode 设置中搜索
format on save，勾选；再搜索default formatter，对vue文件类型设为esbenp.prettier-vscode，但必须配合eslint.format.enable设为true，否则保存时只格式化不校验
路径别名（@/）跳转失效？检查 tsconfig.json 和 Volar 配置
import HelloWorld from '@/components/HelloWorld.vue' 点击跳转失败，90% 是因为 Volar 没读取到 tsconfig.json 中的 compilerOptions.baseUrl 和 paths。
立即学习“前端免费学习笔记（深入）”；
- 确认
tsconfig.json里有："compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } - 在 VSCode 设置中搜索
volar take over，确保Volar: Enable Take Over Mode是开启状态（前面已提，但这里容易漏） - 重启 VSCode 或执行
Volar: Restart Server，否则修改tsconfig.json后不会立即生效
真正卡住人的从来不是“装什么”，而是插件之间的接管权、配置文件的优先级、以及某个开关没点开。比如 Take Over Mode 不开，Volar 就只是个装饰；eslint.config.js 里没声明 files: ['**/*.vue']，ESLint 就根本不会扫描单文件组件。这些细节比记住插件名字重要得多。
