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

概要

前回はmonorepo構成を作成した。
この環境を使いやすくするため、monorepo (yarn workspace) で tsconfig や .eslintrc をいい感じに管理するを参考にlintの設定してみた。
eslint公式

ソースコード

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

設定ファイル

app/.eslintrc.cjs

module.exports = {
  extends: ["@scope/eslint-config-custom/frontend"]
};

packages/lib-a/.eslintrc.cjs

module.exports = {
  extends: ["@scope/eslint-config-custom/backend"]
};

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

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

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のファイルが見つからないと怒っていた模様。

.vscode/settings.json

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

 - .vscode
   - settings.json
 - packages
   - eslint-config-custom
     - package.json
+    - .eslintrc.json
     - index.js
     - lib
       - backend.js

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

.eslintrc.json

{}

ESLintにimportのソートを加えたソースコード