VSCode如何搭建Vue前端开发环境 - 必备插件与代码提示设置-VSCode-PHP中文网

Vue项目VSCode无智能提示需检查配置：Vue2配jsconfig.json含include和allowJs，Vue3+TS配tsconfig.json并启用Volar的experimental.vueMacros；路径别名需在compilerOptions中配置baseUrl和paths；禁用Prettier对.vue格式化，改用Volar为默认格式化器。

vscode如何搭建vue前端开发环境 - 必备插件与代码提示设置

Vue项目在VSCode里没智能提示？检查`jsconfig.json`或`tsconfig.json`

Vue单文件组件（.vue）里的data、methods、setup()返回值默认不被JS/TS语言服务识别，本质是配置缺失，不是插件没装对。

Vue 2项目必须有jsconfig.json，且需包含"include": ["src/**/*"]和"compilerOptions": {"allowJs": true}
Vue 3 + TypeScript项目必须有tsconfig.json，且"include"要覆盖src和shims-vue.d.ts
如果用了volar（推荐），它会自动读取这些配置；但若同时启用了Vetur，两者冲突会导致提示失效——务必禁用Vetur

装了Volar但`ref()`解构后类型丢失？开`experimental.vueMacros`

Vue 3.3+ 推出的defineProps/defineEmits宏在script setup中默认不触发完整类型推导，尤其配合ref()解构（如const { count } = reactive({ count: 0 })）时，VSCode显示any。

在VSCode设置中搜索volar，找到Vue > Experimental: Vue Macros并勾选
重启VSCode窗口（不是重载窗口），否则不生效
该选项开启后，defineProps的泛型参数、ref解构的类型都能正确映射，但会略微增加首次打开大项目的索引时间

为什么`@/components/xxx.vue`路径跳转失败？配`baseUrl`和`paths`

Vue CLI或Vite项目中常用@ alias指向src，但VSCode默认不认识这个别名，导致Ctrl+Click跳转404、重命名无法联动。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

在jsconfig.json或tsconfig.json的compilerOptions里加：
```
{"baseUrl": "./", "paths": {"@/*": ["src/*"]}}
```
路径必须以/结尾（"@/*"），否则@/components匹配失败
如果项目用的是~或#等其他别名，同样要在这里显式声明，VSCode不读vite.config.ts里的resolve.alias

保存时格式化乱掉？关掉Prettier对`.vue`的接管

Vue文件含HTML/CSS/JS三段，Prettier默认只处理JS/TS，强行格式化常导致缩进错乱、属性换行异常。

在VSCode设置里搜prettier.vue，把Prettier: Vue Files Suffixes清空（留空或删掉vue）
确保Editor: Default Formatter对.vue文件设为Volar（不是Prettier）
如果用了eslint-plugin-vue，它的修复命令（eslint --fix）比Prettier更懂Vue语法，建议绑定到保存动作

最常被忽略的是：Volar的类型提示依赖TS语言服务状态，一旦node_modules里vue版本和项目实际运行版本不一致（比如package-lock.json锁死3.2.47，而node_modules/vue是3.3.8），提示就会断连——遇到提示突然消失，先rm -rf node_modules && npm install。