VSCode高效开发Vue插件_VSCode提升写代码速度配置【技巧】-VSCode-PHP中文网

volar takeover模式必须开启，否则vue3类型推导、defineprops补全、模板中ref跳转均失效；需执行volar: switch to take over mode、设置"volar.takeovermode": true、重启vscode并确认.vue文件语言模式为vue。

vscode高效开发vue插件_vscode提升写代码速度配置【技巧】

VSCode 写 Vue 代码慢，八成不是手速问题，而是 Volar 没接管、路径别名跳转失效、保存不自动修复，或者模板里连 ref 都不补全 .value。

Volar 接管模式必须开，否则 `setup` 类型推导全失效

Vue 3 + <script setup></script> 的类型提示、defineProps 自动补全、模板中响应式变量跳转，全依赖 Volar 启用 “Take Over Mode”。不启用时，VSCode 默认用 TS 语言服务解析 .vue 文件，结果就是：props.msg 报错、ref 不提示 .value、组件名 Ctrl+Click 跳不到定义。

按 Cmd+Shift+P（macOS）或 Ctrl+Shift+P（Windows/Linux），输入 Volar: Switch to Take Over Mode 并执行
确认 settings.json 中有 "volar.takeOverMode": true
重启 VSCode —— 这步不能跳，Volar 语言服务器需冷启动加载
打开任意 .vue 文件，右下角状态栏语言模式必须是 Vue，不是 HTML 或 Plain Text

`tsconfig.json` 路径别名配置错，`@/components/xxx` 就点不动

路径别名（如 @/ 指向 src/）在 import 时能点进文件、F12 跳转、重命名同步更新，前提是 Volar 能读到 tsconfig.json 里的 paths。常见现象：import 正常，但 Ctrl+Click 无反应，或跳到错误位置。

vue-component-analyzer

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

下载

确保项目根目录有 tsconfig.json，且含以下内容：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

检查 settings.json 中是否误加了 "typescript.preferences.includePackageJsonAutoImports": "off" —— 这会干扰路径解析
如果用了 jsconfig.json（纯 JS 项目），Volar 默认不读它，必须改用 tsconfig.json 或在 settings.json 中显式指定："volar.typescript.serverPath": "./node_modules/typescript/lib/tsserverlibrary.js"

保存时只格式化不修复？`eslint.format.enable` 和 `codeActionsOnSave` 得配对开

很多人设了 "editor.formatOnSave": true 和 "editor.defaultFormatter": "esbenp.prettier-vscode"，结果保存后缩进变了，但 no-unused-vars 或 vue/multi-word-component-names 错误还在。这是因为 ESLint 校验和自动修复没真正触发。

必须同时开启两个开关：

"eslint.format.enable": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

"[vue]": { "editor.defaultFormatter": "vue.volar" } —— 这行要保留，否则 <template></template> 区块会被 Prettier 当 HTML 格式化，破坏 Vue 特有语法（如 v-if 缩进）
若用的是 eslint.config.js（ESM 格式），确保它导出数组，且包含 files: ['**/*.vue']，否则 ESLint 根本不扫描 .vue 文件

模板里写 `div.flex` 按 Tab 没反应？Emmet 必须手动关联 `vue` 语言

VSCode 默认只在 html、javascript 等语言中启用 Emmet。Vue 的 <template></template> 是独立语言模式，不显式声明就用不了缩写。

在 settings.json 中添加：

"emerald.emmetExtensions": ["vue"],
"emmet.includeLanguages": {
  "vue-html": "html",
  "vue": "html"
}

或者升级到 VSCode 1.84+，该版本已内置支持，但需确认右下角语言模式是 Vue 而非 Vue HTML；如果是后者，手动点击切换为 Vue
验证方式：在 <template></template> 中输入 div.container>p.text + Tab，应生成嵌套结构；若无效，大概率是语言模式或 Emmet 配置未生效

最常被忽略的其实是 Volar 和 TypeScript 版本耦合：项目装的是 typescript@5.4，但 VSCode 用了内置的 5.0，会导致 defineProps 泛型推导失败。务必通过 Cmd+Shift+P → TypeScript: Select TypeScript Version → Use Workspace Version 手动切过去。