前端基於 husky 通過 eslint 檢測提交代碼
作者:Morakes
https://juejin.cn/post/7137158040565841951
What's husky
當您提交或推送時,您可以使用 husky 來檢查您的提交消息、運行測試、檢查代碼等 Husky 支持所有 Git 鉤子(https://git-scm.com/docs/githooks)。
How it works
以一種非常 Linux 的方式,要配置 Git 掛鉤,您只需將可執行文本文件放入.git/hooks/
, 爲了能夠運行用戶在 .huskyrc.js
中創建的任何 Git 鉤子,husky 正在將所有可能的鉤子安裝在.git/hooks/
.
例如,當提交時,每個 Git 鉤子都會檢查是否有相應的鉤子定義.huskyrc.js
:
$ git commit
pre-commit (native) → husky/runner.js (node)
→ is a pre-commit defined in `.huskyrc.js`? → YES, run it
prepare-commit-msg (native) → husky/runner.js (node)
→ is a prepare-commit-msg defined in `.huskyrc.js`? → NO, do nothing
commit-msg (native) → husky/runner.js (node)
→ is a commit-msg defined in `.huskyrc.js`? → NO, do nothing
post-commit (native) → husky/runner.js (node)
→ is a post-commit defined in `.huskyrc.js`? → NO, do nothing
它的好處:用戶可以添加、更新和刪除鉤子,.huskyrc.js
並且會自動選擇更改。
不利的一面是,即使沒有任何東西可以運行,節點也會啓動。
How to use
接下來我會使用 eslint
prettier
husky
來完成一個提交代碼時觸發自動化檢測代碼的 demo
置代碼風格
eslint
配置代碼風格、質量的校驗,prettier
用於代碼格式的校驗,lint-staged
過濾文件
首先明確一下,Lint-staged 僅僅是文件過濾器,不會幫你格式化任何東西,所以沒有代碼規則配置文件,需要自己配置一下,如:.eslintrc
、.stylelintrc
等,然後在package.json
中引入。
eslint 和 prettier 兩者配合使用,即 使用 prettier 做格式化, eslint 做代碼校驗。
第一,ESLint 推出 --fix 參數前,ESLint 並沒有自動格式化代碼的功能,而 Prettier 可以自動格式化代碼。
第二,雖然 ESLint 也可以校驗代碼格式,但 Prettier 更擅長。
所以還需要 eslint-config-prettier
,eslint-plugin-prettier
加強兩者的配合
eslint-plugin-prettier
是一個 ESLint 插件, 由 Prettier 生態提供,用於報告錯誤給 ESLint
eslint-config-prettier
的作用是使用 Prettier 默認推薦配置,並且關閉 eslint 自身的格式化功能,防止 Prettier 和 ESLint 的自動格式化衝突
安裝所需的 NPM 包
npm i eslint prettier lint-staged eslint-plugin-prettier eslint-config-prettier
常用的配置.prettier.js
module.exports = {
printWidth: 120, // 換行字符串閾值
tabWidth: 2, // 設置工具每一個水平縮進的空格數
useTabs: false,
semi: false, // 句末是否加分號
vueIndentScriptAndStyle: true,
singleQuote: true, // 用單引號
trailingComma: 'none', // 最後一個對象元素加逗號
bracketSpacing: true, // 對象,數組加空格
jsxBracketSameLine: true, // jsx > 是否另起一行
arrowParens: 'always', // (x) => {} 是否要有小括號
requirePragma: false, // 不需要寫文件開頭的 @prettier
insertPragma: false // 不需要自動在文件開頭插入 @prettier
}
.eslintrc.js
建議採用自己的項目配置
module.exports = {
root: true,
env: {
browser: true,
node: true,
es6: true
},
extends: [
'prettier',
'plugin:prettier/recommended'
],
rules: {...yourselfConfig}
}
自動配置 husky
yarn add husky --dev # must install
npx husky-init install # npm
npx husky-init # Yarn 1
yarn dlx husky-init # Yarn 2+
pnpm dlx husky-init # pnpm
它將設置 husky,修改package.json
並創建一個pre-commit
您可以編輯的示例掛鉤。默認情況下,它將npm test
在您提交時運行。例如:
把示例 npm test 修改成 yarn lint-staged
或者 您自己定義的命令
在 package.json
中添加 lint-staged 命令
"lint-staged": "lint-staged --allow-empty",
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
"lint-staged": {
"**/*.{js,jsx,ts,tsx}": "yarn run lint-staged:js",
"**/*.{js,jsx,tsx,ts,less,md,json}": [
"prettier --write"
]
},
例如
在 git commit 的時候,就會觸發 .husky/pre-commit
文件下 的命令行 yarn lint-staged 或者 您自己定義的命令
在檢查代碼成功的時候會自動格式化代碼然後幫您提交,如果檢測到錯誤就會停止提交併告知錯誤行,及時改正後可以再次提交
例如
當我git commit
時,它會自動檢測到不符合規範的代碼,如果無法自主修復 則會拋出錯誤文件給您!
在此之前,配置好 eslint 和 prettier 是有必要的~
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/Q_0vt4YoKRe5_Gl-u1jEHg