husky+eslint+prettier规范你的项目

husky安装记录

husky-init

根据官网步骤来，使用官网推荐的方式为项目加入husky

npx husky-init && npm install # npm 
npx husky-init && yarn # Yarn 1 
yarn dlx husky-init --yarn2 && yarn # Yarn 2

因为我的yarn版本是1.22.10，所以这里我使用的是npx husky-init && yarn
执行npx husky-init的时候报了如下错误：

cj@cjdembp sweet-app % npx husky-init
npx: 2 安装成功，用时 5.859 秒
husky-init updating package.json
  setting prepare script to command "husky install"
fatal: Not a git repository (or any of the parent directories): .git
can't create hook, .husky directory doesn't exist (try running husky install)

很明显，这个错误是因为我还没把我的项目初始化为一个git仓库😂
下面执行git init，之后再执行npx husky-init && yarn大功告成！

cj@cjdembp sweet-app % npx husky-init
npx: 2 安装成功，用时 0.803 秒
husky-init updating package.json
  "husky install" command already exists in prepare script, skipping. // 这里是因为上面执行过一次npx husky-init
husky - Git hooks installed
husky - created .husky/pre-commit

增加commit-msg钩子

然后增加一个husky的钩子-commit-msg

cj@cjdembp sweet-app % npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
husky - created .husky/commit-msg

测试一下

如果执行了npm test命令的话，就说明钩子执行了

cj@cjdembp sweet-app % git add .
cj@cjdembp sweet-app % git commit -m 'feat: init && husky' 

> sweet-app@0.0.0 test /Users/cj/dev/sweet-app
> echo 'Error: no test specified'

Error: no test specified
not found: commitlint
husky - commit-msg hook exited with code 127 (error)

commitlint安装记录

依然是根据文档先来走一遍～

yarn add @commitlint/{config-conventional,cli} -D
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

试一下提交git add . && git commit -m 'test'

cj@cjdembp sweet-app % git commit -m 'test'

> sweet-app@0.0.0 test /Users/chenjing/dev/sweet-app
> echo 'Error: no test specified'

Error: no test specified // 这个报错是因为pre-commit钩子执行了npm test而我的package.json里边并没有这个命令，暂时忽略
⧗   input: test
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky - commit-msg hook exited with code 1 (error)

非常好，不规范的commit被拦截了！
再试一下正确的提交

cj@cjdembp sweet-app % git commit -m 'feat: commitlint'

成功了，嘿嘿😁

eslint+prettier

eslint

先安装eslint

yarn add eslint --dev

喔😯，插播一条报错：

error @eslint/eslintrc@1.0.4: The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.17.0 || >=16.0.0". Got "14.15.1"
error Found incompatible module.

我的node版本不符合要求，此时我的node版本是14.15.1，升级一下

sudo npm install -g n // 要是这里安装报错可以尝试加sudo
sudo n stable // 安装最新稳定版
cj@cjdembp sweet-app % node -v

v16.13.0

嘿嘿，好了。
然后继续未完的事业（yarn add eslint --dev）
安装一路畅通！
接下来初始化一下配置

yarn run eslint --init

prettier

安装

yarn add --dev --exact prettier
echo {}> .prettierrc.json

下一步，编辑器的配套配置
添加vscode插件Prettier - Code formatter.

因为我们有用eslint，所以为了他们能更好地配合工作，下面还要安装eslint-config-prettier

yarn add -D eslint-config-prettier

然后需要把prettier放入eslint配置文件中。并且一定要放在extends的最后一项，以覆盖其他的规则，避免冲突。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
+        "prettier"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 13,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
};

与git hooks集成

yarn add --dev husky lint-staged

然后修改.husky/pre-commit钩子的行为

- npm test // 这是初始化husky的时候设置的，还记得吗
+ npx lint-staged

最后把这个加入package.json中

"lint-staged": { "**/*": "prettier --write --ignore-unknown" }

然后尝试一下，把文件格式搞乱，然后提交一次，发现成功格式化！嘿嘿😁