VSCode开发Vue必备插件_提升代码编写速度的自动技巧【策略】-VSCode-PHP中文网

volar 是 vue 3 唯一支持完整类型推导与模板跳转的语言服务，必须启用 volar.takeovermode 并配置 tsconfig.json 中的 baseurl 和 paths 别名，否则类型提示失效、路径补全异常；同时需卸载 vetur、合理配置 eslint 自动修复范围及使用 vue peek 补齐组件跳转盲区。

vscode开发vue必备插件_提升代码编写速度的自动技巧【策略】

Vue 3 项目里，Volar 是唯一真正能撑起类型推导、模板跳转和响应式变量感知的语言服务插件；Vetur 已归档，继续启用会直接导致 defineProps 类型丢失、ref 无法跳转、模板内 TS 报错失效等硬伤。

必须启用 Volar 的 Take Over Mode

不开启 volar.takeOverMode，VSCode 就不会把 .vue 文件里的 <script setup></script> 当作 TypeScript 处理，所有类型提示、自动导入、错误检查都会降级为“猜”——比如 props.msg 显示 “any”，useRoute() 点不进去定义，ref 声明后无法被模板识别。

在 .vscode/settings.json 中添加："volar.takeOverMode": true
该设置会接管 TS/JS 语言服务，但仅对 .vue 和关联的 .ts 文件生效，不影响纯 JS 项目
启用后需重启 VSCode（不是重载窗口），否则状态栏仍显示 “TypeScript” 而非 “Vue”
如果同时装了 Vetur，它会强制禁用 Volar 的接管能力，务必卸载或禁用 Vetur

路径补全必须配别名 + Path Intellisense

写 import { useUser } from '@/composables/user' 时，靠手动数 ../../../ 或全局搜索找路径，是 Vue 开发中最常卡顿的环节。光装 Path Intellisense 不够，它默认不识别 @/ 这类 Webpack/Vite 别名。

check-vue-style

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

下载

在 jsconfig.json 或 tsconfig.json 中声明别名："compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } }
确保 Path Intellisense 插件已启用，并在设置中打开 path-intellisense.mappings 自动读取 tsconfig
输入 @/ 后，它会直接列出 src/ 下所有子目录，支持二级路径联想（如 @/components/ → Button.vue）
不配 baseUrl 和 paths，插件只会补全物理路径，遇到软链或 monorepo 子包会彻底失效

保存即修复 ESLint 需限定文件范围

"editor.codeActionsOnSave": { "source.fixAll.eslint": true } 看似省事，但一旦误开 package.json 或 webpack.config.js 并保存，ESLint 可能强行格式化 JSON 结构、重排数组顺序，甚至把 devDependencies 移到顶部——这不是修复，是破坏。

改用 "[vue]": { "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }，只对 .vue 文件生效
再加一条 "[typescript]": { ... } 和 "[javascript]": { ... }，覆盖脚本逻辑部分
确保项目已安装 @vue/eslint-config-typescript，否则 defineProps() 这类写法会被标红
若使用 Prettier，必须禁用其格式化规则：eslint-config-prettier 要出现在 extends 最末尾

组件跳转别依赖 Ctrl+Click，用 Vue Peek 补盲区

Volar 的 “转到定义” 对 defineComponent、defineAsyncComponent 支持良好，但遇到从 unplugin-vue-components 自动导入的组件（如 <elbutton></elbutton>），或第三方 UI 库里没导出默认 export default 的子组件（如 ElementPlus/components/button/src/button.vue），Ctrl+Click 会失败。

Vue Peek 插件专治这类场景：在模板中右键组件名 → “Peek Component Definition”，直接弹出源码预览（不跳转）
它不依赖类型系统，纯靠文件路径匹配，所以对未显式 import 的组件、别名路径、甚至 node_modules 里的 .vue 文件都有效
配合 Auto Import 使用效果更佳：写完 <mydialog></mydialog>，保存后自动加 import，再 Peek 就能立刻看到实现
注意关闭它的 “peek on hover” 选项，否则悬停两秒就弹窗，干扰阅读

最易被忽略的是 volar.takeOverMode 和 tsconfig.json 的联动——缺一不可。很多人配了 Take Over 却忘了配 baseUrl，结果模板里能跳转，script 里 import 的路径却补不出来，以为插件坏了，其实是配置断在了中间层。