在 VSCode 中使用 Prettier 和 ESLint 时遇到冲突是常见问题。本文适合已经安装了这两个插件，但保存时反复报错或格式不统一的情况。下面从冲突识别、解决思路、配置要点和验证方法几个方面说明，帮你逐步排查。

冲突的典型表现

Prettier 与 ESLint 的冲突通常源于两者对同一代码风格规则的定义不一致。例如，ESLint 可能要求行尾加分号，而 Prettier 默认不加。这种差异会导致保存时反复格式化或报错。识别冲突的关键是观察 VSCode 的输出面板或 ESLint 的警告信息，如果看到类似“Delete `␍`”或“Replace `...` with `...`”的提示，通常意味着规则冲突。当你在输出面板（Ctrl+J）的“ESLint”或“Problems”中看到这类信息时，可以确定规则层面存在冲突。

推荐解决思路：用 eslint-config-prettier 和解

推荐使用 eslint-config-prettier 禁用 ESLint 中所有与 Prettier 冲突的规则，再通过 eslint-plugin-prettier 将 Prettier 作为一条 ESLint 规则运行。这样既保留了 ESLint 的代码质量检查能力，又统一了格式化风格。安装命令为：npm install --save-dev eslint-config-prettier eslint-plugin-prettier。这是目前社区推荐的方式，适用大多数 JavaScript/TypeScript 项目。需要注意，如果项目本身只用了 Prettier 而不需要 ESLint 的代码质量规则，也可以单独使用 Prettier 并关闭 ESLint 的格式化规则。

具体配置步骤

在 .eslintrc 文件（或 js/ts/json 格式）的 extends 数组中，将 'prettier' 放在最后一项，并添加 plugins: ['prettier']，同时启用规则 'prettier/prettier': 'error'。示例：{"extends": ["eslint:recommended", "prettier"], "plugins": ["prettier"], "rules": {"prettier/prettier": "error"}}。这样 ESLint 会自动报告格式问题并可用 --fix 修复。这里注意 extends 的顺序：'prettier' 必须放在最后，否则它无法覆盖前面的规则。另外，如果项目使用了 TypeScript、React 或 Vue，需要额外引入对应插件，确保 eslint-config-prettier 能覆盖所有冲突规则。比如 React 项目还需安装 eslint-plugin-react，并在 extends 中添加 'plugin:react/recommended'，再在最后加上 'prettier/react'（在 eslint-config-prettier 6.x 后已合并到主配置，但为了兼容可以保留）。

VSCode settings.json 自动格式化设置

完成依赖安装和配置文件后，需要配置 VSCode 在保存时自动执行格式化。在 VSCode 的 settings.json 中，设置 "editor.formatOnSave": true，并指定默认格式化器为 Prettier："editor.defaultFormatter": "esbenp.prettier-vscode"。同时开启 ESLint 的自动修复："eslint.autoFixOnSave": true（注意此选项在最新版本中可能合并到格式化设置中）。如果希望 ESLint 优先应用，可添加 "eslint.format.enable": true，但需注意与 Prettier 的优先级问题。实际测试中，如果同时启用两者，可能仍会出现冲突；建议只保留 Prettier 作为默认格式化器，让 ESLint 通过 eslint-plugin-prettier 附带的规则在保存时由 ESLint 的 autoFix 处理。也可以选择完全由 ESLint 执行格式化：设置 "editor.defaultFormatter" 为 ESLint 对应的扩展（如 "dbaeumer.vscode-eslint"），但这样会丢失 Prettier 独立的格式化能力，不太推荐。

检查方法和常见坑

在 VSCode 中打开一个包含明显格式错误的文件（如多余空格或缺少分号），按 Ctrl+S 保存。观察文件是否自动修正且无 ESLint 报错。同时查看 VSCode 左下角的“问题”面板，确保没有出现红色波浪线。如果仍有冲突，可以手动运行 npx eslint --fix 文件路径，看是否与保存时效果一致。若不一致，则检查 settings.json 中是否有覆盖默认行为的设置。一个常见误区是同时安装多个格式化插件且未指定默认格式化器，导致每次保存时多个工具依次格式化，产生冲突。解决方案是在项目根目录创建 .prettierrc 和 .eslintrc 文件，明确各自配置。另外，如果使用了 TypeScript 或 React，需额外配置 eslint-plugin-react 等规则，确保 eslint-config-prettier 覆盖所有冲突规则。检查时若发现某些文件格式化后仍有报错，可尝试删除 node_modules 并重新安装。

环境版本差异处理

上述操作在 VSCode 1.80 左右版本中基本有效。如果使用的是更早版本，"eslint.autoFixOnSave" 选项可能仍然存在，但新版本中改为在 settings.json 的 "editor.codeActionsOnSave" 中设置 "source.fixAll.eslint": true。具体需要根据你的 VSCode 和 ESLint 扩展版本来判断。建议在团队项目中锁定各依赖版本，避免升级后配置失效。如果配置生效但仍有间歇性冲突，可以检查 .prettierrc 文件中的规则是否与 ESLint 中通过 eslint-plugin-prettier 传入的规则一致。例如 Prettier 的 "semi": true 对应 ESLint 的 "semi": ["error", "always"]，确保两者没有产生循环格式化。

以上配置完成后，通常可以实现保存时自动格式化且无 ESLint 报错。如果仍然有问题，建议先关闭所有插件，仅保留 Prettier 和 ESLint，逐步排查第三方插件干扰。