VSCode怎么开发Vue项目_VSCode Vue3开发环境配置与插件推荐-VSCode-PHP中文网

根本原因是volar未接管.vue文件、jsconfig.json未正确配置paths别名、vetur未禁用；需强制文件关联为vue、配置baseurl/paths、禁用vetur、重载窗口刷新缓存。

vscode怎么开发vue项目_vscode vue3开发环境配置与插件推荐

Vue 3 项目在 VSCode 里跑不起来、没类型提示、@ 路径不补全、保存不格式化——根本不是插件装少了，而是 Volar 没接管、jsconfig.json 没配对、Vetur 还在后台偷偷干活。

Path Intellisense 插件本身不理解 @ 别名，它只认物理路径或 TypeScript 的模块解析规则。真正起作用的是项目根目录的 jsconfig.json（或 tsconfig.json）里声明的 paths。

必须在项目根目录加 jsconfig.json，内容含：

{"compilerOptions": {"baseUrl": ".", "paths": {"@/*": ["src/*"]}}}

改完后必须执行 Cmd/Ctrl + Shift + P → Developer: Reload Window，否则缓存不刷新，补全永远不生效
别依赖 path-intellisense.mappings 这种字符串映射配置——它和构建工具（如 Vite）的解析逻辑不一致，容易导致“编辑器能跳、运行时报错”

Volar 没拿到 TypeScript 的完整上下文，常见于三类情况：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

没禁用 Vetur：在设置里搜 vetur，把 vetur.validation.script、vetur.validation.template 全设为 false，然后重启 VSCode
项目缺少 jsconfig.json 或 tsconfig.json：哪怕只是空文件，也得存在；否则 Volar 的语言服务器无法启动类型服务
compilerOptions.types 缺少 Vue 运行时类型：TypeScript 项目需确保 tsconfig.json 中有 "types": ["@vue/runtime-dom"]

不是插件没装，是 VSCode 设置和项目配置没对齐。Prettier 和 ESLint 必须分工明确，且都指向本地环境：

VSCode 的 settings.json 里要写清楚：

"editor.formatOnSave": true,"editor.defaultFormatter": "esbenp.prettier-vscode","editor.codeActionsOnSave": {"source.fixAll.eslint": true}

项目中必须有 .eslintrc.cjs，且 extends 数组末尾要加 "prettier" 和 "eslint-config-prettier"，否则 semi、quotes 这类规则会和 Prettier 冲突
千万别在 settings.json 里手动指定 eslint.options 指向全局 node_modules——必须让 ESLint 插件读取项目本地的 node_modules/.bin/eslint，否则类型推导失效、defineProps 泛型识别不了

VSCode 没识别出这是 Vue 单文件组件，常见于新项目或缓存残留：

在项目根目录建 .vscode/settings.json，强制关联：
```
{"files.associations": {"*.vue": "vue"}}
```
执行 Cmd/Ctrl + Shift + P → Developer: Reload Window，不重启，旧解析器（比如 Vetur）仍可能接管
打开任意 .vue 文件，看右下角状态栏：如果显示 HTML 或 Plain Text，就说明没生效；应显示 Vue，且 F12 能跳转到组件定义

最常被忽略的其实是缓存和重启——Volar 启动依赖完整的语言服务器初始化，而这个过程不会在你改完配置后自动重载。所有配置改完，第一反应不该是“再试试”，而是立刻 Reload Window。否则你调了十次 jsconfig.json，它还是按旧缓存走。