文章重點

• 如何進一步優化 VSCode 的自動格式化設置
• 進一步的設置eslint和git hook

本文

在前面的文章中，我們初步設置了代碼檢查（linting）和代碼格式化（formatting）。今天，我們將進一步完善這些設置。

首先，我們將對 VSCode 進行一些設置，以改進其在文件保存時的自動格式化功能。打開 VSCode 的設置（或者編輯 settings.json 文件），我們加入以下設置:

{
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": true,
		"source.organizeImports": true
	}
}

這樣，每次保存文件時，VSCode 將自動運行 Prettier 和 ESLint，並且會自動整理 import 語句。有關 VSCode 設置的更多信息，您可以參考官方文檔。

接著，我們將對我們的 Next.js 專案進行 ESLint 設置。首先，打開 apps\iron-ecommerce-next\project.json 文件，我們能看到在該project下的設置接著我們找到lint部分:

// ...
    "test": {
      "executor": "@nx/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
      "options": {
        "jestConfig": "apps/iron-ecommerce-next/jest.config.ts",
        "passWithNoTests": true
      },
      "configurations": {
        "ci": {
          "ci": true,
          "codeCoverage": true
        }
      }
    },
    "lint": {
      "executor": "@nx/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": ["apps/iron-ecommerce-next/**/*.{ts,tsx,js,jsx}"]
      }
    }
  },
  "tags": []
}

我們在lint增加fix、cache參數來加快以及修正部分format錯誤 (Link)

	"lint": {
		"executor": "@nx/linter:eslint",
		"outputs": ["{options.outputFile}"],
		"options": {
			"lintFilePatterns": ["apps/iron-ecommerce-next/**/*.{ts,tsx,js,jsx}"],
			"fix": true,
			"cache": true,
			"cacheLocation": "node_modules/.cache/eslint"
		}
	}

在ESLint中，cache的功用能讓我們僅對修改過的文件進行 lint 操作，而忽略那些自上次 lint 操作後未變更的文件

我們在options加入三個參數:fix, cache, cacheLocation。

• fix: 修正 linting 錯誤（可能會覆蓋 linting 檔案）
• cache: 只檢查更改的檔案
• cacheLocation: cache檔案或目錄的路徑

接下來，我們使用husky來新增我們的git hook，完善我們專案的流程。

我們執行指令:

npx husky add .husky/post-merge "pnpm install"

這樣，每次進行git merge操作後，Husky 會自動執行pnpm install以確保所有的依賴都是最新的。

總結

通過今天的設置，我們的開發環境變得更加規範化。接下來，明天我們將進一步設置debugger環境，讓我們的開發工作更加完善。