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'
[email protected] 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'
[email protected] 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: http://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/[email protected]: 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的最后一项，以覆盖其他的规则，避免冲突。
```diff
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钩子的行为
diff
- npm test // 这是初始化husky的时候设置的，还记得吗
+ npx lint-staged
最后把这个加入package.json中
"lint-staged": { "**/*": "prettier --write --ignore-unknown" }
然后尝试一下，把文件格式搞乱，然后提交一次，发现成功格式化！嘿嘿😁