仓库
文档
单仓库手册
代码风格检查
ESLint

单仓库中的 ESLint

安装 ESLint

建议为了简单起见，在你的单仓库的根目录中安装 ESLint 作为 devDependency，或者使用 syncpack (在新标签页打开) 等工具在所有工作区中保持相同的版本。

共享配置

在工作区之间共享 ESLint 配置可以提高生产力，使所有工作区更加一致。

让我们想象一个这样的单仓库

apps
├─ docs
│  ├─ package.json
│  └─ .eslintrc.js
└─ web
   ├─ package.json
   └─ .eslintrc.js
packages
└─ eslint-config-custom
   ├─ next.js
   ├─ library.js
   └─ package.json

我们有一个名为 eslint-config-custom 的包，以及两个应用程序，每个应用程序都有自己的 .eslintrc.js。

我们的 eslint-config-custom 包

我们的 eslint-config-custom 文件包含两个文件，next.js 和 library.js。这些是两个不同的 ESLint 配置，我们可以根据需要在不同的工作区中使用它们。

让我们研究一下 next.js lint 配置

const { resolve } = require("node:path");
 
const project = resolve(process.cwd(), "tsconfig.json");
 
/*
 * This is a custom ESLint configuration for use with
 * Next.js apps.
 *
 * This config extends the Vercel Engineering Style Guide.
 * For more information, see https://github.com/vercel/style-guide
 *
 */
 
module.exports = {
  extends: [
    "@vercel/style-guide/eslint/node",
    "@vercel/style-guide/eslint/typescript",
    "@vercel/style-guide/eslint/browser",
    "@vercel/style-guide/eslint/react",
    "@vercel/style-guide/eslint/next",
    // turborepo custom eslint configuration configures the following rules:
    //  - https://github.com/vercel/turbo/blob/main/packages/eslint-plugin-turbo/docs/rules/no-undeclared-env-vars.md
    "eslint-config-turbo",
  ].map(require.resolve),
  parserOptions: {
    project,
  },
  globals: {
    React: true,
    JSX: true,
  },
  settings: {
    "import/resolver": {
      typescript: {
        project,
      },
    },
  },
  ignorePatterns: ["node_modules/", "dist/"],
  // add rules configurations here
  rules: {
    "import/no-default-export": "off",
  },
};

这是一个典型的 ESLint 配置，它扩展了 Vercel 风格指南 (在新标签页打开)，没什么特别的。

The package.json looks like this

{
  "name": "eslint-config-custom",
  "license": "MIT",
  "version": "0.0.0",
  "private": true,
  "devDependencies": {
    "@vercel/style-guide": "^4.0.2",
    "eslint-config-turbo": "^1.10.12"
  }
}

请注意，ESLint 依赖项都列在这里。这很有用 - 这意味着我们不需要在导入 eslint-config-custom 的应用程序中重新指定依赖项。

如何使用 eslint-config-custom 包

在我们的 web 应用程序中，我们首先需要添加 eslint-config-custom 作为依赖项。

{
  "dependencies": {
    "eslint-config-custom": "*"
  }
}

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

module.exports = {
  root: true,
  extends: ["custom/next"],
};

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

您可以通过设置包的入口点来避免指定文件。例如，在 package.json 中设置 main: 'next.js'，可以在您的 .eslintrc.js 中简单地加载为 extends: ["custom"]。

摘要

当您使用 npx create-turbo@latest 创建一个新的monorepo 时，此设置默认提供。您还可以查看 我们的基本示例 （在新标签页中打开），以查看工作版本。

设置 lint 任务

我们建议您遵循 基础知识 部分中的设置，并进行一项更改。

每个 package.json 脚本应如下所示

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