ESLint

ESLint 是一個靜態分析工具，用於快速尋找並修正 JavaScript 程式碼中的問題。

在本指南中，我們將涵蓋

• 使用扁平組態的 ESLint v9
• 使用舊版組態的 ESLint v8
• 如何設定 lint 任務（適用於兩個版本）

我們將在 monorepo 的工作區之間共用組態，確保組態在各個套件中保持一致，並可組合以維持高快取命中率。

ESLint v9 (扁平組態)

使用 ESLint v9 的扁平組態，我們最終會得到如下的檔案結構

此結構包含

• 一個名為 @repo/eslint-config 的套件，位於 ./packages/eslint-config 中，其中包含所有 ESLint 組態
• 兩個應用程式，每個應用程式都有自己的 eslint.config.js
• 一個 ui 套件，它也有自己的 eslint.config.js

關於組態套件

@repo/eslint-config 套件有三個組態檔：base.js、next.js 和 react-internal.js。它們是從 package.json 匯出，以便其他套件可以根據需求使用它們。組態範例可以在 Turborepo GitHub 儲存庫中找到，並且在 npx create-turbo@latest 中可用。

值得注意的是，next.js 和 react-internal.js 組態使用 base.js 組態以保持一致性，並針對各自的需求擴充了更多組態。此外，請注意 eslint-config 的 package.json 具有儲存庫的所有 ESLint 相依性。這很有用，因為這表示我們不需要在匯入 @repo/eslint-config 的套件中重新指定相依性。

使用組態套件

在我們的 web 應用程式中，我們首先需要新增 @repo/eslint-config 作為相依性。

{
  "devDependencies": {
    "@repo/eslint-config": "*"
  }
}

然後我們可以像這樣匯入組態

import { nextJsConfig } from '@repo/eslint-config/next-js';
 
/** @type {import("eslint").Linter.Config} */
export default nextJsConfig;

此外，您可以像這樣新增特定於套件的組態

import { nextJsConfig } from '@repo/eslint-config/next-js';
 
/** @type {import("eslint").Linter.Config} */
export default [
  ...nextJsConfig,
  // Other configurations
];

ESLint v8 (舊版)

使用來自 ESLint v8 及更低版本的舊版組態，我們最終會得到如下的檔案結構

有一個名為 @repo/eslint-config 的套件，以及兩個應用程式，每個應用程式都有自己的 .eslintrc.js。

@repo/eslint-config 套件

@repo/eslint-config 檔案包含兩個檔案：next.js 和 library.js。這些是兩種不同的 ESLint 組態，我們可以根據需求在不同的套件中使用。

Next.js 的組態可能如下所示

/* Custom ESLint configuration for use with Next.js apps. */
module.exports = {
  extends: [
    'eslint-config-turbo',
    'eslint-config-next',
    // ...your other ESLint configurations
  ].map(require.resolve),
  // ...your other configuration
};

package.json 如下所示

{
  "name": "@repo/eslint-config",
  "version": "0.0.0",
  "private": true,
  "devDependencies": {
    "eslint": "^8",
    "eslint-config-turbo": "latest",
    "eslint-config-next": "latest"
  }
}

請注意，ESLint 相依性都列在這裡。這很有用，因為這表示我們不需要在匯入 @repo/eslint-config 的應用程式中重新指定相依性。

如何使用 @repo/eslint-config 套件

在我們的 web 應用程式中，我們首先需要新增 @repo/eslint-config 作為相依性。

{
  "dependencies": {
    "@repo/eslint-config": "*"
  }
}

然後我們可以像這樣匯入組態

module.exports = {
  root: true,
  extends: ['@repo/eslint-config/next.js'],
};

透過將 @repo/eslint-config/next.js 新增到我們的 extends 陣列中，我們告訴 ESLint 尋找名為 @repo/eslint-config 的套件，並參考 next.js 檔案。

設定 lint 任務

您想要執行 ESLint 的每個套件的 package.json 應該如下所示

{
  "scripts": {
    "lint": "eslint ."
  }
}

準備好您的腳本後，您可以建立您的 Turborepo 任務

{
  "tasks": {
    "lint": {}
  }
}

您現在可以使用全域 turbo 執行 turbo lint，或在您的根目錄 package.json 中建立一個腳本

{
  "scripts": {
    "lint": "turbo run lint"
  }
}