VSCode自动修复Vue插件_VSCode提升代码编写质量【实战】-VSCode-PHP中文网

vscode保存时不能自动修复vue文件eslint错误，根本原因是.eslintrc配置未显式为*.vue文件指定parser及files匹配，且settings.json中eslint.validate未包含"vue"、eslint.enable未设为true，导致eslint无法识别并处理块。

vscode自动修复vue插件_vscode提升代码编写质量【实战】

VSCode 保存时不能自动修复 Vue 文件里的 ESLint 错误，根本不是插件没装全，而是 ESLint 没被正确“指派”去处理 .vue 文件的 <script></script> 块，且 Volar 和 ESLint 的职责边界没划清。

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

VSCode 默认不把 .vue 当作 JavaScript/TypeScript 处理，即使你写了 "source.fixAll.eslint": true，它也不知道该对哪些语言模式生效。

必须显式在 settings.json 中配置 eslint.validate，且顺序无关，但值必须包含 "vue"：["vue", "javascript", "typescript"]
旧写法 eslint.autoFixOnSave 已在 VSCode 1.89+ 彻底弃用，留着反而干扰，务必删掉
eslint.enable 必须为 true（默认是 true，但有些团队脚本会设为 false，导致静默失效）
如果项目用 pnpm/yarn，确认 eslint 在 devDependencies 里，且 VSCode 没 fallback 到全局版本

`.vue` 文件里 `<script setup></script>` 不修复？检查解析器和插件链

ESLint 本身不原生支持 Vue SFC，<script setup></script> 里的语法（如 defineProps、defineEmits）必须靠 eslint-plugin-vue + 正确 parser 才能识别并修复。

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

确保已安装 eslint-plugin-vue@latest（Vue 3 项目用 v9+）
.eslintrc.cjs 或 eslint.config.js 的 overrides 中，必须为 "*.vue" 单独配 parser: "@typescript-eslint/parser"（TS 项目）或 "@babel/eslint-parser"（JS 项目）
extends 数组里，"plugin:vue/vue3-essential" 或 "plugin:vue/vue3-recommended" 必须存在，且 "eslint-config-prettier" 放在最后——顺序错会导致规则被覆盖
删除残留的 Vetur 插件，它会压制 Volar，导致模板层校验失效，间接影响 ESLint 对 script 块的上下文推断

保存后代码“跳来跳去”？Prettier 和 ESLint 在打架

两者都开 formatOnSave 和 codeActionsOnSave 时，ESLint 修完分号，Prettier 立刻把单引号改双引号，再保存又触发 ESLint，形成无限循环。

禁用 editor.formatOnSave，只保留 "source.fixAll.eslint": true，让 ESLint 统一接管（前提是你的 ESLint 配置已集成 Prettier，即 extends 包含 prettier）
若坚持用 Prettier 格式化，就关掉 ESLint 的自动修复，改用 eslint-config-prettier 关闭所有格式类规则，让 Prettier 全权负责风格，ESLint 只管逻辑
.prettierrc 和 ESLint 规则不能矛盾：比如 Prettier 设 "semi": false，ESLint 就不能配 "semi": [2, "always"]，否则输出通道会报 Conflict detected

验证是否真生效：别只看波浪线，要看输出和终端

右下角 ESLint 图标亮了 ≠ 修复生效。很多问题藏在静默跳过里。

按 Ctrl+Shift+P → 输入 ESLint: Show Output Channel，重点看有没有 No ESLint configuration found 或 Failed to load plugin "vue"
在终端运行 npx eslint --ext .js,.vue src/ --fix，如果命令行能修，VSCode 不能，说明是编辑器配置没对上项目路径
确认 VSCode 是打开的**项目根目录**（不是父文件夹），否则找不到 node_modules/eslint 和 .eslintrc.*
Vue 3 + TS 项目里，tsconfig.json 缺 "types": ["vue"] 会导致 defineProps 推导失败，ESLint 直接跳过这块校验

最常被跳过的其实是 parserOptions.parser 的显式声明和 eslint.validate 里 "vue" 的存在性——这两项漏一个，整个 Vue SFC 的自动修复就形同虚设。别信“装了插件就自动好”，VSCode 的修复能力永远只作用于它明确知道该怎么解析的那部分代码。