VSCode必装Vue必备插件_VSCode自动检查代码隐患【测评】-VSCode-PHP中文网

Volar 必须安装并启用 volar.takeOverMode: true，否则类型推导、defineProps 补全、模板内 ref 跳转全部失效；需禁用 Vetur、配置 files.associations 为 "*.vue": "vue"、确保 tsconfig.json 存在且含正确 paths。

vscode必装vue必备插件_vscode自动检查代码隐患【测评】

Vue 3 项目里，Volar 必须装，且必须启用 volar.takeOverMode，否则 <script setup></script> 中的类型推导、defineProps 补全、模板内 ref 跳转全部失效——这不是“功能不全”，是根本没接入 TypeScript 语言服务。

为什么 Volar 启用后模板里 still 没有类型提示

常见错误现象：装了 Volar，但 <template></template> 中写 {{ count }} 不报错，count 点不进去，hover 也没类型信息。

根本原因是 VSCode 没把 .vue 文件交给 Volar 处理。默认它仍当 HTML 解析。

打开 settings.json，确认有："files.associations": { "*.vue": "vue" }
必须设 "volar.takeOverMode": true（不是 enable 或 enabled）
如果之前装过 Vetur，务必禁用或卸载——二者共存时 Volar 会静默降级
重启 VSCode（仅重载窗口不够，Volar 的 takeover 需完整启动）

ESLint + Prettier 保存后代码变乱或报红

典型表现：editor.formatOnSave 一开，ref() 变成 ref ()，或 import { foo } from './bar' 被删掉空格后 ESLint 突然报 import/no-unresolved。

这是规则打架：Prettier 做格式化，ESLint 也试图格式化，但两者规则不兼容。

vue-composition-api-best-practices

Vue 3 组合式 API 与最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

在 settings.json 中明确禁用 ESLint 的格式能力："eslint.format.enable": false
只让 ESLint 负责逻辑检查（如未使用变量、defineProps 类型缺失），格式全交给 Prettier
"editor.defaultFormatter" 设为 "esbenp.prettier-vscode"，且仅对 ["javascript", "typescript", "vue"] 生效
项目根目录必须有 .eslintrc.cjs（推荐 Vue 官方 preset）和 .prettierrc，否则插件读不到项目级规则

路径跳转失效：@/components/xxx.vue 点不了

现象：模板中写 <commonselect></commonselect>，Ctrl+Click 没反应；import CommonSelect from '@/components/common-select' 里 @/ 部分也不可跳转。

Path Intellisense 和 Volar 各管一段：前者补全路径字符串，后者负责符号跳转。别名跳转靠的是 Volar 的别名解析能力。

确保项目 tsconfig.json 或 jsconfig.json 里配置了 "compilerOptions.paths（如 "@/*": ["src/*"]）
Volar 会自动读取该配置，无需额外插件——装 “Alias Path Jump” 这类第三方插件反而可能冲突
如果用了 vite-plugin-pages 或自定义别名，需在 tsconfig.json 中显式声明，Volar 不会猜
检查 src 是否在工作区根目录下；若打开的是子文件夹（如 packages/my-lib），Volar 可能找不到 tsconfig.json