gitcommit前自动执行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 之前，能有效减少后期修复的成本，也能让团队代码风格更统一。配置起来并不复杂，但收益却很明显——代码质量的门槛一下就提高了。