VSCode智能代码分析神器_VSCode自动规范Vue代码【总结】-VSCode-PHP中文网

vscode保存时自动修复vue代码的关键是eslint必须正确识别并处理.vue文件：需在settings.json中配置"eslint.validate": ["javascript", "typescript", "vue"]，安装兼容版本的eslint-plugin-vue（vue 3用v9+），禁用vetur改用volar，设"source.fixall.eslint": true而非"source.fixall"，并关闭"editor.formatonsave"以防prettier覆盖。

vscode智能代码分析神器_vscode自动规范vue代码【总结】

VSCode 保存时自动修复 Vue 代码，关键不在装插件，而在 ESLint 能否真正接管 .vue 文件的 script 和 template 区域——否则你看到的“报错”和“修复”都是假动作。

为什么 `editor.codeActionsOnSave` 设了却没反应？

最常见原因是 ESLint 没识别到 .vue 文件：默认只校验 javascript 和 typescript，不包含 vue。必须显式加入 "eslint.validate" 列表：

"eslint.validate": ["javascript", "typescript", "vue"] —— 缺少 "vue" 就不会检查单文件组件
若项目用的是 <script setup></script>，还需确保 eslint-plugin-vue 版本 ≥ 9.0（Vue 3.3+ 推荐用 eslint-plugin-vue@latest）
旧项目若混用 Vetur，它会抢走 .vue 的语言服务，导致 ESLint 校验失效；必须禁用 Vetur，改用 Volar + TypeScript Vue Plugin

`source.fixAll.eslint` 和 `source.fixAll` 有什么区别？

前者只触发 ESLint 自身支持的修复（比如 no-unused-vars、vue/multi-word-component-names），后者是泛用型指令，可能调用其他格式化器，反而绕过 ESLint 规则。

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

务必用 "source.fixAll.eslint": true，而不是 "source.fixAll": true
如果同时启用了 Prettier，editor.formatOnSave 必须设为 false，否则 ESLint 修复后 Prettier 立刻覆盖，形成“修了又乱”的循环
想让 Prettier 也参与，应通过 eslint-config-prettier 关闭 ESLint 中与格式相关的规则，再由 ESLint 统一修复

Vue 项目里 `.eslintrc.*` 配置该用 JS 还是 CJS？

取决于 Node.js 版本和 ESLint CLI 启动方式。2026 年主流项目已默认启用 ESM，但 VSCode 的 ESLint 插件仍更稳定兼容 .cjs 后缀。

推荐用 .eslintrc.cjs，导出为 module.exports = { ... }
若用 .eslintrc.js 且含 import 语法，需确认项目 package.json 有 "type": "module"，否则 VSCode 插件加载失败，状态栏 ESLint 图标变灰
Vue 官方脚手架生成的配置多为 .eslintrc.js，但实际运行时依赖 eslint-plugin-vue 的 flat 配置入口；如遇规则不生效，优先检查插件版本是否匹配 Vue 版本

真正卡住人的往往不是配置项本身，而是 ESLint 插件在后台加载时静默失败——比如 node_modules 里缺失 eslint-plugin-vue，或 eslint.options.extensions 漏写了 ".vue"。打开 VSCode 输出面板，切换到 ESLint 标签页，看有没有 Failed to load plugin 或 Cannot read property 'parse' of undefined 这类日志，比反复改 settings.json 有效得多。