monorepoにeslintの設定を管理するパッケージを作成したメモ

## 概要
前回は[monorepo構成](https://qiita.com/hibohiboo/items/30bb655374c0936ab14f)を作成した。
この環境を使いやすくするため、[monorepo (yarn workspace) で tsconfig や .eslintrc をいい感じに管理する](https://zenn.dev/shinnoki/articles/3f008f53b2312f)を参考にlintの設定してみた。
[eslint公式](https://eslint.org/docs/latest/extend/shareable-configs)

[ソースコード](https://github.com/hibohiboo/kaminiten/tree/945442b15dc3e8435abd95b51e59d155d10d4a92)

```
+ .vscode
- app
  + src
  - .eslintrc.cjs
- packages
   - eslint-config-custom
      - package.json
      - .eslintrc.json
      - backend.js
      - frontend.js
   - lib-a
     - .eslint.cjs
     + src
```

## 設定ファイル

```ts:app/.eslintrc.cjs
module.exports = {
  extends: ["@scope/eslint-config-custom/frontend"]
};
```
```ts:packages/lib-a/.eslintrc.cjs
module.exports = {
  extends: ["@scope/eslint-config-custom/backend"]
};
```

```js:packages/eslint-config-custom/frontend.js
module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "eslint-config-turbo",
    "prettier",
  ],
  ignorePatterns: ["dist", ".eslintrc.cjs"],
  parser: "@typescript-eslint/parser",
  plugins: ["react-refresh"],
  rules: {
    semi: ["error", "always"],
    "react-refresh/only-export-components": [
      "warn",
      { allowConstantExport: true },
    ],
  },
};
```

```js:packages/eslint-config-custom/backend.js
module.exports = {
  env: { es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "eslint-config-turbo",
    "prettier",
  ],
  ignorePatterns: ["dist", ".eslintrc.cjs"],
  parser: "@typescript-eslint/parser",
  rules: {
    semi: ["error", "always"],
  },
};

```

```json:packages/eslint-config-custom/package.json
{
  "name": "@scope/eslint-config-custom",
  "private": true,
  "license": "MIT",
  "version": "0.0.0",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^6.9.1",
    "@typescript-eslint/parser": "^6.9.1",
    "eslint-config-prettier": "^9.0.0",
    "eslint-config-turbo": "^1.10.16",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.4"
  }
}
```


## 混乱したメモ
VscodeでESLintのファイルが見つからないというエラーで首を傾げた。

```
No ESLint configuration (e.g .eslintrc) found for file: d:\projects\kaminiten\packages\eslint-config-custom\index.js
File will not be validated. Consider running 'eslint --init' in the workspace folder kaminiten
Alternatively you can disable ESLint by executing the 'Disable ESLint' command.
```

### 結論
.eslintrcファイルが存在しないのが原因。エラーで言っていることそのままなのだが、eslintの設定をしているフォルダで言われてしまったので混乱した。

ディレクトリ構成は下記。

```
- .vscode
  - settings.json
- packages
  - eslint-config-custom
    - package.json
    - index.js
    - lib
      - backend.js
```
このとき、eslint-config-custom/index.jsファイルを開いたときに上記のエラーが出ていた。
vscode用の下記の設定をおこなっていたため、eslintのファイルが見つからないと怒っていた模様。
 ```json:.vscode/settings.json
{
  "eslint.workingDirectories": [{"mode": "auto"}]
}
 ```
 
```diff
 - .vscode
   - settings.json
 - packages
   - eslint-config-custom
     - package.json
+    - .eslintrc.json
     - index.js
     - lib
       - backend.js
```

.eslintrc.jsonファイルをeslint-config-customフォルダに作成したらエラーは消えた。
```json:.eslintrc.json
{}
```

[ESLintにimportのソートを加えたソースコード](https://github.com/hibohiboo/kaminiten/tree/93821db8491621640d143da2c36e7dc6c81aba58)