husky + lint-staged 使用备忘

CSDN 中文章不一定能及时更新，欢迎点击前往我的博客查看最新版本：许盛的博客

不管是开发什么类型的项目，前端、后端、组件库、工具包等等，只要是用 ts 写，都得配一配各种 hook 来做各种校验，记录一下，方便以后直接抄。

一般在代码提交前，使用 eslint、 prettier 、 stylelint 等等各种工具，对当前的代码仓库进行一次格式化，然后在提交时，校验一下 commit message 是否符合 conventional commit 的规范。

主要使用以下几个工具：

• commitlint
• husky
• lint-staged

commitlint

使用 commitlint 来校验提交时 commit message 是否符合 conventional commit 规范。

安装依赖

yarn add -D @commitlint/cli @commitlint/config-conventional

添加配置文件

在根目录下添加 commitlint.config.js 文件：

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

husky

husky 用来便捷地触发各种 hook，简简单单。

安装依赖

yarn add -D husky

配置命令

在 package.json 的 scripts 中加入：

{
	"scripts": {
		"prepare": "husky install"
	}
}

prepare 会在 install 之后和 prepublishOnly 之前触发。

第一次可以手动触发一下 npm run prepare 。

添加 hook

使用老版本的 husky 时，可以在 pacaage.json 中加入相关的 hook 配置，但是新版不行了。

# git commit 之前触发 lint-staged，具体的 lint-staged 配置在 package.json 中
npx husky add .husky/pre-commit "npx lint-staged"

# git commit 时触发 commitlint 检查 commit message
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

上面这个 $1 有坑，加不进去，需要自己去文件里改改

lint-staged

安装依赖

yarn add -D lint-staged

添加配置

在 pacakge.json 中加入如下内容：

{
  "lint-staged": {
    "packages/**/*.{js,jsx,ts,tsx}": [
      "eslint --fix --quiet"
    ]
  }
}

这样在 git commit 之前，就会调用 eslint 将所有有改动的文件都格式化一遍。

还可以根据自己的需要触发 prettier， stylelint 等格式化工具。