Husky + Commitlint + ESLint：打造前端项目的铁三角护城河

✨ 背景

在多人协作的项目中，代码风格不统一、提交信息杂乱无章是灾难的根源。为了避免这种 "野蛮开发" ，我们可以借助三大工具：

Husky：拦截 Git 提交/推送等操作。
Commitlint：规范 Git commit message。
ESLint：保障代码风格和质量。

这三者搭配，像给代码流程上了一把锁------优雅又无情。

📦 安装依赖

首先确保你的项目已经初始化 git 和 package.json：

csharp 复制代码

bash
复制编辑
git init
npm init -y

然后安装核心依赖：

scss 复制代码

bash
复制编辑
# husky 安装
npm install husky --save-dev

# commitlint 相关
npm install @commitlint/{cli,config-conventional} --save-dev

# eslint
npm install eslint --save-dev

🔧 配置步骤

1. 初始化 Husky

复制代码

bash
复制编辑
npx husky install

在 package.json 中添加：

json 复制代码

json
复制编辑
{
  "scripts": {
    "prepare": "husky install"
  }
}

mac 系统需要加

json 复制代码

{
 "scripts": {
   "prepare": "husky install && chmod +x .husky/*",
 }
}

然后添加一个钩子（比如 commit-msg）：

bash 复制代码

bash
复制编辑
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

此时目录结构大致如下：

sql 复制代码

sql
复制编辑
.husky/
  └─ commit-msg

2. 配置 Commitlint

根目录新增 commitlint.config.js：

ini 复制代码

js
复制编辑
module.exports = {
  extends: ['@commitlint/config-conventional'],
};

你可以使用 Angular 提交规范，支持如下格式：

vbnet 复制代码

text
复制编辑
feat: 新增了登录功能
fix: 修复了表单校验
docs: 更新了README

常见类型包括：

feat: 新功能
fix: 修复 bug
docs: 文档变更
style: 不影响代码运行的变动
refactor: 代码重构
test: 添加测试
chore: 构建流程或工具变更

3. 初始化 ESLint

csharp 复制代码

bash
复制编辑
npx eslint --init

按需选择配置风格（如 Airbnb、Standard 或自己定义）。例如你选择的是 Standard：

arduino 复制代码

bash
复制编辑
npm install eslint-config-standard eslint-plugin-import eslint-plugin-n --save-dev

编辑 .eslintrc.js：

yaml 复制代码

js
复制编辑
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['standard'],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {
    // 自定义规则
    'no-console': 'warn',
    semi: ['error', 'always'],
  },
};

⛓️ 再加一层锁：pre-commit 钩子结合 ESLint

我们让 Husky 在 git commit 前自动执行 ESLint 校验：

sql 复制代码

bash
复制编辑
npx husky add .husky/pre-commit "npx eslint ."

也可以搭配 lint-staged 实现只检查变更的文件：

css 复制代码

bash
复制编辑
npm install lint-staged --save-dev

然后在 package.json 添加配置：

json 复制代码

json
复制编辑
"lint-staged": {
  "*.{js,ts,vue}": "eslint --fix"
}

再修改 .husky/pre-commit：

sql 复制代码

bash
复制编辑
npx husky add .husky/pre-commit "npx lint-staged"

✅ 提交流程演示

一旦你试图提交一个不规范的提交信息或不合规范的代码，就会被拦截。

csharp 复制代码

bash
复制编辑
git add .
git commit -m "add: 我想随便写点啥"
# ❌ 被 commitlint 拦截

git commit -m "feat: 添加用户登录接口"
# ✅ 通过 commitlint 检查

# 如果代码不规范也会被 eslint 拦截

🌱 后记

如果你的项目越来越大，不妨考虑再集成：

Prettier：统一格式
Stylelint：样式风格约束
Commitizen + cz-customizable：更优雅地生成 commit message

让流程自动化，把精力留给真正重要的逻辑与创意。