ESLint

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

¥ESLint is a static analysis tool for quickly finding and fixing problems in your JavaScript code.

在本指南中，我们将介绍：

¥In this guide, we'll cover:

• 使用扁平配置的 ESLint v9

  ¥ESLint v9 with Flat Configuration

• 使用旧配置的 ESLint v8

  ¥ESLint v8 with legacy configuration

• 如何设置 lint 任务（适用于两个版本）

  ¥How to set up a lint task (applies to both versions)

我们将在 monorepo 的工作区内共享配置，确保配置在各个包之间保持一致且可组合，以保持较高的缓存命中率。

¥We will share configurations across the monorepo's Workspace, ensuring configuration is consistent across packages and composable to maintain high cache hit ratios.

ESLint v9（扁平配置）

¥ESLint v9 (Flat Configs)

使用 ESLint v9 的 Flat Configs，我们最终会得到如下文件结构：

¥Using ESLint v9's Flat Configs, we will end up with a file structure like this:

此结构包含：

¥This structure includes:

• ./packages/eslint-config 中名为 @repo/eslint-config 的包，其中包含所有 ESLint 配置

  ¥A package called @repo/eslint-config in ./packages/eslint-config that holds all ESLint configuration

• 两个应用，每个都有自己的 eslint.config.js

  ¥Two applications, each with their own eslint.config.js

• 一个 ui 包，它本身也包含 eslint.config.js。

  ¥A ui package that also has its own eslint.config.js

关于配置包

¥About the configuration package

@repo/eslint-config 软件包有三个配置文件：base.js、next.js 和 react-internal.js。它们之所以被称为 从 package.json 导出，是为了根据需要供其他软件包使用。配置示例可以在 在 Turborepo GitHub 仓库中 中找到，也可以在 npx create-turbo@latest 中找到。

¥The @repo/eslint-config package has three configuration files, base.js, next.js, and react-internal.js. They are exported from package.json so that they can be used by other packages, according to needs. Examples of the configurations can be found in the Turborepo GitHub repository and are available in npx create-turbo@latest.

需要注意的是，next.js 和 react-internal.js 配置使用 base.js 配置以确保一致性，并根据各自的需求对其进行了扩展，添加了更多配置。此外，请注意，eslint-config 的 package.json 拥有存储库的所有 ESLint 依赖。这很有用，因为这意味着我们不需要在导入 @repo/eslint-config 的包中重新指定依赖。

¥Notably, the next.js and react-internal.js configurations use the base.js configuration for consistency, extending it with more configuration for their respective requirements. Additionally, notice that the package.json for eslint-config has all of the ESLint dependencies for the repository. This is useful, since it means we don't need to re-specify the dependencies in the packages that import @repo/eslint-config.

使用配置包

¥Using the configuration package

在我们的 web 应用中，我们首先需要添加 @repo/eslint-config 作为依赖。

¥In our web app, we first need to add @repo/eslint-config as a dependency.

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

然后我们可以像这样导入配置：

¥We can then import the configuration like this:

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

此外，你可以像这样添加特定于包的配置：

¥Additionally, you can add configuration specific to the package like this:

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

ESLint v8（旧版）

¥ESLint v8 (Legacy)

使用 ESLint v8 及更低版本的旧配置，我们最终将得到如下文件结构：

¥Using legacy configuration from ESLint v8 and lower, we will end up with a file structure like this:

有一个名为 @repo/eslint-config 的包，以及两个应用，每个应用都有自己的 .eslintrc.js。

¥There's a package called @repo/eslint-config, and two applications, each with their own .eslintrc.js.

@repo/eslint-config 软件包

¥The @repo/eslint-config package

@repo/eslint-config 文件包含两个文件：next.js 和 library.js。这是两种不同的 ESLint 配置，我们可以根据需要在不同的包中使用它们。

¥The @repo/eslint-config file contains two files, next.js, and library.js. These are two different ESLint configurations, which we can use in different packages, depending on our needs.

Next.js 的配置可能如下所示：

¥A configuration for Next.js may look like this:

/* 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 如下所示：

¥The package.json looks like this:

{
  "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 的应用内的依赖。

¥Note that the ESLint dependencies are all listed here. This is useful, since it means we don't need to re-specify the dependencies inside the apps which import @repo/eslint-config.

如何使用 @repo/eslint-config 软件包

¥How to use the @repo/eslint-config package

在我们的 web 应用中，我们首先需要添加 @repo/eslint-config 作为依赖。

¥In our web app, we first need to add @repo/eslint-config as a dependency.

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

然后我们可以像这样导入配置：

¥We can then import the config like this:

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

通过将 @repo/eslint-config/next.js 添加到 extends 数组中，我们告诉 ESLint 查找名为 @repo/eslint-config 的包，并引用文件 next.js。

¥By adding @repo/eslint-config/next.js to our extends array, we're telling ESLint to look for a package called @repo/eslint-config, and reference the file next.js.

设置 lint 任务

¥Setting up a lint task

每个你想要运行 ESLint 的包的 package.json 文件应如下所示：

¥The package.json for each package where you'd like to run ESLint should look like this:

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

准备好脚本后，你可以创建 Turborepo 任务：

¥With your scripts prepared, you can then create your Turborepo task:

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

你现在可以使用 全局 turbo 运行 turbo lint，或者在根目录 package.json 中创建脚本：

¥You can now run turbo lint with global turbo or create a script in your root package.json:

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