ESLint

ESLint 是一个静态分析工具，用于快速查找和修复 JavaScript 代码中的问题。

在本指南中，我们将介绍

• 使用扁平配置的 ESLint v9
• 使用旧版配置的 ESLint v8
• 如何设置一个 lint 任务（适用于两个版本）

我们将在整个 monorepo 的 Workspace 中共享配置，确保各个包的配置保持一致且可组合，以维持较高的缓存命中率。

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