VS Code高效插件重在解决实际问题而非数量:Path Intellisense修复别名跳转、Reactjs code snippets需调优前缀与优先级、Terminal Tabs轻量替代Shell Launcher、Vue项目必用Volar取代Vetur,并注意插件冲突配置。

VS Code 插件不是装得越多越高效,关键看能不能解决你此刻正卡住的问题。下面这 10 个不是“人气高就推荐”,而是真实压在日常开发一线、反复验证过「删了它我会骂人」的插件。
快速跳转到定义却跳错位置?装 Path Intellisense 前先关掉默认路径补全
VS Code 自带的路径提示在 import 时经常只认相对路径开头,遇到 src/ 别名或 @/ 别名就失效,结果跳转到 node_modules 里一个同名但无关的文件。
- 必须禁用内置路径补全:
"javascript.suggest.paths": false和"typescript.suggest.paths": false -
Path Intellisense默认支持@/、~/、src/等别名,但需确认项目根目录下有jsconfig.json或tsconfig.json配置了baseUrl和paths - 如果用 Vite,记得加
"volar.ignoreProjectWarning": true,否则它可能和Volar插件抢路径解析权
写 React 组件时重复敲 useState、useEffect?Reactjs code snippets 要手动改前缀
这个插件自带的缩写如 us(useState)看着方便,但实际敲 us + Tab 很容易触发 VS Code 自带的 JavaScript 代码片段(比如 use strict),根本不会弹出 React 片段。
- 进设置搜
editor.snippetSuggestions,改成top,让自定义片段优先显示 - 把默认前缀
us改成rus(react useState),避免和原生冲突;同理rua(react useEffect)、rpc(react props children) - 不建议启用自动 import 功能——它常把
useState加到错误的文件顶部,尤其是 TypeScript 中类型没导出时会直接报错
终端里执行 npm run dev 卡住不动?Terminal Tabs 比 Shell Launcher 更轻量
很多人装 Shell Launcher 想一键开多个终端,结果发现每次启动都慢半拍,还常和 Windows 的 WSL2 初始化冲突,终端标题栏显示乱码。
-
Terminal Tabs不重写终端底层,只是给内置终端加标签页 + 快速切换快捷键(Ctrl+Shift+T) - 配合设置
"terminal.integrated.defaultProfile.windows": "Git Bash"(或你的常用 shell),避免每次新开终端都默认 PowerShell - 如果项目用了 pnpm,记得在终端启动前运行
pnpm env use --global 18,否则node -v可能还是旧版本,导致npm run dev启动失败但无报错
TypeScript 类型擦除后找不到 ref 或 computed?必须配 Volar 而非 Vetur
Vetur 已停止维护,对 Vue 3 的 defineComponent、defineProps 泛型推导完全失效,写 props.msg.value 时没有类型提示,报错也只标红整行,不指明哪一列。
- 卸载
Vetur后重启 VS Code,再装Volar,它会自动激活「Take Over Mode」,接管所有.vue文件 - 若项目是 Vue 2 + Composition API,需手动关闭
Volar的 Take Over,改用Vue Language Features (Volar)子插件,并开启"volar.useWorkspaceDependencies": true - 遇到
Cannot find name 'ref',大概率是tsconfig.json里漏了"types": ["vue"]
插件冲突比想象中更常见:比如 Prettier 和 ESLint 都想格式化保存时,必须明确指定谁主责;又比如 Auto Rename Tag 在 JSX 中有时会误重命名属性。这些细节不调,装十个插件也不如一个配对的。


















