VSCode如何配置Prettier和ESLint冲突的问题-VSCode-PHP中文网

必须让Prettier负责格式、ESLint只管逻辑错误：禁用ESLint所有格式规则，通过eslint-config-prettier统一交由Prettier处理，并在VSCode中关闭eslint.autoFixOnSave、启用editor.formatOnSave且指定defaultFormatter为esbenp.prettier-vscode。

vscode如何配置prettier和eslint冲突的问题

VSCode 里 Prettier 和 ESLint 报红、格式越修越乱，根本不是版本问题，而是两个工具在同时改同一行代码——必须让它们各司其职：Prettier 负责“长什么样”，ESLint 只管“对不对”。

为什么保存后波浪线反复闪、代码被来回修改

典型现象：const a = 1 保存后变成 const a = 1;（Prettier 加分号），紧接着 ESLint 立刻报 Missing semicolon；或者缩进从 2 空格变 4 空格又弹回。这不是插件 bug，是 VSCode 同时触发了 editor.formatOnSave（Prettier）和 eslint.codeActionsOnSave（ESLint 自动修复），两者没协商，直接覆盖对方输出。

检查 settings.json 是否同时存在 "editor.formatOnSave": true 和 "editor.codeActionsOnSave": {"source.fixAll.eslint": true}
确认没有残留的旧配置，比如已废弃的 prettier.eslintIntegration
如果项目用了 TypeScript，@typescript-eslint/indent 和原生 indent 规则共存也会引发冲突，必须关掉后者

如何在 .eslintrc.js 中彻底禁用 ESLint 的格式规则

目标是让 ESLint 完全不碰缩进、引号、分号这些事，只报 undefined is not a function 这类真问题。靠手动关规则容易漏，推荐用 eslint-config-prettier 一键清空。

运行 npm install --save-dev eslint-config-prettier
在 .eslintrc.js 的 extends 数组末尾加上 "prettier"：["eslint:recommended", "plugin:react/recommended", "prettier"]（顺序不能错，否则前面的规则会覆盖它）
删掉所有显式写的格式类 rule，例如："semi"、"quotes"、"comma-dangle"、"indent"
保留 "prettier/prettier": "error" —— 这条不是让 ESLint 格式化，而是让它把 Prettier 认为不合规的地方也标出来（比如你忘了配 .prettierrc）

VSCode 设置里必须改的三项关键配置

光改配置文件没用，VSCode 必须明确知道“谁来执行保存时的格式化动作”。以下三项缺一不可，且必须全部生效：

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

"editor.formatOnSave": true —— 保持开启，这是触发入口
"editor.defaultFormatter": "esbenp.prettier-vscode" —— 明确指定 Prettier 插件为默认格式化器（不是 ESLint）
"eslint.autoFixOnSave": false —— 关掉 ESLint 的自动修复，避免它抢在 Prettier 前或后改代码

注意："eslint.format.enable": true 必须删除或设为 false，否则 ESLint 插件会尝试自己格式化，和 Prettier 冲突。

为什么 .prettierrc 配置了但还是不生效

常见原因是 VSCode 没找到配置文件，或项目依赖没装对。Prettier 插件默认只读取项目根目录下的 .prettierrc、prettier.config.js 或 package.json 里的 prettier 字段。

确认文件名拼写正确：.prettierrc（带点）、.prettierrc.json、prettier.config.js 都可以，但 prettier.json 不行
检查 node_modules/prettier 是否存在 —— Prettier 插件优先使用项目本地安装的版本，不依赖全局
右键编辑器 → “Format Document With…” → 看当前选中的是不是 Prettier，如果不是，点进去选一次并勾选“Configure Default Formatter for ‘JavaScript’”
如果项目有 vue 文件，确保 "[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"} 单独配了，Volar/Vetur 可能劫持 vue 文件的格式化行为