ESLint 和 Prettier 格式冲突怎么解决？

Question

仓乃文 · Accepted Answer

ESLint 和 Prettier 同时使用时，格式规则经常冲突：ESLint 要求单引号，Prettier 格式化成双引号；保存文件时两个工具来回拉扯，代码永远有红色波浪线。

冲突原因：
```
ESLint 有两类规则：
1. 代码质量规则：no-unused-vars, no-console（必须保留）
2. 格式规则：quotes, semi, indent（和 Prettier 冲突的部分）

Prettier 只管格式，不管代码质量。
两者在格式规则上各执一词，就冲突了。
```

解决方案：
```bash
# 1. 安装兼容包
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
# eslint-config-prettier：关闭 ESLint 中和 Prettier 冲突的规则
# eslint-plugin-prettier：让 ESLint 用 Prettier 的格式规则

# 2. 配置 .eslintrc.js
module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",  // 必须放最后！覆盖前面的格式规则
  ],
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error",
  },
};

# 3. 配置 .prettierrc
{
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2
}
```

VS Code 配置：
```json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}
```

保存时的执行顺序：
```
1. ESLint 修复代码质量问题（source.fixAll.eslint）
2. Prettier 格式化代码（editor.defaultFormatter）
这样不会冲突，因为 eslint-config-prettier 已经关闭了 ESLint 的格式规则。
```

常见问题：
```bash
# 问题 1：配置了还是冲突
# 原因：prettier 没有放在 extends 最后
# 修复：确保 "prettier" 是 extends 数组的最后一项

# 问题 2：Delete cr (prettier/prettier)
# 原因：换行符冲突（Windows CRLF vs Linux LF）
# 修复：.prettierrc 中添加 "endOfLine": "lf"

# 问题 3：团队格式不统一
# 修复：用 lint-staged 在提交时统一格式化
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{css,scss,json,md}": ["prettier --write"]
  }
}
```

补充说明：
- 规则：ESLint 管代码质量，Prettier 管代码格式，职责分明
- eslint-config-prettier 必须放在 extends 最后，否则不生效
- 团队统一 .prettierrc 和 .eslintrc.js，提交到仓库
- lint-staged 是最终保障，不管编辑器怎么配，提交时统一格式
- 不要在 ESLint 中手动配置格式规则，全部交给 Prettier