VSCode自动补全代码必备扩展_Vue项目开发必装

先说个明确的结论：Vue 3 项目想获得靠谱的代码补全，Volar 是唯一选择，Vetur 必须彻底卸载。这不是什么锦上添花的建议，而是基础配置——装错了或者两者共存，ref 和 defineComponent 的自动补全直接失效，template 里写属性没任何提示，setup() 的参数类型更是完全丢失。Volar 本质上是一个专门为 .vue 文件设计的语言服务器，只有它才能让 TypeScript 正确解析 Vue 的单文件组件结构。

具体操作其实很简单：先卸载所有与 Vetur 相关的扩展（包括旧版 Vetur、Vetur Pack 等），然后安装发布者为 Volar Team 的 volarjs.volar——注意不是已经归档的 vue.volar。安装完成后，随便打开一个 .vue 文件，看右下角状态栏：正常显示应该是“Volar (TS)”或“Volar (JS)”，而不是“Vue”或者一片空白。如果还是没补全，别急，按 Ctrl+Shift+P 调出命令面板，输入 Volar: Restart Volar Server 强制重载一下即可。

ESLint + Prettier 不只是格式化工具，它们直接影响 import 补全路径

很多开发者以为 import 补全（比如输入 import { useFoo } 后按 Ctrl+Space，自动弹出来自 @/composables 的选项）是 TypeScript 本身的功能，实际上它是由 ESLint 插件驱动的。如果 eslint-plugin-import 的 resolver 没配置对，@/ 别名、~/ 路径、src/utils 这类常见路径根本不会出现在补全列表里。

要解决这个问题，确保项目根目录下有 .eslintrc.cjs 或 .eslintrc.js，并且包含以下 resolver 配置：

settings: {
  'import/resolver': {
    node: {
      paths: ['src'],
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
    }
  }
}

配置改完后，记得执行命令面板里的 ESLint: Restart ESLint Server，否则改动不会生效。另外，别指望 vite.config.ts 或 tsconfig.json 里的 paths 能自动同步到补全系统——VS Code 默认不读它们，这条路走不通。

不要装 Copilot 和 TabNine 一起开机

这两个工具都会劫持 editor.suggest 面板，一旦共存，常见现象是：输入 use 后弹出一个空白建议框，按 Ctrl+Space 卡顿两秒，甚至 ref() 的参数提示直接消失。更糟糕的是，它们底层都跑本地模型，同时运行会吃光内存，尤其在 M1/M2 Mac 上特别明显。

对于前端 Vue/TypeScript 项目，建议优先保留 github.copilot，关掉 tabnine.tabnine-vscode。如果仍觉得卡顿，可以在 settings.json 中显式禁用冲突项："tabnine.experimentalAutoImports": false。若 Copilot 的内联建议和下拉列表打架，再加一行："github.copilot.inlineSuggest.enable": false。

说到底，补全质量不取决于你装了多少个“智能补全”插件，而在于三个关键点是否对齐：Volar 是否真正接管了 .vue 文件的分析，ESLint 是否告诉编辑器“@/ 指向哪里”，以及后台有没有两个语言服务器在抢键盘事件。这三个点没搞清楚，装再多插件也是白搭。