使用自動化工具管理你的代碼

使用自動化工具管理你的代碼

使用 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 的配置。