monorepoのプロジェクトでVsCodeでeslintが効かない場合

Angularでangular-eslintを使い、tslint廃止してeslintに変えた時にVsCodeでハマった話です。

まず、以下の記事やマイグレーション手順通りに進めます。

• Angular 11のプロジェクトをCodelyzerとTSLintからESLintへマイグレーションしてみた
• Migrating an Angular CLI project from Codelyzer and TSLint

angular-eslintではtslint.json を元に .eslintrc.jsonが生成されます。
ng lintからeslintは効くが、monorepoのプロジェクトだとVsCodeで相対パス指定が必要でした。
しかし、相対パス指定の tsconfigRootDir は .eslintrc.js からしか使えないという。
（jsonは__dirname指定できないため）

• typescript-eslint: monorepoでVS Codeからtsconfig.jsonのパスを正しく認識させる
• Issue - Make tsconfigRootDir relative to the .eslintrc file

eslintrc.jsonでも固定パスを指定できるが、VsCode上ではlintが動作するけど ng lint コマンドではこける...。
結局のところ、VsCodeの設定で解決できました😄

最初は以下を指定していたが、これだとRootのフォルダ名が違った場合、他のmonorepoプロジェクトで使えず汎用的でない。

"eslint.workingDirectories": [
    { "pattern": "./packages/*/" }
]

以下の指定がベストだった👍

"eslint.workingDirectories": [
    { "mode": "auto" }
]

参考： ESLintの設定をしたAngular 11のプロジェクトでVS CodeのExtension「ESLint」を使ってみた