ESLint与Prettier集成配置
ESLint和Prettier的集成是前端开发中最令人头疼的配置之一。两者都涉及代码格式化，规则冲突几乎是必然的。本节深入解析两个核心包的作用，彻底搞清楚它们的关系。
两个易混淆的包
| 包名 | 作用 | 效果 |
|---|---|---|
eslint-plugin-prettier | 将Prettier的规则作为ESLint规则运行 | 增加ESLint规则 |
eslint-config-prettier | 关闭与Prettier冲突的ESLint规则 | 减少ESLint规则 |
理解这两个包的关键：
eslint-plugin-prettier：让ESLint能报告Prettier的格式问题（增加了约束）eslint-config-prettier：关闭ESLint中与Prettier功能重叠的规则（减少了冲突）
安装依赖
npm install --save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier
bash
配置方式
方式一：使用eslint-plugin-prettier（推荐）
// .eslintrc.js
module.exports = {
env: {
node: true, // 告诉ESLint当前环境是Node.js
},
extends: [
'eslint:recommended',
'plugin:prettier/recommended' // 这个扩展已经包含了eslint-config-prettier
],
rules: {
// 不要在这里添加与Prettier冲突的规则
}
};
javascript
plugin:prettier/recommended做了三件事：
- 启用
eslint-plugin-prettier插件 - 继承
eslint-config-prettier配置 - 将
prettier/prettier规则设为error
方式二：仅使用eslint-config-prettier
如果只需要关闭冲突规则，不需要ESLint报告Prettier格式问题：
// .eslintrc.js
module.exports = {
extends: [
'eslint:recommended',
'prettier' // 仅关闭冲突规则，不添加新规则
]
};
javascript
Prettier配置文件
// .prettierrc.json
{
"singleQuote": true,
"semi": true,
"tabWidth": 2,
"printWidth": 100
}
json
VS Code项目配置
在项目根目录创建.vscode/settings.json，确保Prettier为默认格式化工具：
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}
json
关键注意事项
1. 不要在rules中覆盖Prettier规则
// 错误做法
rules: {
'quotes': ['error', 'double'] // 与Prettier的singleQuote冲突
}
// 正确做法：在.prettierrc.json中统一配置
javascript
如果在rules中开启了与Prettier冲突的规则，保存时会出现：ESLint先修复为双引号 → Prettier又格式化为单引号 → 无限循环闪烁。
2. env配置解决全局变量报错
// 报错：'module' is not defined
// 解决：在eslintrc中设置env
env: {
node: true // 识别module、require等Node.js全局变量
}
// 或者使用ESLint注释
/* eslint-env node */
javascript
3. 格式化工具的选择
保存时的处理顺序：ESLint Auto Fix → Prettier格式化
如果想完全交给ESLint处理格式化（不使用Prettier CLI），可以在settings.json中将defaultFormatter改为ESLint：
{
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
}
json
但这种方式格式化效果不如Prettier精细，推荐保持Prettier作为格式化工具。
配置关系总结
plugin:prettier/recommended（推荐方案）
├── eslint-plugin-prettier → 增加规则：让ESLint报告Prettier格式问题
└── eslint-config-prettier → 减少规则：关闭ESLint中与Prettier冲突的规则
单独使用eslint-config-prettier（轻量方案）
└── eslint-config-prettier → 只关闭冲突规则，格式化完全交给Prettier
text
实战案例：如何开启自定义quotes规则
场景：项目要求使用双引号，但使用了plugin:prettier/recommended。
错误做法：直接在rules中加quotes: error → 与Prettier冲突
正确做法：
// 方案1：不用plugin:prettier/recommended，只用config:prettier
extends: ['eslint:recommended', 'prettier'],
plugins: ['prettier'],
rules: {
'quotes': ['error', 'double'],
'prettier/prettier': ['error', { singleQuote: false }]
}
// 方案2：在.prettierrc.json中改配置
{ "singleQuote": false }
javascript
ESLint配置演进（2026最新）
ESLint已经推出了新的Flat Config格式（eslint.config.js），取代了.eslintrc.*文件：
// eslint.config.js（新格式）
import js from '@eslint/js';
import prettier from 'eslint-config-prettier';
export default [
js.configs.recommended,
prettier,
{
rules: {
// 自定义规则
}
}
];
javascript
新格式使用原生ES模块，配置更加扁平化。但传统.eslintrc.js格式仍然被广泛支持，两者可以共存。
↑