前言

当项目在团队上开发时，总要遵循一些规范，就算使用了 tslint 或 eslint 等，但上交代码时由于没有禁止不良代码，有些人在不遵守规范时，还是会提交那么很坑的代码，让我们的项目挂了，这个时候，所以一切的代码在不经过检查，都不能信任，而这一层的把关，我交给 git 的钩子。

原理

当我们使用 git 时，都会有一个.git 的文件夹，而它底下有所有的钩子，在 hooks 目录下，我们可以看到目录下有 commit-msg.sample、pre-commit.sample 等文件，这些都是案例文件，不会执行，要想执行的话把后面的.sample 后缀去掉就可以了。
钩子执行顺序是有先后的

  1. 前置（pre）钩子，在动作完成前调用
  2. 后置（post）钩子，在动作完成后执行

而我们利用这个钩子实现提交前检查代码，不符合的，就停止提交。

安装插件

1
2
3
4
5
npm  install husky lint-staged --D

检查代码使用eslint或tslint
npm  install eslint  --D
npm  install tslint  --D
  1. eslint：进行 JavaScript 代码检查的基础包；
  2. tslint: TypeScript 代码检查的基础包；
  3. husky：在 .git/4 hooks 中写入 pre-commit 等脚本激活钩子，在 Git 操作时触发；
  4. lint-staged：参考 Git 中 staged 暂存区概念，在每次提交时只检查本次提交的文件。

使用

在 package.json 配置 husky 与 lint-staged。

tslint:

1
2
3
4
5
6
7
8
9
10
11
12
"husky": {
    "hooks": {
      "pre-commit": "lint-staged" // pre-commit，提交前的钩子
    }
  },
  "lint-staged": {
    // 此处可以配置文件夹和文件类型的范围
    "src/**/*.{txs,ts}": [
      "tslint", // 再使用tslint
      "git add" // 所有通过的话执行git
    ]
  }

eslint:

1
2
3
4
5
6
7
8
9
10
11
12
"husky": {
    "hooks": {
      "pre-commit": "lint-staged" // pre-commit，提交前的钩子
    }
  },
  "lint-staged": {
    // 此处可以配置文件夹和文件类型的范围
    "src/**/*.{jsx,txs,ts,js,json,css,md}": [
      "eslint --fix", // 再使用eslint进行自动修复
      "git add" // 所有通过的话执行git
    ]
  }

至于 eslint 或 tslint 的配置，这个就需要自己百度。

tslint 例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
  "extends": "tslint",
  "rules": {
    "no-parameter-properties":false, // 禁止给类的构造函数的参数添加修饰符
    "triple-equals":false,
    "no-debugger": true,
    // 禁止行尾有空格
    "no-trailing-whitespace": false,
    "member-ordering":false,
    "no-this-assignment": [true, {"allowed-names": ["^self$","^that$"], "allow-destructuring": true}],
    // 必须使用箭头函数，除非是单独的函数声明或是命名函数
    "only-arrow-functions": [
      false,
      "allow-declarations",
      "allow-named-functions"
    ],
    // 禁止出现空代码块，允许 catch 是空代码块
    "no-empty": [
      false,
      "allow-empty-catch"
    ],
    // 禁止无用的类型断言
    "no-unnecessary-type-assertion": false,
    // 使用 return; 而不是 return undefined;
    "return-undefined": false,
    // 禁止对 array 使用 for in 循环
    "no-for-in-array": false,
    "comment-format": [true, "check-space"] // 单行注释格式化规则
  }
}

eslint 例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  "extends": ["airbnb", "plugin:prettier/recommended"], // eslint扩展规则
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "parser": "babel-eslint",// 解决ES6 improt会报错
  "env": { // eg如果不配置browser，window就会被eslint报undefined的错
    "es6": true,
    "browser": true,
    "node": true
  },
  "plugins": ["react", "jsx-a11y", "import"],
  "rules": {
    "class-methods-use-this": 0,
    "import/no-named-as-default": 0,
    "react/jsx-filename-extension": [
      "error",
      {
        "extensions": [".js", ".jsx"]
      }
    ]
  }
}

当然我们还可以使用 prettier 美化提交的代码。
prettier 配置资料(https://blog.csdn.net/visionke/article/details/92817269)