What’s husky

当您提交或推送时,您能够运用 husky 来查看您的提交消息运转测验、查看代码等Husky 支撑一切 Git 钩子。

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在您提交时运转。 例如:

前端根据husky经过eslint检测提交代码

把示例 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"
    ]
  },

例如

前端根据husky经过eslint检测提交代码

在 git commit 的时候,就会触发 .husky/pre-commit 文件下 的指令行 yarn lint-staged或许 您自己界说的指令

在查看代码成功的时候会主动格局化代码然后帮您提交,假如检测到过错就会中止提交并告知过错行,及时改正后能够再次提交

例如

前端根据husky经过eslint检测提交代码

当我git commit时,它会主动检测到不符合标准的代码,假如无法自主修复 则会抛出过错文件给您!

在此之前,装备好 eslint 和 prettier 是有必要的~

假如您有疑问,能够给我评论,我会共享我所得的