使用自动化工具管理你的代码

使用自动化工具管理你的代码

使用 Husky 让 git hook 变得更容易

Git Hook，又称为 git 的钩子，利用 git hook，咱们一般能够在 git push，git commit 等 git 命令以前进行一些额外的操做，以免开发人员作一些无用的提交。好比，在 git commit 以前格式化代码，检查 lint；又或者，在 git push 以前跑测试等等。
使用 husky 能够很是方便得进行 git hook 的配置。
好比，在一个 angular 的项目中，咱们进行了以下配置：

"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "npm run test:once"
    }
  }

在 git commit 以前，运行 lint-staged 命令。
在 git push 以前，运行测试。

使用 lint-staged 仅对 git 暂存区中的文件进行操做

咱们在每次 git commit 以前，都对代码中的某些文件进行了修改，咱们可能配置了一些脚本用于规范咱们的代码，好比跑 lint 的脚本用于语法检查，或者跑 prettier 的脚本用于代码格式化。
因为咱们每次都只是修改了部分文件，因此没有必要对整个代码仓库的文件都进行检查。此时，使用 lint-staged 就很是方便了，它只会对 git stage 中的文件进行操做。
在上节中，咱们已经在 husky 中配置了 commit 以前运行 lint-staged 命令，那么相应的 lint-staged 的配置能够以下：

"lint-staged": {
    "*.{js,ts,scss,html,json}": [
      "prettier --write",
      "git add"
    ]
  }

运行 lint-staged，会对 stage 中的文件作 prettier 的代码格式化，并将修改的文件再次加入 stage。

使用 TSLint 或者 ESLint 作语法检查

接下来咱们会基于 TSLint 作讨论。

使用 Prettier 进行代码格式化

一般，咱们但愿无论有多少人工做在同一个代码仓库中，咱们写的代码都有统一的格式和规范，prettier 就是这样一个工具，能够帮助咱们作代码格式化。
perttier 不但支持 ts 文件，也支持对 css、HTML 等文件进行代码格式化，同时，对三大前端框架的特定的代码结构都提供了支持，例如 React 中的 styled-components。
因此，咱们可使用 lint 作语法检查，把格式化的工做都交给 prettier。
当 tslint 和 prettier 一块儿使用的时候，可能会有格式化的冲突。咱们可使用 tslint-config-prettier 禁止 tslint 中与 prettier 冲突的规则。也可使用 tslint-plugin-prettier 插件让 tslint 用 prettier 作代码格式检查。
因此咱们在 tslint.json 中的配置多是这样的：

{
  "extends": ["tslint-plugin-prettier", "tslint-config-prettier"],
  "rules": {
    "prettier": true
  }
}

上面的配置须要先安装开发依赖包 tslint-plugin-prettier 和 tslint-config-prettier。

实践：在 Angular 项目中的配置 Husky，lint-staged，prettier

首先安装依赖：npm install husky lint-staged prettier tslint-plugin-prettier --save-dev
在 package.json 中，配置 husky 和 lint-staged：

"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "npm run test:once"
    }
  },
  "lint-staged": {
    "src/**/!(*.spec).ts": [
      "tslint --project tsconfig.app.json --fix",
      "prettier --write",
      "git add"
    ],
    "src/**/*.spec.ts": [
      "tslint --project tsconfig.spec.json --fix",
      "prettier --write",
      "git add"
    ],
    "e2e/**/*.ts": [
      "tslint --project e2e/tsconfig.json --fix",
      "prettier --write",
      "git add"
    ],
    "*.{js,scss,html,json}": [
      "prettier --write",
      "git add"
    ]
  }

• 这里须要本身单独去配置 test:once 的脚本。
• 这里单独跑了 prettier, 而没有使用 tslint-plugin-prettier 插件，由于若是用 tslint 跑 prettier 没法使用直接修复的命令。
• 这里作了三种 ts 文件的配置，是由于 tslint 作 type check 时须要相关的 tsconfig 文件，且使用 --project 配置 tsconfig 文件时只能配置一个。所以这里分别配置了功能代码、测试代码、e2e 代码三种文件的配置。

在 tslint.json 的 extends 中加上 tslint-plugin-prettier，最后的配置多是：

"extends": ["tslint:recommended", "tslint-plugin-prettier"],

你可能还须要配置 .prettierignore 文件用于配置不须要 prettier 的文件，和 .prettierrc 文件用于配置 prettier 的配置。