Git提交前自动lint检查：husky+lint-staged配置详解

在软件开发流程中，代码风格检查（Code Linting）是保障代码质量与一致性的关键环节。传统做法通常将 Lint 安排于 Code Review 或 CI 阶段执行，导致问题发现滞后、反馈链条偏长、修改成本较高。更理想的方式是在开发者提交代码之前完成自动检查，现场解决问题，避免问题流入后续流程。借助 Git 的 Pre Commit 钩子，配合几款轻量工具，即可轻松实现这一目标。

简介

先快速认识三个核心工具：

• prettier：专门统一代码格式，如缩进、空格、分号等细节，不涉及逻辑判断。
• husky：管理 Git Hook 的工具，此处用于绑定 pre-commit 钩子，在 commit 执行前触发自定义操作。
• lint-staged：对 Git 暂存区中的文件执行代码检查，可配合 ESLint 或 Prettier 使用。

整体流程如下：

• 开发者完成代码，执行 git add 将文件添加到暂存区
• 随后执行 git commit
• husky 捕获 pre-commit 事件，自动调用 lint-staged
• lint-staged 获取所有被提交的文件，依次执行预设任务（例如 ESLint 检查、Prettier 格式化）
• 若检查不通过（如 ESLint 报错），任务中断并打印错误信息，本次 commit 被拒绝
• 若全部通过，commit 成功，代码顺利入库

安装

通过 npm 或 yarn 将两个工具安装到项目的 devDependencies 中：

npm install husky lint-staged --sa ve-dev

或

yarn add husky lint-staged --dev

配置package.json（无prettier）

若项目暂时不需要 Prettier，仅做 ESLint 检查，可在 package.json 中追加以下配置：

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open",
    ...
    "eslint": "eslint --ext .js,.vue src",
    "eslintfix": "eslint --fix --ext .js,.vue src",
    "lint-staged": "lint-staged"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged"
    }
  },
  "lint-staged": {
    "**/*.{js,vue}": [
      "npm run eslint"
    ]
  },

注意：此处未加入 prettier，仅对 .js 和 .vue 文件执行 ESLint 检查。

配置package.json（有prettier）

若计划同时使用 Prettier 自动格式化代码并配合 ESLint 检查，可参考以下配置（适用于 Vue 项目的常见组合）：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue}": [
      "prettier --write",
      "vue-cli-service lint",
      "git add"
    ]
  }
}

各步骤作用说明：

• prettier --write：按 Prettier 规则自动美化代码格式，并覆盖原文件。
• vue-cli-service lint：Vue 项目的语法检查工具，相当于封装了 ESLint。
• git add：将格式化后的文件重新添加到暂存区，确保 commit 中的代码为最新格式。

若使用其他技术栈，只需替换对应的检查命令即可。

.prettierrc文件

新建 .prettierrc 文件，放入以下规则即可定义代码风格：

{
  "trailingComma": "es5", // 尾随逗号
  "tabWidth": 2,         // 缩进宽度
  "semi": false,         // 不要句尾分号
  "singleQuote": true,   // 使用单引号
  "end-of-line": "lf"    // 换行符统一为 LF
}

完成上述配置后，执行 git commit 时，Lint 程序将自动检查本次提交涉及的文件。若代码不符合规范，commit 会被直接拒绝并给出错误提示。如需跳过检查，可在提交时加上 --no-verify 参数：git commit -no-verify。

总结

通过 husky + lint-staged 的组合，将代码检查提前至 commit 之前，可有效降低后期修复成本，并促进团队代码风格统一。配置简单，收益显著——代码质量门槛因此大幅提升。