前端规范(四)之husky+lint-staged+commitizen+commitlint

**相关章节**

前端规范(一)之ESlint以及@antfu/eslint-config
前端规范(二)之Prettier
前端规范(三)之stylelint
前端规范(四)之husky+lint-staged+commitizen+commitlint

---

一、有什么用？

提效

如果按照之前的章节所论述的那样，为了适用ESlint、Prettier、Stylelint我们需要执行下面的很多的命令,然而我们可以在husky的pre-commit钩子中自动帮我们执行下面的命令，也就是说我们只管提交代码

npm run lint:eslint
npm run lint:prettier
npm run lint:stylelint

规格开发

自动触发命令，可以有效避免漏执行命令的出现，让我们的开发更为的规范，同时适用commitlint让我们的git commit的内容更为规范

---

二、各司其职

husky

husky会触发一些钩子，我们可以在这些钩子里做文章，如commit前执行代码规范检查的命令，如果检查不通过那么不执行对应的提交操作
husky官网

---

lint-staged

想象以下，如果每一次提交都对所有的代码都执行代码规范的命令，那么效率肯定没那么高，然后就是这么个神器，可以仅仅处理暂存区的文件，比如您之前commit过的文件，已经不在暂存区了，那么就不会再对这个文件进行对应的处理；此外还可以更为具体，比如*.js文件执行A命令，*.vue执行B命令；
lint-staged官网

---

commitizen

commitizen是一个命令行交互工具，用来帮助我们书写正确的Message格式；
commitizen官网

---

commitlint

commitlint用来commit -m “内容” 对内容做校验，让我们提交的内容，让每个团队成员一目了然；
commitlint官网

---

二、使用步骤

1.安装

代码如下（示例）：

npm i -D husky lint-staged commitizen @commitlint/config-conventional @commitlint/cli

---

2. 初始化

初始化之前，请确保你的项目被git所管理

git init

2.1 husky初始化

初始化后你的跟目录会出现一个.husky的文件夹

npx husky install

---

2.2维护lint-staged脚本

在package.json中维护如下内容

  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
      "prettier --write--parser json"
    ],
    "package.json": [
      "prettier --write"
    ],
    "*.vue": [
      "eslint --fix",
      "prettier --write",
      "stylelint --fix"
    ],
    "*.{scss,less,styl,html}": [
      "stylelint --fix",
      "prettier --write"
    ],
    "*.md": [
      "prettier --write"
    ]
  }

此时你可以手动执行如下命令就可以检测暂存区的规范了

npx lint-staged

如下图所示，就是说明我的HelloWorld.vue存在为空的样式

---

2.3 commitizen初始化

安装解适配器,cz-conventional-changelog是一个commitizen的适配器，适配器的作用是按照某个指定的规范帮助我们生成commit message，cz-conventional-changelog预设的是Angular团队的规范。

npx commitizen init cz-conventional-changelog --save-dev --save-exact

安装完成后，会在package.json自动添加如下内容,下面的path就是适配器的路径

 "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }

此后执行npx cz，就相当于执行git commit，不过npx cz会以命令行的方式让我们填写commit的信息，如下图所示，以交互的形式

---

2.4 commitlint初始化

根目录下创建commitlint.config.js

module.exports = {
  ignores: [commit => commit.includes('init')],
  extends: ['@commitlint/config-conventional'],
  rules: {
    'body-leading-blank': [2, 'always'],
    'footer-leading-blank': [1, 'always'],
    'header-max-length': [2, 'always', 108],
    'subject-empty': [2, 'never'],
    'type-empty': [2, 'never'],
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'perf',
        'style',
        'docs',
        'test',
        'refactor',
        'build',
        'ci',
        'chore',
        'revert',
        'wip',
        'workflow',
        'types',
        'release'
      ]
    ]
  }
};

---

3.添加钩子到husky

上面我们做好所有工具的初始化工作，都能单独的完成它们自己的功能，现在我们需要添加钩子到husky，让他们关联起来；

3.1添加pre-commit钩子(commit之前触发)

npx husky add .husky/pre-commit

执行上面的命令后会自动在.husky中增加pre-commit文件，然后我们将npx lint-staged增加到这个文件里面去,这样我们在commit之前就会执行npx lint-staged命令，这样husky和lint-staged就关联起来了

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged

---

3.2 添加commit-msg钩子

npx husky add .husky/commit-msg  

执行上面的命令后会自动在.husky中增加commit-msg文件，然后我们将npx --no-install commitlint --edit "$1"增加到这个文件里面去

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no-install commitlint --edit "$1"

此时如果我们还像之前那样随意填写内容的话，则会报如下错误

值得注意的是pre-commit在commit-msg之前，如果pre-commit里面执行的npx lint-staged命令检测不通过的话，那么就不会进到commit-msg的钩子了