為確保程式碼的格式一致，並且 typescript 的型別都有好好定義跟參照，打算加上 husky 在提交時用 prettier, eslint 跟 tsc 做檢查。

目前的專案模板預設就裝好 prettier，可以在根目錄的 .prettierrc 修改格式選項，

// .prettierrc
{
  "singleQuote": true,
}

如果想單獨修改某個 app 的設定的話在該 app 的根目錄添加 .prettierrc 就能覆寫 monorepo 的預設設定。

模板也有預設好 eslint 設置，並且 app 的模板也有預設的檢查指令。

// apps/ironman-nextjs/project.json
{
	// ...
  "targets": {
    "lint": {
      "executor": "@nx/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": ["apps/ironman-nextjs/**/*.{ts,tsx,js,jsx}"]
      }
    },
  },
}

用指令來檢查格式。

pnpm exec nx lint ironman-nextjs

嘗試自動修正格式錯誤。

pnpm exec nx lint ironman-nextjs --fix

再來是 typescript 檢查，不過這裡就沒有預設的能用了，要自訂指令。

// apps/ironman-nextjs/project.json
{
	// ...
  "targets": {
    "typecheck": {
      "executor": "nx:run-commands", // 讓 nx 執行指定指令
      "options": {
        "commands": ["tsc -p tsconfig.json --noEmit"],
        "cwd": "apps/ironman-nextjs",// 指定 tsc 執行的目錄位置，也就是目前 app 的位置
        "forwardAllArgs": false
      }
    }
  },
}

這樣就能用指令做 ts 檢查。

pnpm exec nx typecheck ironman-nextjs

如果有多個 app 要檢查，每個 app 的 project.json 都要確保有上面自訂的指令，然後就能用 nx 指令一併檢查。

pnpm exec nx affected --target=typecheck

最後加上 husky 在提交前做格式跟型別檢查，首先裝套件。

pnpm add -D husky lint-staged

初始化 husky

pnpm exec husky install

因為這個指令生成的 husky 腳本是不進 git 的，為了確保共同開發的人都能用 husky 檢查教內容，將這個指令設定到 prepare 中，確保在 pnpm install 後也會做 husky 的初始化。

// package.json
{
	//...
  "scripts": {
    "prepare": "husky install"
  },
	//...
}

再來用指令建立 pre-commit 的指令，這是每當提交程式碼時就會執行做檢查的腳本。

npx husky add .husky/pre-commit "npx lint-staged --concurrent false --relative"

因為 monorepo 架構的關係，要檢查的程式碼散落在各個專案中，所以要特別設定 lint-staged 的檢查範圍跟對應的檢查指令。

// lint-staged.config.js
module.exports = {
  '{apps,libs,tools}/**/*.{ts,tsx}': files => {
    return `nx affected --target=typecheck --files=${files.join(',')}`;
  },
  '{apps,libs,tools}/**/*.{js,ts,jsx,tsx,json}': [
    files => `nx affected:lint --files=${files.join(',')}`,
    files => `nx format:write --files=${files.join(',')}`,
  ],
};

其中 typecheck 只針對 typescript 類型的文件做檢查。

設定好之後每當提交程式碼的時候就會做全面檢查了。

參考來源

Linting, Formatting, and Type Checking Commits in an Nx Monorepo with Husky and lint-staged