影片直播app原始碼，在開發時配置 lint 風格檢查與修正

在開發影片直播app原始碼時引入工具輔助，可以強制性地實現編碼書寫和提交過程中的 lint 校驗。下面以當前流行的 Git Hook 方案舉例供參考。

一、開發編輯器及 lint 工具配置

我們在影片直播app原始碼中配置 TSLint 外掛以校驗 typeScript；配置 styleLint 外掛以校驗 CSS/LESS。

我們約定團隊開發均採用 vscode 編輯器，並至少安裝以下外掛輔助開發：

TSLint

stylelint

Document This

EditorConfig for VS Code

Prettier - Code formatter

Debugger for Chrome

二、新增 .editorconfig 檔案

由於不同開發者可能使用的編輯器不同，但各種編輯器基本都支援 .editorconfig， 故每個專案都應當包含 .editorconfig，用來統一配置編輯器的換行、縮排儲存格式。

配置參考：

```dart
# 
root = true
[*]
indent_style = space                    # 輸入的 tab 都用空格代替
indent_size = 2                         # 一個 tab 用 2 個空格代替
# end_of_line = lf                      # 換行符使用 unix 的換行符 \n
charset = utf-8                         # 字元編碼 utf-8
trim_trailing_whitespace = true         # 去掉每行末尾的空格
insert_final_newline = true             # 每個檔案末尾都加一個空行
[*.md]
trim_trailing_whitespace = false        # .md 檔案不去掉每行末尾的空格
```

三、配置 Git Hook 強制執行編碼風格檢測與修正

藉助 Git Hook，可以在提交影片直播app原始碼時執行風格檢測與修正，當存在無法透過的內容時，提交會被 block，從而實現編碼規範的強制性執行。

可以利用以下幾個工具來實現這個流程：

husky 它會安裝一系列 git hook 到專案的 .git/hook 目錄中，這些鉤子可以檢測 package.json 中的 scripts 指令碼命令配置，並在程式碼提交時執行它（我們這裡利用 pre-commit 鉤子）

lint-staged 可以取得所有被提交的檔案並依次執行配置好的任務命令

styleLint/TSLint/ESlint 各種 lint 校驗工具，可以配置到 lint-staged 的任務中

prettier 配置到 lint-staged 的任務中，可以實現修正可自動格式化的影片直播app原始碼風格

package.json 中的相關配置資訊參考：

```dart
{
  "scripts": {
    "precommit": "lint-staged",
  },
  "lint-staged": {
    "*.ts": [
      "tslint --fix",
      "prettier --parser typescript --single-quote --print-width 120 --write",
      "git add"
    ],
    "*.less": [
      "stylelint --fix",
      "prettier --parser less --print-width 120 --write",
      "git add"
    ]
  },
  "devDependencies": {
    "husky": "^0.14.3",
    "prettier": "^1.13.5",
    "prettier-stylelint": "^0.4.2",
    "stylelint-config-standard": "^18.2.0",
    "stylelint": "^9.4.0",
    "stylelint-config-prettier": "^4.0.0"
  }
}
```

.prettierrc 配置檔案參考：

```dart
{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 120,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ]
}
```

.stylelintrc 配置配置參考：

```dart
{
  "extends": [
    "stylelint-config-prettier",
    "stylelint-config-standard",
    "./node_modules/prettier-stylelint/config.js"
  ],
  "rules": {
    // 定義一些適合團隊約定的規則
  }
}
```

透過以上配置，當程式碼提交時，會在 pre-commit 階段執行 .git/hook/precommit 鉤子，該鉤子會查詢並執行 scrpits 中的 precommit 命令，於是 lint-staged 定義的任務會被逐個執行。這套方案也是當前比較流行的做法，在很多影片直播app原始碼開發時有所應用。