Prettier 与 ESLint 冲突？手把手教你配置完美共存方案（含常见报错解决）

Prettier 与 ESLint 冲突？手把手教你配置完美共存方案（含常见报错解决）

当你在 VS Code 中同时启用 Prettier 和 ESLint 时，是否遇到过保存文件时两者互相"打架"的情况？比如 Prettier 自动删除了分号，而 ESLint 又立即报错要求补上分号。这种循环冲突在前端开发中相当常见，但解决起来并不复杂。

1. 理解冲突根源：两种工具的设计哲学差异

Prettier 是一个固执己见的代码格式化工具，它的核心目标是消除团队中关于代码风格的争论。它通过一套预设规则自动格式化代码，对风格细节（如缩进、引号、分号等）有明确且不可协商的要求。

ESLint 则是一个高度可配置的静态代码分析工具，它不仅能检查代码风格问题，还能发现潜在的错误和不良实践。ESLint 的规则可以根据项目需求灵活调整。

两者的冲突通常发生在以下场景：

• 分号使用：Prettier 默认添加分号，而某些 ESLint 配置（如 standard 风格）要求省略分号
• 引号类型：Prettier 默认使用双引号，而某些 ESLint 规则强制单引号
• 行尾逗号：Prettier 可以配置为始终添加尾随逗号，而 ESLint 可能有相反要求
• 缩进方式：Prettier 默认使用空格，而 ESLint 可能配置为制表符

// 典型冲突示例：
const foo = { 
  bar: "baz"   // Prettier 会在这行末尾添加逗号
}              // 但 ESLint 可能报错 "Unexpected trailing comma"

2. 基础配置：让 Prettier 和 ESLint 各司其职

2.1 安装必要依赖

首先确保项目中已安装最新版本的相关包：

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

• eslint-config-prettier：关闭所有与 Prettier 冲突的 ESLint 规则
• eslint-plugin-prettier：将 Prettier