盘点4个VS Code前端Vue3开发必备插件，组合式API环境配置避坑指南-VSCode-PHP中文网

必须禁用vetur以避免与volar冲突，确保vue 3组合式api类型推导、模板解包、defineprops提示正常；需配置eslint解析器、关闭vueindentscriptandstyle、启用volar接管模式。

盘点4个vs code前端vue3开发必备插件，组合式api环境配置避坑指南

Vue Language Features (Volar) 必须禁用 Vetur

Vue 3 组合式 API（setup()）的类型推导、模板中 ref / reactive 的自动解包、defineProps 类型提示，全依赖 Volar。但 VS Code 默认可能同时启用 Vetur 和 Volar —— 它们会冲突，导致跳转失效、props 类型报红、emits 不识别。

实操建议：

打开 VS Code 插件面板，搜 Vetur，点击「禁用」（不是卸载），确保右下角状态栏不显示 Vetur 图标
确认已安装 Volar（官方插件，作者是 Vue 团队），并勾选「启用（工作区）」
在项目根目录加 .vscode/settings.json，强制指定语言模式：
```
{ "files.associations": { "*.vue": "vue" } }
```
重启窗口（Cmd/Ctrl + Shift + P → Developer: Reload Window），否则旧缓存仍可能误用 Vetur 解析器

ESLint + Vue Router 类型丢失？配 `parserOptions.parser` 是关键

用 @typescript-eslint/parser 解析 .vue 文件时，若没显式告诉 ESLint “单文件组件里的 <script setup></script> 要交给 TS 处理”，就会报 Cannot find name 'ref' 或 defineProps is not defined —— 这不是缺少依赖，是解析链断了。

实操建议：

在项目根目录 .eslintrc.cjs 中，parserOptions 必须包含：

parserOptions: {
  parser: '@typescript-eslint/parser',
  extraFileExtensions: ['.vue'],
}

确保已安装 @typescript-eslint/eslint-plugin 和 eslint-plugin-vue，且 extends 里有 'plugin:vue/vue3-recommended'
如果用了 unplugin-vue-components 自动导入，ESLint 不会感知这些隐式引入，需在 globals 中手动加：
```
globals: { ref: 'readonly', reactive: 'readonly', defineProps: 'readonly' }
```

Auto Rename Tag 不兼容 `<script setup></script>`？换 `Auto Close Tag` 更稳

老版 Auto Rename Tag 插件对 <script setup lang="ts"></script> 里的标签名重命名支持差，常出现改了 <mybutton></mybutton> 却不联动更新关闭标签，或在 <template></template> 里误触 JS 变量重命名。

vue3-ant-design-vue-component-skill

封装基于 Vue 3 + Ant Design Vue 的通用业务组件，提供标准化模板与最佳实践。

下载

实操建议：

直接卸载 Auto Rename Tag，改用 VS Code 内置的 Auto Close Tag（默认开启），它只管标签闭合，不碰变量名，零冲突
如需模板内属性补全，靠 Volar + Volar: Enable Take Over Mode（在命令面板搜此命令并执行）即可触发完整 HTML/JSX 补全
避免装“Vue Helper”“Vue Peek”等小众插件，它们和 Volar 的语义分析层重复，易引发内存暴涨或光标卡顿

Prettier 格式化 .vue 文件失败？检查 `prettier.vueIndentScriptAndStyle`

升级到 Vue 3.4 + Volar 1.8+ 后，Prettier 对 <script setup></script> 的缩进逻辑变了。若没关掉旧配置，格式化后 const count = ref(0) 可能被缩进两格，或 defineProps 参数换行错乱。

实操建议：

在 .prettierrc 中明确设：
```
"vueIndentScriptAndStyle": false
```
（这是 Vue 3.3+ 推荐值，Volar 会接管缩进）
确认 VS Code 设置里 editor.defaultFormatter 对 vue 文件类型指向 esbenp.prettier-vscode，而非 octref.vetur
如果项目用 unplugin-auto-import 注入了 ref 等，Prettier 不会处理导入语句顺序——那是 eslint-plugin-import 的事，别指望格式化解决