Turborepoのapps配下のリポジトリでESlintが効かなかった時にやったこと

はじめに

Turborepoのpackages/eslint-config配下にファイルを作って各リポジトリにESlintを反映させようと思ったのですが、うまくいかなかったので、その時に行ったことを書きます。

構成はこちらです。

.
├── apps/
│   └── mobile/
│       ├── .eslintrc.js //ESlintの設定ファイル
│       └── ... (その他のファイル)
├── packages/
│   └── eslint-config/
│       ├── base.js //ベースとなるESlintの設定ファイル
│       └── expo.js //expoのみのEslintの設定ファイル

ESlintが効かなかった時にやったこと

下記の2つは頻繁に行いましょう

• npm run dev等で一度アプリを立ち上げてみる
• VScodeを再起動する(⌘ + P → >reload)

まず、rulesに'no-console': 'warn', などをデバッグように入れて、効いてるか確認したいフィルにconsole.logを入れてVSCode上に表示されるか確認しましょう。
効いていたらこんな感じにwarningが表示されるはずです。

それでも効かなかった時は、eslintが設定されているか下記コマンドで確認しましょう。

$ npx eslint --print-config apps/mobile/app/index.tsx //ESlintが効いてるか知りたいファイル

今回は下記のようなログが表示されました。

Oops! Something went wrong! :(

ESLint: 8.57.1

Error: ESLint configuration in .eslintrc.js » @repo/eslint-config/expo.js is invalid:
	- Property "rules" is the wrong type (expected object but got `[{"no-console":"warn"}]`).

原因は、下記のように配列で書いてしまっていたことでした。

rules: [
  { 'no-console': 'warn' },
];

こちらを修正し、VScodeを再起動、npm run devで再度立ち上げてみたら直りました🎉

それでもうまくいかない時

Turborepoは、packages/eslint-configというフォルダがあるので、そこに各ディレクトリの.eslintrc.jsを継承しています。そこの継承がうまくいっていない可能性もあるので、全てのESlintrc系のファイルにrulesの'no-console': 'warn'を入れて、どこまでが効いているかを確認するのも一つの手です。