VSCode智能代码分析插件_VSCode自动规范Vue代码【教程】-VSCode-PHP中文网

vue代码在vscode中不报错、不修复、不格式化，根源在于eslint与prettier协作链断裂：语言服务未选对（vue 3须用volar而非vetur）、校验范围未显式包含"vue"、格式化触发逻辑被冲突覆盖（如formatonsave与codeactionsonsave互斥），且vue 2/3配置混用会导致规则失效。

vscode智能代码分析插件_vscode自动规范vue代码【教程】

Vue 代码在 VSCode 里不报错、不修复、不格式化，根本不是插件没装，而是 ESLint 和 Prettier 的协作链断在了三个关键位置：语言服务没选对、校验范围没覆盖 vue、格式化触发逻辑被冲突覆盖。

Vue 文件不触发 ESLint 校验

常见现象是保存后 console.log 或 debugger 完全没提示，右下角状态栏也看不到 ESLint 图标。

确认 eslint.validate 配置里包含 "vue"：必须显式写进数组，不能只写 javascript 或 typescript
检查项目根目录是否存在有效的 .eslintrc.js（或 .eslintrc.cjs），且 extends 中含 plugin:vue/essential 或 plugin:vue/recommended
确保 VSCode 是以项目根目录打开的——如果只是打开了某个 .vue 文件而没打开整个文件夹，ESLint 会静默失效
禁用 Vetur（Vue 3 项目）：Vetur 会劫持 vue 语言模式，导致 ESLint 无法正确识别 SFC 结构；必须启用 Volar 并在设置中关闭 Vetur

Prettier 不格式化 .vue 中的 template

你改了 .prettierrc，JS/TS 段落能格式化，但 <template></template> 里依然缩进混乱、属性换行随意——这不是 Prettier 不行，是它压根没被调度到那一块。

vue-component-analyzer

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

下载

Prettier 原生不支持 <template></template>，必须靠 Vetur（Vue 2）或 Volar（Vue 3）桥接。但 Volar 默认不启用 Prettier 处理 template，需手动配：

在 .vscode/settings.json 中加：

{ "vetur.format.defaultFormatter.html": "prettier", "volar.format.defaultFormatter.html": "prettier" }

若同时启用了 editor.formatOnSave，务必关掉它——否则会和 editor.codeActionsOnSave 冲突，导致部分区块被跳过
注意：Volar 的 HTML formatter 依赖 Prettier 版本 ≥ 2.8.0；旧版会静默降级为内置 formatter

保存时只修复部分规则，`no-console` 类规则不自动修

你配置了 "source.fixAll.eslint": true，但保存后只有缩进/分号变了，console 还在，unused-vars 也没删——问题出在规则可修复性上。

不是所有 ESLint 规则都支持自动修复（--fix）。查文档看规则页是否有扳手图标，比如 vue/multi-word-component-names 就不可修复
no-console 默认不可修复（ESLint 认为删除 console 是语义变更，非纯格式问题），如需自动删，得显式加修复开关：
```
"no-console": ["error", { "allow": ["warn", "error"] }]
```
——但这仍不会自动删，只是放宽限制
真正能自动修复的，是带 fixable: "code" 或 fixable: "whitespace" 的规则，比如 semi、quotes、vue/script-indent
推荐做法：把 no-console 改成 warn 级别，靠 CI 拦截，开发期不强求自动删

Vue 2 和 Vue 3 的配置不能混用

你在 Vue 3 项目里照搬 Vue 2 的 vetur + eslint-plugin-vue 配置，结果 <script setup></script> 报红、响应式 API 提示失效——不是插件坏了，是语法层根本不匹配。

Vue 3 必须用 Volar，且 eslint-plugin-vue 要升级到 v9+，否则无法解析 defineProps、defineEmits
parserOptions.parser 在 Vue 3 项目中不能设为 babel-eslint（已废弃），应改用 @typescript-eslint/parser（TS 项目）或留空（Volar 自动接管）
模板中使用 v-model 时，Vue 2 是 v-model:value，Vue 3 是 v-model 直接绑定，ESLint 规则名也不同：vue/v-model-value（Vue 2） vs vue/v-model-arg（Vue 3）
最易忽略的一点：Volar 的类型检查默认异步延迟，首次打开大项目可能要等 10–20 秒才开始报错，别误判为“没生效”

真正卡住人的，往往不是某一步配错了，而是多个配置项之间存在隐式依赖：比如开了 editor.formatOnSave 却没关 vetur.format.enable，结果两个 formatter 抢着格式化同一段，最终谁都不管 template；又比如用了 Vue 3 语法却还在 .eslintrc.js 里 extends plugin:vue/2.x，规则引擎直接跳过校验。这些细节不逐个对齐，表面看着都装了，实际就是“看起来在工作，其实没干活”。