前言

为了公司内部更规范的提交代码，我们采用lint-staged，husky，commitlint来规范我们的代码提交以及提交的commit message
为节约大家时间，请先安装开发依赖
```
npm install husky @commitlint/cli @commitlint/config-conventional eslint lint-staged prettier -D

```

1. Commitlint

commitlint时为了规范开发人员只有在编写了符合规范的commit message后才能够进行代码commit

1.2 安装Commitlint

```
npm install @commitlint/cli @commitlint/config-conventional --save-dev
```

`@commitlint/config-conventional`: 传统的commitlint配置（基于Angular提交配置发展而来）

1.3 配置Commitlint

安装好commitlint后就可以在根目录创建commitlint.config.js(或者是.commitlintrc.js)文件进行配置

```commitlint.config.js
module.exports= {
extends: ['@commitlint/config-conventional']
}

```
或者是可以根据config-conventional中的内容自定义你的commitlint.config.js

2. Husky

Husky是一个典型的git hook工具，可以使用husky来挂载一些git hook，当我们在commit和push之前，由husky来执行git hook的一些自定义的操作，例如eslint检查等，如果不通过则不可以commit和push。git hook是存在于.git/hooks目录下，husky挂载git hook需要在该目录的路径下寻找对应的hook

下文中我们只使用以下hook

pre-commit：该钩子在键入提交信息前运行。它用于检查即将提交的快照。如果该钩子以非零值退出，Git 将放弃此次提交，你可以利用该钩子，来检查代码风格是否一致。

commit-msg：该钩子在提交信息被提交之前触发，允许你检查提交信息规范，修改提交信息等

2.1 安装Husky

```
npm install husky -D
```

2.2 配置Husky

安装好Husky后还需要对Husky进行配置，而不同版本的Husky配置是不一样的，请查看Husky不同版本下的配置

2.2.1 初始化Husky(这里选用新版本的husky测试)

```js
// package.json
"scripts": {
"prepare":"husky init"
}

// 运行 npm run prepare
```
完成后会在根目录下创建一个.husky目录，该目录下会有一个 _ 目录，和一个用于测试的pre-commit文件

不过husky在8.x.x和9.x.x中初始化的方式也有所区别，8.x.x可以使用husky install，但在9.x.x中，这个方法被废弃，因此需要使用husky init进行初始化，详细请参考https://medium.com/@abpeter14/how-to-install-commitlint-husky-2024-f1157f14006f

添加commit-msg hook

commit-msg文件的作用是在git commit时对commit-msg做校验

可以手动创建文件后在文件中编辑命令，不过建议使用命令的方式创建commit-msg，因为 husky add已经被废弃因此请使用以下方式创建

```js
echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg
```

添加pre-commit hook

pre-commit文件的作用是在在`git commit` 前需要执行的操作

我们在文件中配置：

```js
npm run lint-staged
```

2. Lint-staged

最后我们配置一下lint-staged
Lint-staged 可以在 git staged 阶段的文件上执行 Linters，简单说就是当我们运行 ESlint 或 Stylelint 命令时，可以通过设置指定只检查我们通过 git add 添加到暂存区的文件，可以避免我们每次检查都把整个项目的代码都检查一遍，从而提高效率。
其次，Lint-staged 允许指定不同类型后缀文件执行不同指令的操作，并且可以按步骤再额外执行一些其它 shell 指令

2.1 安装Lint-staged

```js
npm run lint-staged -D
```

2.2 配置Lint-staged

安装好Lint-staged后，我们需要再package.json文件下，去配置Lint-staged需要检查的文件以及检查的命令，这里需要预先安装好prettier以及eslint

```json
"scripts": {
"lint-staged": "lint-staged"
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write"
],
"*.json": [
"prettier --write"
],
"*.{scss,less,html}": [
"stylelint --fix",
"prettier --write"
],
"*.md": [
"prettier --write"
]
```
当我们执行 git commit 时，就会触发 husky 的 pre-commit 钩子，调用 lint-staged 命令。而 lint-staged 包含了对*.{js,jsx,ts,tsx}，_.{htm,html,css,sss,less,scss,sass}类型文件的操作。

参考文献

前端工程化之commitlint+husky+lint-staged（作者的husky应该是8.x.x版本的，如果使用9.x.x版本的的husky只会有一点点不一样，在git hook中只用写命令就好了，不需要写调用指令的那一部分了）

代码提交规范