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

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

相关推荐
天一生水water4 分钟前
three.js加载三维GLB文件,查看三维模型
前端·1024程序员节
无风听海8 分钟前
HarmonyOS之启动应用内的UIAbility组件
前端·华为·harmonyos
冰夏之夜影18 分钟前
【科普】Edge出问题后如何恢复出厂设置
前端·edge
葱头的故事1 小时前
vant van-uploader上传file文件;回显时使用imageId拼接路径
前端·1024程序员节
Mintopia2 小时前
🇨🇳 Next.js 在国内场景下的使用分析与实践指南
前端·后端·全栈
Mintopia2 小时前
深度伪造检测技术在 WebAIGC 场景中的应用现状
前端·javascript·aigc
BUG_Jia2 小时前
如何用 HTML 生成 PC 端软件
前端·javascript·html·桌面应用·1024程序员节
木易 士心2 小时前
CSS 样式用法大全
前端·css·1024程序员节
012925202 小时前
1.1 笔记 html 基础 初认识
前端·笔记·html
2501_929382652 小时前
[Switch大气层]纯净版+特斯拉版 20.5.0大气层1.9.5心悦整合包 固件 工具 插件 前端等资源合集
前端·游戏·switch·1024程序员节·单机游戏