ESLint与Prettier配合可统一代码风格，提升协作效率。1. ESLint检查代码质量，Prettier处理格式化；2. 安装eslint、prettier及相关插件；3. 配置.eslintrc.js，extends中加入'prettier'并启用prettier/prettier规则；4. 创建.prettierrc定义格式规范；5. 编辑器安装ESLint和Prettier插件，开启保存自动格式化；6. 可选配置lint-staged和Husky在提交前自动检查与修复。配置文件需纳入版本控制，确保团队一致。
在团队协作开发中，保持 JavaScript 代码风格统一是提升可读性、减少冲突和提高维护效率的关键。ESLint 和 Prettier 是目前最主流的代码检查与格式化工具组合。合理配置二者协同工作，能有效避免风格争议，让团队专注业务逻辑。
为什么需要 ESLint + Prettier 配合
ESLint 负责代码质量检查（如未使用变量、潜在错误），也可处理部分代码风格问题；Prettier 则专注于代码格式化（缩进、引号、括号等），强制统一输出样式。两者分工明确：ESLint 管“对不对”，Prettier 管“好不好看”。
若不加以整合，可能出现 ESLint 与 Prettier 规则冲突（例如分号、引号风格）。因此需通过 eslint-config-prettier 禁用所有与格式相关的 ESLint 规则，交由 Prettier 统一处理。
基础依赖安装
项目根目录执行以下命令安装必要依赖：
立即学习“Java免费学习笔记（深入）”；
npm install --save-dev eslint prettiernpm install --save-dev eslint-config-prettier eslint-plugin-prettier-
npm install --save-dev @babel/eslint-parser（如使用 Babel）
若使用 React：
npm install --save-dev eslint-plugin-react
ESLint 配置文件（.eslintrc.js）
创建 .eslintrc.js 并写入：
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'prettier', // 必须放在最后，关闭与 Prettier 冲突的 ESLint 规则
],
parser: '@babel/eslint-parser',
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
plugins: ['react', 'prettier'],
rules: {
'prettier/prettier': 'error', // 启用 Prettier 格式检查
'no-unused-vars': 'warn',
'no-console': 'off',
},
settings: {
react: {
version: 'detect',
},
},
};
Prettier 配置文件（.prettierrc）
创建 .prettierrc 定义格式规范：
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"arrowParens": "avoid"
}
支持 JSON、YAML 或 .prettierrc.js 格式。团队应统一选择一种并提交到仓库。
集成到开发环境
确保编辑器自动格式化并提示 ESLint 错误：
- VS Code 安装插件：ESLint、Prettier - Code formatter
- 启用保存自动修复：
"editor.formatOnSave": true - 设置默认格式化工具为 Prettier
这样开发者在保存文件时，Prettier 自动格式化，ESLint 检查语法和规则，即时反馈问题。
配合 Git 提交拦截（可选）
使用 lint-staged 和 Husky 在提交前自动检查与格式化：
npm install --save-dev lint-staged husky- 在
package.json中添加：
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx}": [
"eslint --fix",
"prettier --write",
"git add"
]
}
这样可防止不符合规范的代码被提交，保障仓库代码整洁。
基本上就这些。配置一次，全队受益。关键是把配置文件纳入版本控制，确保所有人使用同一套规则。团队协作不再因空格还是制表符争论。
