husky+eslint+prettier规范你的项目
source link: https://segmentfault.com/a/1190000040983911
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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: 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/[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
的最后一项,以覆盖其他的规则,避免冲突。
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" }
然后尝试一下,把文件格式搞乱,然后提交一次,发现成功格式化!嘿嘿😁
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK