VSCode自动补全代码必备扩展_Vue项目开发必装-VSCode-PHP中文网

vue 3 项目必须使用 volar 而非 vetur，否则 ref、definecomponent 补全失效，template 属性不提示，setup 参数类型丢失；需卸载 vetur、安装 volarjs.volar，确保状态栏显示“volar (ts/js)”，并配置 eslint resolver 支持路径别名。

vscode自动补全代码必备扩展_vue项目开发必装

Volar 是 Vue 3 项目里唯一该装的语法支持扩展

Vue 2 用 Vetur，Vue 3 必须换 Volar；装错或两者共存会导致 ref、defineComponent 补全失效，<template></template> 区域内属性不提示，甚至 setup() 参数类型完全丢失。Volar 不是“锦上添花”，它是让 TypeScript 能正确解析 .vue 文件结构的语言服务器。

卸载所有 Vetur 相关扩展（包括旧版 Vetur、Vetur Pack 等）
安装 volarjs.volar（发布者：Volar Team），不是 vue.volar（已归档）
打开一个 .vue 文件，右下角状态栏应显示 “Volar (TS)” 或 “Volar (JS)”，不是 “Vue” 或空白
若仍无补全，按 Ctrl+Shift+P → 输入 Volar: Restart Volar Server 强制重载

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

VS Code 的 import 补全（比如输入 import { useFoo } 后按 Ctrl+Space 提示来自 @/composables 的选项）实际由 ESLint 插件驱动，而非 TypeScript 本身。如果 eslint-plugin-import 的 resolver 没配对，@/ 别名、~/ 路径、src/utils 这类路径根本不会出现在补全列表里。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

确保项目根目录有 .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 卡顿 2 秒、ref() 的参数提示消失。它们底层都跑本地模型，同时运行会吃光内存（尤其 M1/M2 Mac）。

前端 Vue/TS 项目优先留 github.copilot，关掉 tabnine.tabnine-vscode
在 settings.json 中显式禁用冲突项："tabnine.experimentalAutoImports": false
若 Copilot 内联建议和下拉列表打架，加一行："github.copilot.inlineSuggest.enable": false

补全质量不取决于插件数量，而取决于 Volar 是否接管了 .vue、ESLint 是否告诉编辑器“@/ 指向哪里”、以及有没有两个 LSP 在后台抢键盘事件。这三个点没对齐，装再多“智能补全”插件也没用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！