ESLint 与 Prettier 结合可统一代码风格并提升质量。1. ESLint 检测代码问题，通过 .eslintrc.js 配置环境、规则、插件等；2. Prettier 负责格式化，通过 .prettierrc 定义缩进、引号、分号等样式；3. 使用 eslint-config-prettier 禁用冲突规则，eslint-plugin-prettier 将 Prettier 作为 ESLint 规则；4. 集成到编辑器（如 VS Code）实现保存自动修复；5. 配置 npm 脚本进行 lint 和 format；6. 结合 Husky + lint-staged 在提交前自动校验，确保代码规范落地。
在现代前端开发中，保持代码的一致性和可读性至关重要。ESLint 和 Prettier 是两个广泛使用的工具：ESLint 用于检测代码中的潜在问题并 enforce 编码规范，Prettier 则专注于代码格式化。将两者结合使用，可以实现既严格又统一的代码风格。
ESLint 配置详解
ESLint 能帮助开发者发现代码中的错误、不规范写法和潜在 bug。一个典型的 ESLint 配置文件（.eslintrc.js）通常包括以下几个部分：
- env：指定代码运行环境，如浏览器、Node.js 等，以便识别全局变量
- extends：继承已有的规则集，比如推荐配置或第三方规范（如 airbnb、standard）
- plugins：引入额外的插件，如 react、vue、import 等
- rules：自定义具体规则的开启/关闭及严重程度（"error"、"warn"、"off"）
- parserOptions：指定语法解析选项，如支持 ES2022、JSX、TypeScript 等
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended'
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
},
plugins: ['react'],
rules: {
'no-console': 'warn',
'eqeqeq': ['error', 'always'],
'semi': ['error', 'never']
},
settings: {
react: {
version: 'detect'
}
}
};
Prettier 基础配置
Prettier 是一个“开箱即用”的代码格式化工具，它会强制统一代码样式，减少团队间的格式争议。其核心配置通过 .prettierrc 文件定义。
- semi：是否在语句末尾加分号
- singleQuote：是否使用单引号代替双引号
- tabWidth：缩进空格数
- useTabs：是否使用制表符而非空格
- printWidth：每行最大长度，超过则换行
- trailingComma：对象或多参数末尾是否保留逗号
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"printWidth": 80,
"trailingComma": "es5"
}
ESLint 与 Prettier 协同工作
直接同时启用 ESLint 和 Prettier 可能导致规则冲突（例如分号、引号）。为避免此类问题，建议使用 eslint-config-prettier 和 eslint-plugin-prettier 进行整合。
One-click installation of GitHub projects
下载
GInstall OneClick — 一键安装 GitHub 项目：规划、克隆、安装 Node 依赖、运行开发脚本。适用于想要获取 GitHubNode.js 项目的用户。
- eslint-config-prettier：关闭所有与 Prettier 冲突的 ESLint 规则
- eslint-plugin-prettier：将 Prettier 作为 ESLint 规则运行，格式错误会在 ESLint 中提示
npm install --save-dev eslint-config-prettier eslint-plugin-prettier prettier更新 .eslintrc.js：
extends: [
'eslint:recommended',
'plugin:react/recommended',
'prettier' // 关闭冲突规则
],
plugins: ['react', 'prettier'],
rules: {
'prettier/prettier': 'error' // 启用 Prettier 格式检查
}
这样，ESLint 不仅检查代码质量，还会报告格式问题，统一通过编辑器或命令行修复。
集成到开发环境
为了让规范真正落地，应将 ESLint 和 Prettier 集成到编辑器和项目流程中。
- 在 VS Code 中安装 ESLint 和 Prettier 插件，保存时自动格式化
- 配置 .vscode/settings.json 实现保存时自动修复
- 添加 npm 脚本进行批量检查与修复
"scripts": {
"lint": "eslint src/**/*.js",
"lint:fix": "eslint src/**/*.js --fix",
"format": "prettier --write src/**/*.{js,jsx,json}"
}
结合 Git Hooks（如 Husky + lint-staged），可在提交代码前自动校验和格式化，防止不符合规范的代码进入仓库。
基本上就这些。合理配置 ESLint 与 Prettier，不仅能提升代码质量，还能增强团队协作效率。关键是统一标准，并让工具自动执行，减少人为干预。不复杂但容易忽略。
