Husky 的报错及简易配置

Posted 2022-04-26 GoldenaArcher

Husky 的报错及简易配置

因为最近有一个需要协同合作的小项目，但是每个人的编辑器配置好像都不太一样，以至于在 code review 的时候发现关于空格、tab 之类的差异，所以就像使用 husky 去配置同步一下。这样也避免之后需要进行 code review 的时候将时间花费在无谓的 formatter 上。

Husky 是一个 GitHub pre-commit hook，会在每一次 git commit 触发后自动运行。目前的项目是使用 CRA 创建的一个 TypeScript 项目，因此不需要配置 TypeScript 和 ESLint 的相关配置，只需要下载 prettier 进行 format 即可。

下载 prettier 和 husky 的指令如下：

> npm install husky prettier --save-dev

目前 huksy 和 prettier 使用的版本是：

  "devDependencies": 
    "husky": "^7.0.4",
    "prettier": "^2.6.2"
  

这里主要使用的 prettier 配置只有一个，也就是 singleQuote: true 这一条，其他的就使用 prettier 默认的配置了。

配置 husky 的时候倒是遇到了一些报错，根据官方文档操作并没有成功，可能跟自己的 OS 有关吧……微软确实不是非常适合开发。

以下提供本机上成功运行的代码：

> npx husky install
> # 这里官方文档使用的是：
> # npx husky add .husky/pre-commit "npm test"
> # 但是我遇上的报错信息如下：
> # Usage:
> #   husky install [dir] (default: .husky)
> #   husky uninstall
> #   husky set|add <file> [cmd]
> # 不知道是不是和 ps 有关，还是和系统有关，最后只能采取相对路径的方法运行成功
> #
> # husky 运行的时候必须要在 .git 的目录下，否则会运行失败
> # 下面添加的部分就是在 git commit 执行后运行一下：
> #     使用 eslint 检查一下语法问题
> #     以及使用 prettier 进行 format
> #     --noEmit 的 flag 是让 tsc 不输出转译后的文件，
> #        不过这里转移的文件被 CRA 放置在另一个地方了，问题也不大
> .\\node_modules\\.bin\\husky add .husky/pre-commit "npx tsc --noEmit && npx eslint --fix . && npx prettier --write ."
husky - created .husky/pre-commit

最后运行结果：

demo-proj> git commit -m "Keep calm and commit"

C:\\Users\\XXXX\\React\\demo-proj\\src\\ui\\toolbar\\index.tsx
  8:5  warning  'text' is defined but never used  @typescript-eslint/no-unused-vars

✖ 1 problem (0 errors, 1 warning)

.prettierrc.json 54ms
package-lock.json 257ms
package.json 30ms
public\\index.html 63ms
public\\manifest.json 4ms
README.md 51ms
src\\App.tsx 522ms
src\\components\\dashboard\\index.tsx 25ms
src\\components\\login\\_login.scss 59ms
src\\components\\login\\index.tsx 17ms
src\\components\\pwdReset\\index.tsx 12ms
src\\index.tsx 15ms
src\\react-app-env.d.ts 11ms
src\\routes\\route.tsx 20ms
src\\setupTests.ts 7ms
src\\stores\\actions\\auth.action.ts 23ms
src\\stores\\index.ts 19ms
src\\stores\\reducers\\auth.reducer.ts 20ms
src\\stores\\reducers\\index.ts 11ms
src\\styles\\_variables.scss 20ms
src\\styles\\index.scss 9ms
src\\ui\\header\\_header.scss 4ms
src\\ui\\header\\index.tsx 9ms
src\\ui\\toolbar\\_toolbar.scss 6ms
src\\ui\\toolbar\\index.tsx 15ms
src\\utils\\auth.util.ts 4ms
tsconfig.json 8ms
[config fc15d76] Keep calm and commit
 4 files changed, 20 insertions(+)
 create mode 100644 .husky/pre-commit

husky 检查出了 ESLint 的报错信息，并且也对原本的代码进行了 reformat，这也就是 4 files changed, 20 insertions(+) 的来历。