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