ESLint

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

在本指南中，我們將涵蓋

• 使用 Flat Configuration 的 ESLint v9
• 使用舊版配置的 ESLint v8
• 如何設定 lint 任務（適用於兩個版本）

我們將在整個單體儲存庫的工作區中共享配置，確保配置在各個套件中保持一致，並可組合以維持高快取命中率。

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"
  }
}