What's husky

當(dāng)您提交或推送時(shí)，您可以使用 husky 來(lái)檢查您的提交消息、運(yùn)行測(cè)試、檢查代碼等Husky 支持所有 Git 鉤子[1]。

How it works

以一種非常 Linux 的方式，要配置 Git 掛鉤，您只需將可執(zhí)行文本文件放入.git/hooks/, 為了能夠運(yùn)行用戶在 .huskyrc.js中創(chuàng)建的任何 Git 鉤子，husky 正在將所有可能的鉤子安裝在.git/hooks/.

例如，當(dāng)提交時(shí)，每個(gè) Git 鉤子都會(huì)檢查是否有相應(yīng)的鉤子定義.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
復(fù)制代碼

它的好處：用戶可以添加、更新和刪除鉤子，.huskyrc.js并且會(huì)自動(dòng)選擇更改。

不利的一面是，即使沒有任何東西可以運(yùn)行，節(jié)點(diǎn)也會(huì)啟動(dòng)。

How to use

接下來(lái)我會(huì)使用 eslint prettier husky 來(lái)完成一個(gè)提交代碼時(shí)觸發(fā)自動(dòng)化檢測(cè)代碼的demo

置代碼風(fēng)格

eslint 配置代碼風(fēng)格、質(zhì)量的校驗(yàn)，prettier用于代碼格式的校驗(yàn)，lint-staged 過濾文件

首先明確一下，Lint-staged 僅僅是文件過濾器，不會(huì)幫你格式化任何東西，所以沒有代碼規(guī)則配置文件，需要自己配置一下，如：.eslintrc、.stylelintrc等，然后在package.json中引入。

eslint 和 prettier兩者配合使用，即 使用 prettier 做格式化， eslint 做代碼校驗(yàn)。

第一，ESLint 推出 --fix 參數(shù)前，ESLint 并沒有自動(dòng)格式化代碼的功能，而 Prettier 可以自動(dòng)格式化代碼。

第二，雖然 ESLint 也可以校驗(yàn)代碼格式，但 Prettier 更擅長(zhǎng)。

所以還需要 eslint-config-prettier,eslint-plugin-prettier 加強(qiáng)兩者的配合

eslint-plugin-prettier 是一個(gè) ESLint 插件， 由 Prettier 生態(tài)提供，用于報(bào)告錯(cuò)誤給 ESLint

eslint-config-prettier 的作用是使用 Prettier 默認(rèn)推薦配置，并且關(guān)閉 eslint 自身的格式化功能，防止 Prettier 和 ESLint 的自動(dòng)格式化沖突

安裝所需的NPM包：

npm i eslint prettier lint-staged eslint-plugin-prettier eslint-config-prettier
復(fù)制代碼

常用的配置.prettier.js

module.exports = {
  printWidth: 120, // 換行字符串閾值
  tabWidth: 2, // 設(shè)置工具每一個(gè)水平縮進(jìn)的空格數(shù)
  useTabs: false,
  semi: false, // 句末是否加分號(hào)
  vueIndentScriptAndStyle: true,
  singleQuote: true, // 用單引號(hào)
  trailingComma: 'none', // 最后一個(gè)對(duì)象元素加逗號(hào)
  bracketSpacing: true, // 對(duì)象，數(shù)組加空格
  jsxBracketSameLine: true, // jsx > 是否另起一行
  arrowParens: 'always', // (x) => {} 是否要有小括號(hào)
  requirePragma: false, // 不需要寫文件開頭的 @prettier
  insertPragma: false // 不需要自動(dòng)在文件開頭插入 @prettier
}
復(fù)制代碼

.eslintrc.js建議采用自己的項(xiàng)目配置：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: [
    'prettier',
    'plugin:prettier/recommended'
  ],
  rules: {...yourselfConfig}
}
復(fù)制代碼

自動(dòng)配置 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
復(fù)制代碼

它將設(shè)置 husky，修改package.json并創(chuàng)建一個(gè)pre-commit您可以編輯的示例掛鉤。默認(rèn)情況下，它將npm test在您提交時(shí)運(yùn)行。例如：

image.png

把示例 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"
    ]
  }
復(fù)制代碼

例如：

image.png

在 git commit 的時(shí)候，就會(huì)觸發(fā) .husky/pre-commit 文件下 的命令行 yarn lint-staged或者 您自己定義的命令。

在檢查代碼成功的時(shí)候會(huì)自動(dòng)格式化代碼然后幫您提交，如果檢測(cè)到錯(cuò)誤就會(huì)停止提交并告知錯(cuò)誤行，及時(shí)改正后可以再次提交。

例如：

image.png

當(dāng)我git commit時(shí)，它會(huì)自動(dòng)檢測(cè)到不符合規(guī)范的代碼，如果無(wú)法自主修復(fù) 則會(huì)拋出錯(cuò)誤文件給您！

在此之前，配置好 eslint 和 prettier 是有必要的~