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

✨ 背景

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

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

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


📦 安装依赖

首先确保你的项目已经初始化 gitpackage.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

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

相关推荐
木易 士心1 小时前
Ref 和 Reactive 响应式原理剖析与代码实现
前端·javascript·vue.js
程序员博博1 小时前
概率与决策 - 模拟程序让你在选择中取胜
前端
被巨款砸中1 小时前
一篇文章讲清Prompt、Agent、MCP、Function Calling
前端·vue.js·人工智能·web
sophie旭1 小时前
一道面试题,开始性能优化之旅(1)-- beforeFetch
前端·性能优化
Cache技术分享1 小时前
204. Java 异常 - Error 类:表示 Java 虚拟机中的严重错误
前端·后端
uhakadotcom1 小时前
execjs有哪些常用的api,如何逆向分析网站的加签机制
前端·javascript·面试
ObjectX前端实验室1 小时前
【图形编辑器架构】:无限画布标尺与网格系统实现解析
前端·canvas·图形学
你的电影很有趣2 小时前
lesson71:Node.js与npm基础全攻略:2025年最新特性与实战指南
前端·npm·node.js
闲蛋小超人笑嘻嘻2 小时前
find数组方法详解||Vue3 + uni-app + Wot Design(wd-picker)使用自定义插槽内容写一个下拉选择器
前端·javascript·uni-app
小牛itbull2 小时前
初始化electron项目运行后报错 electron uninstall 解决方法
前端·javascript·electron