乐趣区

关于husky:huskyeslintprettier规范你的项目

jiezi

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"}

而后尝试一下，把文件格式搞乱，而后提交一次，发现胜利格式化！嘿嘿😁

退出移动版