VSCode代码执行辅助插件_VSCode自动解析Vue插件【方案】-VSCode-PHP中文网

vue 3 项目必须用 volar 而非 vetur，因 vetur 已归档且不支持 script setup 的类型推导、ref 跳转和 defineprops 补全；volar 是官方维护插件，需启用 takeover 模式并禁用 vetur 才能正常工作。

vscode代码执行辅助插件_vscode自动解析vue插件【方案】

Vue 3（尤其是 script setup）的类型推导、响应式变量跳转、defineProps 自动补全，Vetur 做不到，且已归档。Volar 是 Vue 官方维护的语言支持插件，它能真正理解组合式 API 的语义。

装完 Vue Language Features (Volar) 后，**必须顺带安装 TypeScript Vue Plugin (Volar)**，否则 <script setup></script> 区域的 TS 类型检查会失效
务必卸载或禁用 Vetur：两者共存会导致模板中 ref 变量无法跳转、onMounted 提示缺失等静默失效问题
在 .vscode/settings.json 中加 "volar.takeOverMode": true，让 Volar 接管 TS 语言服务——这是模板内类型提示生效的关键一步
确认右下角状态栏语言模式是 vue（不是 HTML），否则 Emmet 和语法高亮都会降级

输入 @/components/ 没提示？不是插件坏了，是它默认只扫描文件系统相对路径，不认识 Webpack/Vite 的 @ 别名。

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

在项目根目录的 jsconfig.json 或 tsconfig.json 中声明别名："compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } }
Path Intellisense 会自动读取该配置，无需额外设置；若仍不生效，重启 VSCode 并确认 tsconfig 文件未被 exclude 掉
别名层级过深（如 @@/utils）需手动在 settings.json 中配 "path-intellisense.mappings"，但多数项目用标准 @ 就够了

在 <template></template> 中写 <mybutton></mybutton> 却没法跳到定义处，常见于两种情况：插件没装，或 Volar 的“接管”没生效。

装 Vue Peek 是最直接解法：它专为 Vue SFC 组件跳转设计，比全局搜索快，且支持 defineAsyncComponent 动态导入场景
如果已装 Volar 但跳转仍失败，检查 settings.json 是否漏了 "files.associations": { "*.vue": "vue" } —— 这条决定了 VSCode 把 .vue 当 Vue 文件还是 HTML 文件处理
某些 monorepo 项目中，组件定义在子包里，需确保 tsconfig.json 的 "include" 覆盖对应路径，否则 Volar 找不到源码位置

v-model:value 或 v-model:foo.trim 被标红，大概率是 ESLint 插件加载了 Vue 2 规则，而项目是 Vue 3。

确保安装的是 eslint-plugin-vue@9.x（Vue 3 对应版本），而非旧版 @8；检查 package.json 中依赖是否锁定正确
.eslintrc.cjs 的 extends 应包含 'plugin:vue/vue3-recommended'，不是 vue/recommended（那是 Vue 2 的）
若用了 defineModel()（Vue 3.4+），还需升级 eslint-plugin-vue 至 @9.25.0+，否则会误报“未定义的 model”
VSCode 中 ESLint 插件右下角显示 “ESLint: Running…” 却无提示？可能是工作区没识别到配置文件，尝试用命令面板执行 ESLint: Restart ESLint Server