前端开发必装的VSCode插件避坑指南-VSCode-PHP中文网

vue项目中同时启用vetur和volar会导致跳转失效、defineprops报红、语法高亮消失等问题，必须禁用vetur、启用volar的take over mode、配置"files.associations": {"*.vue": "vue"}并完全重启vscode窗口。

前端开发必装的vscode插件避坑指南

Vue项目里同时装了Vetur和Volar？立刻停手

VS Code 默认可能同时启用 Vetur 和 Volar，但它们底层解析机制冲突，直接导致：Ctrl+Click 跳转失效、defineProps 报红、emits 不识别、甚至整个 .vue 文件语法高亮消失。

实操建议：

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

ESLint 报 Cannot find name 'ref'？检查 parserOptions.parser

这不是缺依赖，是 ESLint 没把 .vue 文件里的 <script setup></script> 交给 TypeScript 处理，解析链断了。常见于用了 @typescript-eslint/parser 却漏配关键字段。

实操建议：

在项目根目录 .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 自动导入，需在 globals 中手动声明：

globals: {
  ref: 'readonly',
  reactive: 'readonly',
  defineProps: 'readonly'
}

Prettier + ESLint 自动格式化不生效？顺序和冲突必须理清

两者规则打架时，formatOnSave 可能静默失败，或保存后代码被反复格式化又 lint 修复，光标乱跳、编辑器卡顿。

前端美化

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

实操建议：

设置 "editor.defaultFormatter": "esbenp.prettier-vscode"，并开启 "editor.formatOnSave": true
装 eslint-config-prettier 并在 .eslintrc.cjs 的 extends 末尾加上 'prettier'，关闭所有与 Prettier 冲突的 ESLint 规则
避免在 settings.json 里同时开 editor.codeActionsOnSave 的 source.fixAll.eslint 和 source.formatDocument —— 选一个主控，推荐让 ESLint 做最终 fix（即只开 source.fixAll.eslint）

Auto Rename Tag 在 `<script setup lang="ts"></script>` 里失灵？换掉它

老版 Auto Rename Tag 对组合式 API 的模板标签重命名支持极差：改了 <mybutton></mybutton> 不联动闭合标签，或误把 JS 变量名当 HTML 标签重命名，引发意外破坏。

实操建议：

直接卸载 Auto Rename Tag，改用 VS Code 内置的 Auto Close Tag（默认开启），它只处理标签闭合，不碰变量，零冲突
如需 <template></template> 内属性补全，确保 Volar 已启用 Volar: Enable Take Over Mode（命令面板搜此命令执行）
别装 Vue Helper、Vue Peek 这类小众插件——它们和 Volar 的语义分析层重复，易引发内存暴涨或光标卡顿

插件不是越多越好，而是每装一个都得清楚它在哪一层介入（LSP、语法高亮、格式化、自动导入），否则看似省事，实则埋下调试黑洞。尤其 Vue3 项目，Volar 的接管模式、ESLint 的 parser 链、Prettier 的规则边界，三者稍有错位，就会表现为“功能看起来开着，实际没起效”。