利用 Git 钩子在代码提交前检查

每个人的编码习惯都是不一样的,那如何在团队工作中保证所有人,按照一套统一的规范来编码呢?

首先,使用 ESLint 来统一代码规范。ESLint是能在编译中发现代码错误的工具,在团队协作中,可以避免低级 Bug 或错误警告之类的,产出风格统一的代码。

为了保证每个人提交的代码都是规范的,则需要使用 Git 钩子来做最后一道关卡。

Git钩子详解

Git 钩子就是 Git 在特定的重要动作发生时触发自定义脚本。

Git 钩子分为客户端和服务端。此时只看客户端钩子。

客户端钩子有两种:

  • pre 前置钩子,在动作开始前调用
  • post 后置钩子,在动作执行后调用

当钩子在非零状态下退出,git 操作就会停止。

因为要做的是在代码提交前做规范性的检查,所以 使用了 pre-commit 钩子。
在钩子函数里写入指令 执行 eslint 检查代码,执行到钩子函数时,会先执行指令。eslint检查代码规范,则下一步。不规范则非零退出,停止git操作。

安装插件

npm install eslint  husky lint-staged --save-dev
  • eslint 代码规范检查工具。可以在 .eslintrc.js 文件自行配置规则。

  • husky 在 .git/hooks 中写入 pre-commit 等脚本激活钩子,在 Git 操作时触发;

  • lint-staged 参考 Git 中 staged 暂存区概念,在每次提交时只检查本次提交的文件。(为了不检查所有文件,提高性能)

修改 package.json 文件

  "scripts": {
    ...
    "lint-staged": "lint-staged",
    ...
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged"
    }
  },
  "lint-staged": {
    "**/*.less": "stylelint --syntax less",
    "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
    "**/*.{js,jsx,tsx,ts,less,md,json}": [
      "prettier --write"
    ]
  },

执行流程

每次执行 commit 前 会先去执行 npm run lint-staged

npm run lint-staged 会去匹配配置好的文件,执行对应的检查机制。

stylelint 检查所有的 less 文件

js,jsx,ts,tsx 按照 eslint 检查,不符合的 会提示 按照 .prettierrc.js 的配置优化。

总结

至此,团队开发中代码风格获得了统一,减少了开发bug,避免了了不必要的问题。

原文地址:https://www.cnblogs.com/xguoz/p/13971065.html