リポジトリ
ドキュメント
モノレポハンドブック
リンティング
ESLint

モノレポにおける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を持つ2つのアプリケーションがあります。

当社のeslint-config-customパッケージ

当社のeslint-config-customファイルには、next.jsとlibrary.jsの2つのファイルが含まれています。これらは2つの異なる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",
  },
};

これは、Vercelスタイルガイド (新しいタブで開きます)を拡張する一般的なESLint設定であり、特別なものではありません。

package.jsonは次のようになります。

{
  "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"],
};

`extends`配列に`custom/next`を追加することで、ESLintに`eslint-config-custom`というパッケージを探し、`next.js`ファイルを参照するように指示しています。

パッケージのエントリポイントを設定することで、ファイルの指定を避けることができます。たとえば、`package.json`に`main: 'next.js'`を設定すると、`extends: ["custom"]`のように、` .eslintrc.js`で簡単にロードできます。

概要

この設定は、`npx create-turbo@latest`で新しいモノレポを作成する際に、デフォルトで提供されます。新しいモノレポを作成することもできます。動作するバージョンを見るには、基本的な例 (新しいタブで開きます)を参照してください。

`lint`タスクの設定

基礎セクションの設定に従うことをお勧めします（ただし、1点変更があります）。

各`package.json`スクリプトは、次のようになります。

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