Eslint x lint-staged x prettier x husky

這幾個工具的關聯

我一開始也不知道有這麼樣的工具可以尬在一起用，

也是工作夥伴在我們team上推動的，

有一點不太一樣，

工作上沒有用到prettier，formatter只用了eslint（等等後面會說明這個）

先講最終目的，

就是為了要能夠在團隊中維護程式碼的品質，

eslint - 檢查程式碼的格式
prettier - format程式碼
lint-staged - 只針對修改過的程式碼做檢查
husky - 在你要進行push or commit時會觸發檢查的工具(我們是設定在commit階段)

How did it work?

一般在做開發的時候，

完成一個feature後，我們會把程式碼commit後推上去發PR

而這整個流程就可以從commit出發，

下了commit指令 -> 觸法husky -> 執行lint-staged -> lint那些只修改過的files

當然

在一般開發的時候，可以透過一些套件來直接檢查自己程式碼是否有符合你們制定的lint規範

可以透過一些vscode的擴充套件達成

不然在commit階段才做檢查會改得很痛苦

eslint setups

• npm install eslint
• npm init @eslint/config
• 根據所需的eslint規則加入到 .eslintrc的config中，可以直接在config裡面設定，也可以直接去引用別人定義好的lint
• 再把lint的script加入到package.json裡面

prettier setups

正常來說，eslint是不會和prettier一起用的

因為prettier自己有一套format規則

而eslint也有format的功能，因此兩者會有衝突

但是基於prettier的強大的formatter

有人就提供了eslint + prettier的方法

• 額外下載這兩個套件 eslint-plugin-prettier eslint-config-prettier，用途主要是避免eslint與prettier衝突
• .eslintrc中加入 extend: "plugin:prettier/recommended"

當然，還是可以更改.prettierrc的設定的

如果是eslint和prettier都有的設定，比如說: semi

這個情況會是以prettier為優先

husky setups

• npm install husky
• npm pkg set scripts.prepare="husky install"
• npx husky add .husky/pre-commit "npm test" 給husky加一個pre-commit的指令為’npm test’

lint-staged setups

• npm install lint-staged
• 承husky的pre-commit 指令，把pre-commit設定為lint-staged指令
• 設定要lint的files，這有很多方式，可以去lint-staged的npm看

我個人覺得比較簡單的方式就是在package.json中給一個lint-staged物件，
格式會像是這樣

src底下的所有fold的所有files會run 一次lint

  "lint-staged": {
    "src/**/*.{ts,tsx}": "eslint --fix"
  }