概要
Monorepo環境では、複数のパッケージを1つのリポジトリで管理するため、各パッケージごとに個別のESLint設定が必要な場合があります。 このとき、ESLintがどのディレクトリを基準に動作するかを決定することが重要です。
今回のブログポストでは、Visual Studio Code（VSCode）でMonorepoプロジェクトでESLintのCurrent Working Directory（CWD）を設定する方法について説明します。
VSCodeのCurrent working directory
VSCodeでは特別な設定をしない限り、ESLintはルートフォルダにあるESLint設定ファイルを基準に動作します。 しかし、Monorepoプロジェクトでは、各プロジェクトごとにESLint設定ファイルがあるかもしれません。
このとき、VSCodeでESLintのCurrent Working Directory（CWD）を設定すると、ESLintはそのディレクトリを基準に動作するようになります。
.vscode/settings.jsonファイルの編集
次はVSCodeでESLintのCurrent Working Directory（CWD）を設定する方法です。
- mode設定
{
...
"eslint.workingDirectories": [{ "mode": "auto" }]
}
このように設定すると、VSCodeはESLint設定ファイルがあるディレクトリを自動的に検索してCWDとして設定します。
- pattern設定
{
...
"eslint.workingDirectories": [{ "pattern": "./packages/*/" }]
}
GlobパターンでCWDとなるディレクトリを設定することもできます。
- ディレクトリ指定設定
{
...
"eslint.workingDirectories": ["./packages/package1", "./packages/package2"]
}
このように配列で特定のディレクトリを指定することもできます。
完了
これでVSCodeでMonorepoプロジェクトを開発する際、ESLintのCurrent Working Directory（CWD）を設定する方法について説明しました。
私は"mode": "auto"を設定して使っています。 特に問題がない場合は、この設定を使うことをお勧めします。
私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！
アプリ広報
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
