eslint 和 prettier 的相同点和区别
ESLint 和 Prettier 都是前端开发中用于代码质量和风格管理的工具，但它们的定位和功能有明显区别，同时也存在一定关联。
一、相同点
- 目标一致：
都是为了提升代码质量、保持团队代码风格一致，减少协作中的格式冲突。 - 可集成性：
都可以与主流编辑器（VS Code、WebStorm 等）和构建工具（Webpack、Vite 等）集成，支持自动检测和修复。 - 配置化：
都允许通过配置文件（如.eslintrc.js、.prettierrc）自定义规则，适应不同项目需求。
二、核心区别
| 维度 | ESLint | Prettier |
|---|---|---|
| 核心功能 | 专注于代码质量检查（语法错误、逻辑问题） | 专注于代码格式美化（排版、缩进、引号等） |
| 检查范围 | 不仅管格式，还管代码逻辑（如未定义变量、不合理的条件判断） | 只负责格式，不关心代码逻辑是否正确 |
| 规则类型 | 包含 “代码质量规则”（如 no-undef 禁止未定义变量）和 “代码风格规则”（如 quotes 强制引号类型） | 只包含 “代码风格规则”（如换行符、缩进空格数） |
| 自动修复能力 | 部分规则支持自动修复（--fix），但复杂逻辑问题需手动修改 | 几乎所有格式问题都能自动修复，修复能力更强 |
| 设计理念 | 强调 “代码正确性”，阻止不良编码实践 | 强调 “格式一致性”，消除人为格式偏好差异 |
三、典型规则对比
ESLint 特有规则（代码质量）
javascript
运行
// 检测未定义的变量（语法错误）
const foo = bar; // ESLint 报错：'bar' is not defined (no-undef)// 检测不合理的逻辑（如恒为 true 的条件）
if (true) { ... } // ESLint 警告：Unexpected constant condition (no-constant-condition)// 检测未使用的变量
const unused = 123; // ESLint 警告：'unused' is assigned a value but never used (no-unused-vars)
Prettier 特有规则（格式美化）
javascript
运行
// 格式化前
const obj={name:"foo",age:20}
function fn(x){return x+1}// Prettier 格式化后（自动补全空格、换行、分号）
const obj = { name: "foo", age: 20 };
function fn(x) {return x + 1;
}
ESLint 和 Prettier 可能重叠的规则（风格类）
例如 “引号类型”“分号” 等规则，ESLint 和 Prettier 都可能涉及：
- ESLint 有
quotes规则（强制单 / 双引号） - Prettier 有
singleQuote配置（功能类似）
此时需通过 eslint-config-prettier 禁用 ESLint 中与 Prettier 冲突的风格规则，避免二者互相干扰。
四、如何配合使用？
在实际项目中，通常同时使用两者，分工协作：
- ESLint：负责代码质量检查（如语法错误、逻辑漏洞）和部分风格规则。
- Prettier：负责统一代码格式（如缩进、换行、引号），优先级高于 ESLint 的风格规则。
集成步骤
安装依赖：
bash
npm install eslint prettier eslint-config-prettier --save-deveslint-config-prettier：禁用 ESLint 中与 Prettier 冲突的风格规则。
配置 ESLint（
.eslintrc.js）：javascript
运行
module.exports = {extends: ["eslint:recommended","prettier" // 放在最后，覆盖冲突规则] };配置脚本（
package.json）：json
{"scripts": {"lint": "eslint .", // 检查代码质量和剩余风格问题"lint:fix": "eslint . --fix", // 自动修复可修复的问题"format": "prettier --write ." // 强制格式化所有文件} }
总结
- ESLint 是 “代码质检员”：关注代码是否正确、合理，阻止错误实践。
- Prettier 是 “代码化妆师”：专注格式统一，让代码看起来更规范，不关心逻辑。
两者结合使用，可同时保证代码的正确性和美观性，是现代前端项目的最佳实践。