使用 ESLint + Prettier + Husky

​​通过 ESLint 检查代码质量和风格，Prettier 统一代码格式，Husky + lint-staged 在 Git 提交前自动运行检查和格式化，从而保证团队代码风格一致，减少低级错误，提升代码质量和协作效率。​​

工具	作用	解释
​​ESLint​​	✅ ​​代码质量与风格检查​​	检测 JavaScript / TypeScript 代码中的潜在错误、不规范写法，比如未使用的变量、错误的导入、不符合规则的命名等
​​Prettier​​	✅ ​​代码自动格式化工具​​	自动格式化代码，统一缩进、引号、换行、空格等，不关心代码对错，只关心“长得好不好看”
​​Husky​​	✅ ​​Git Hooks 工具​​	让你在 Git 提交（commit）、推送（push）等操作前，自动运行脚本（比如代码检查、格式化）
​​lint-staged​​（常与 Husky 配合使用）	✅ ​​只检查暂存区的文件​​	只对 Git 暂存区（即将提交的代码）运行 ESLint / Prettier，提升效率，不检查全部项目文件

---

✅ 配置步骤（完整流程，适合实际项目落地）

---

✅ 第一步：初始化项目（如未初始化）

npm init -y
# 或者 yarn / pnpm

---

✅ 第二步：安装 ESLint（代码检查）

npm install eslint --save-dev
npx eslint --init

运行 npx eslint --init后，会有一系列选项，按需选择，比如：

• 你要检查什么语言？→ JavaScript / TypeScript

• 使用什么框架？→ React / Vue（按需）

• 使用什么风格指南？→ Airbnb / Standard / 自定义

• 是否使用 TypeScript？→ Yes

• 使用什么模块系统？→ ES Modules

• 配置文件格式？→ JavaScript / JSON / YAML（推荐 JavaScript）

这会生成一个 .eslintrc.js（或其它格式）配置文件。

---

✅ 第三步：安装 Prettier（代码格式化）

npm install prettier --save-dev

创建 Prettier 配置文件：

在项目根目录创建 .prettierrc.js或 .prettierrc.json，举个例子：

// .prettierrc.js
module.exports = {semi: true,singleQuote: true,tabWidth: 2,trailingComma: 'es5',printWidth: 100,endOfLine: 'lf',
};

（可选）创建忽略文件：

.prettierignore（和 .gitignore类似）：

node_modules
dist
build

---

✅ 第四步：解决 ESLint 与 Prettier 的冲突（关键！）

ESLint 和 Prettier 默认可能会对一些格式问题（比如引号、缩进）产生冲突。

解决方案：安装兼容插件

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

然后在 .eslintrc.js中引入：

module.exports = {extends: [// 你的原有配置，比如：'eslint:recommended','plugin:react/recommended','plugin:@typescript-eslint/recommended',// 加上下面这两行，解决冲突并启用 Prettier 检查'plugin:prettier/recommended', // 必须放在最后！],plugins: ['prettier'],rules: {'prettier/prettier': 'error', // 让 ESLint 把 Prettier 的格式问题当做 Error 抛出},
};

✅ ​​关键：plugin:prettier/recommended要放在 extends 数组最后！​​

---

✅ 第五步：安装 Husky + lint-staged（Git 提交前自动检查）

1. 安装 Husky（Git Hooks 工具）

npm install husky --save-dev
npx husky install

通常你还需要在 package.json的 scripts 中加上：

"scripts": {"prepare": "husky install"
}

👉 这样在 npm install后会自动初始化 Husky。

2. 启用 Git Hooks，比如 pre-commit

npx husky add .husky/pre-commit "npx lint-staged"

这会在 .husky/pre-commit文件中生成一个钩子脚本，执行 lint-staged。

3. 安装 lint-staged（只检查暂存区文件）

npm install lint-staged --save-dev

4. 在 package.json 中配置 lint-staged

"lint-staged": {"*.{js,jsx,ts,tsx,json,css,scss,md}": ["prettier --write",     // 先格式化"eslint --fix",         // 再自动修复 ESLint 错误"git add"               // 把修复后的文件重新加入暂存区]
}

✅ 这样你在 git commit时，Husky 会触发 lint-staged，只检查你本次提交修改的文件，并自动格式化 + 修复。

---

✅ 第六步：验证配置是否生效

1. 修改一个 JS / TS 文件，故意写错（比如缺少分号、引号不统一）

2. 执行 git add .，然后 git commit -m "test"

3. 你应该会看到：

   • Prettier 自动格式化代码

   • ESLint 自动修复部分问题

   • 如果有无法自动修复的错误，提交会被阻止，并提示你修复

---

✅ 四、总结配置清单（一键回顾）

步骤	工具	作用	关键命令/文件
1	​​ESLint​​	检查代码质量与规范	npx eslint --init，配置 .eslintrc.js
2	​​Prettier​​	格式化代码风格	.prettierrc.js，配置格式规则
3	​​ESLint + Prettier 兼容​​	避免冲突，让 ESLint 管 Prettier 规则	eslint-config-prettier, eslint-plugin-prettier
4	​​Husky​​	Git 提交前自动执行脚本	npx husky install，npx husky add .husky/pre-commit
5	​​lint-staged​​	只检查 Git 暂存区的文件	配置 "lint-staged"在 package.json
6	​​自动格式化 + 修复​​	提交前自动格式化代码并修复部分问题	prettier --write+ eslint --fix

---

✅ 五、Bonus：你还可以做这些（进阶配置）

功能	说明
✅ ​​VSCode 自动格式化​​	安装 ESLint、Prettier 插件，设置保存时自动格式化
✅ ​​提交信息规范（Commitlint）​​	用 @commitlint/config-conventional约束 git commit message 格式，如 feat: 添加登录功能
✅ ​​Push 前检查（pre-push）​​	也可以通过 Husky 添加 pre-push钩子，运行测试或构建
✅ ​​团队共享配置​​	可以抽离 ESLint/Prettier 配置为 npm 包，供多个项目共用