ESLint
ESLint 是一个静态分析工具,用于快速发现并修复 JavaScript 代码中的问题。
Good to know:
This guide assumes you're using create-turbo or a repository with a similar structure.在本指南中,我们将涵盖:
我们将在单体仓库的工作区之间共享配置,确保配置在各个包之间保持一致且可组合,以维持高缓存命中率。
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
作为依赖项。
然后我们可以这样导入配置:
此外,你可以这样添加特定于包的配置:
ESLint v8(传统)
ESLint v8 将于 2024 年 10 月 5 日结束生命周期。我们鼓励你升级到 ESLint v9 或更高版本。此文档旨在帮助尚未升级的现有项目。
使用 ESLint v8 及更低版本的传统配置,我们将得到如下的文件结构:
有一个名为 @repo/eslint-config
的包,和两个应用程序,每个都有自己的 .eslintrc.js
。
@repo/eslint-config
包
@repo/eslint-config
文件包含两个文件,next.js
和 library.js
。这些是两种不同的 ESLint 配置,我们可以根据需要在不同的包中使用它们。
Next.js 的配置可能如下所示:
package.json
如下所示:
注意,ESLint 依赖项都列在这里。这很有用,因为这意味着我们不需要在导入 @repo/eslint-config
的应用程序中重新指定依赖项。
如何使用 @repo/eslint-config
包
在我们的 web
应用程序中,首先需要添加 @repo/eslint-config
作为依赖项。
然后我们可以这样导入配置:
通过将 @repo/eslint-config/next.js
添加到我们的 extends
数组中,我们告诉 ESLint 查找名为 @repo/eslint-config
的包,并引用 next.js
文件。
设置 lint
任务
你想要运行 ESLint 的每个包的 package.json
应该如下所示:
准备好脚本后,你可以创建你的 Turborepo 任务:


你现在可以使用全局 turbo
运行 turbo lint
,或者在根 package.json
中创建一个脚本: