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-initnpx: 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): .gitcan'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-initnpx: 2 装置胜利，用时 0.803 秒husky-init updating package.json  "husky install" command already exists in prepare script, skipping. // 这里是因为下面执行过一次npx husky-inithusky - Git hooks installedhusky - 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 specifiednot found: commitlinthusky - commit-msg hook exited with code 127 (error)

commitlint装置记录

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

yarn add @commitlint/{config-conventional,cli} -Decho "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-commitlinthusky - 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 // 要是这里装置报错能够尝试加sudosudo n stable // 装置最新稳定版cj@cjdembp sweet-app % node -vv16.13.0

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

yarn run eslint --init
prettier

装置

yarn add --dev --exact prettierecho {}> .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" }

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