ESLint负责代码质量检查，Prettier专注格式化，通过eslint-config-prettier避免规则冲突；2. 安装相关依赖并配置.eslintrc.js和.prettierrc文件；3. 在VS Code中启用保存时自动格式化；4. 结合husky与lint-staged在提交前校验并修复代码，确保规范执行。
在现代前端开发中，保持代码的一致性和可维护性是团队协作的关键。ESLint 和 Prettier 是两个广泛使用的工具：ESLint 负责检测代码中的潜在问题和风格违规，Prettier 则专注于代码格式化。将它们配合使用，可以在保证代码质量的同时统一代码风格。
1. 工具分工明确
为了高效协作，需要明确 ESLint 与 Prettier 的职责边界：
- ESLint：检查语法错误、潜在 bug、代码逻辑问题以及部分代码风格（如变量命名、禁止未使用变量等）
- Prettier：统一格式化代码结构，包括缩进、引号、括号、换行、分号等视觉层面的样式
若两者在格式规则上冲突，会导致格式混乱或报错。因此，推荐使用 eslint-config-prettier 插件来关闭 ESLint 中与 Prettier 冲突的规则。
2. 安装与配置
在项目中集成 ESLint 与 Prettier 的基本步骤如下：
- 安装依赖：
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
module.exports = {
extends: [
'eslint:recommended',
'plugin:prettier/recommended' // 启用 Prettier 推荐配置并自动修复
],
parserOptions: {
ecmaVersion: 2021,
sourceType: 'module'
},
env: {
browser: true,
es2021: true
}
};
- 添加 .prettierrc 文件定义格式规则：
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2
}
- 添加 .prettierignore 忽略不需要格式化的文件：
node_modules dist *.min.js
3. 编辑器集成
为了让开发者在编写代码时自动应用规则，建议在编辑器中配置保存时自动格式化。
以 VS Code 为例：
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
这样保存文件时会优先通过 ESLint 自动修复可修复的问题，并由 Prettier 统一格式化。
4. 与 Git 集成确保提交质量
防止不符合规范的代码进入仓库，可通过 husky + lint-staged 在提交前校验：
- 安装：
npm install --save-dev husky lint-staged
- 启用 husky 并设置钩子：
npx husky init
- 配置 package.json：
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write"
]
}
- 修改 .husky/pre-commit：
#!/bin/sh npx lint-staged
这样每次 git commit 时都会对暂存文件执行 ESLint 修复和 Prettier 格式化，不通过则阻止提交。
基本上就这些。合理配置 ESLint 与 Prettier，能显著提升团队开发效率和代码一致性，减少代码评审中的风格争议。关键是明确分工、统一配置、自动化执行。不复杂但容易忽略细节。
