EditorConfig、Prettier、ESLint 配置优先级冲突怎么统一？

Question

仓乃文 · Accepted Answer

EditorConfig、Prettier、ESLint 三个工具都能管代码格式，配置冲突时互相打架。必须明确各自职责和优先级。

三者的职责划分：
```
| 工具         | 职责                    | 管什么                  |
|-------------|------------------------|------------------------|
| EditorConfig | 编辑器基础格式           | 缩进、换行符、字符集      |
| Prettier     | 代码格式化              | 行宽、引号、分号、逗号     |
| ESLint       | 代码质量+格式检查        | 未使用变量、最佳实践      |

原则：格式问题统一由 Prettier 决定，ESLint 只管代码质量
```

配置统一方案：
```ini
# .editorconfig
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
```

```json
// .prettierrc
{ "singleQuote": true, "semi": true, "tabWidth": 2, "endOfLine": "lf" }
```

```javascript
// .eslintrc.js
module.exports = {
  extends: ["eslint:recommended", "prettier"],  // prettier 放最后
  rules: {
    "no-unused-vars": "warn",
    // 不要写格式规则！交给 Prettier
  },
};
```

优先级规则：
```
格式化时：Prettier 优先级最高
ESLint 的格式规则被 eslint-config-prettier 关闭
EditorConfig 和 Prettier 的配置必须一致
```

补充说明：
- 规则：Prettier 管格式，ESLint 管质量，EditorConfig 管编辑器
- 三者的缩进、换行符配置必须一致
- eslint-config-prettier 是解决冲突的关键
- 不要在 ESLint 中手动配置格式规则
- 团队统一配置文件，提交到仓库