husky+eslint+prettier規範你的項目

語言: CN / TW / HK

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的最後一項,以覆蓋其他的規則,避免衝突。 ```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" }

然後嘗試一下,把文件格式搞亂,然後提交一次,發現成功格式化!嘿嘿😁