feat: create eslint-v9-react directory

bases/eslint-prettier/eslint-v9-react/.eslintrc.cjs

@@ -0,0 +1,87 @@
+const tsconfigNode = require("./tsconfig.node.json");
+
+/**
+ * @type {import("eslint").Linter.Config}
+ */
+const config = {
+  root: true,
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:tailwindcss/recommended",
+    "prettier",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    /**
+     * typescript-eslint の型情報を利用するルールを使用する場合に必要
+     * {@link https://typescript-eslint.io/packages/parser#project}
+     */
+    project: "./tsconfig.json",
+  },
+  plugins: [
+    "@typescript-eslint",
+    "import",
+    "simple-import-sort",
+    "react",
+    "react-hooks",
+    "jsx-a11y",
+  ],
+  settings: {
+    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
+    "import/resolver": {
+      typescript: true,
+    },
+  },
+  rules: {
+    // `eslint-plugin-import` よりも、広範囲かつ望ましいソートが可能な
+    // `eslint-plugin-simple-import-sort` で勧められている設定を指定
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "import/first": "error",
+    "import/newline-after-import": "error",
+    "import/no-duplicates": "error",
+
+    // `import` と `import type` を分ける
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        fixStyle: "separate-type-imports",
+        prefer: "type-imports",
+      },
+    ],
+
+    // `import type` を同一パスの `import` の上に配置する
+    "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
+
+    // `tsconfig.json` の `compilerOptions.jsx` で `react-jsx` を指定している場合は無効にする必要があるため
+    "react/react-in-jsx-scope": "off",
+  },
+  overrides: [
+    // `tsconfig.node.json` の対象ファイル向けの設定
+    {
+      files: tsconfigNode.include,
+      parserOptions: { project: "./tsconfig.node.json" },
+    },
+
+    // `.eslintrc.cjs` など、CommonJS の記法を利用するファイルむけの設定
+    {
+      files: ["**/*.cjs"],
+      extends: ["plugin:n/recommended"],
+      parserOptions: {
+        ecmaVersion: 2022,
+      },
+      rules: {
+        // `require` の利用を有効にする
+        "@typescript-eslint/no-var-requires": "off",
+      },
+    },
+  ],
+};
+
+module.exports = config;

bases/eslint-prettier/eslint-v9-react/.prettierrc.mjs

@@ -0,0 +1,10 @@
+/**
+ * プロジェクトルートに `.editorconfig` があれば、その設定が優先される。
+ * また、未指定時のデフォルト値は、以下のドキュメントに記載されている。
+ * {@link https://prettier.io/docs/en/options}
+ *
+ * @type {import("prettier").Config}
+ */
+const config = {};
+
+export default config;

bases/eslint-prettier/eslint-v9-react/README.md

@@ -0,0 +1,35 @@
+# Next.js 向けの ESLint v8 & Prettier の基本設定例
+
+## 概要
+
+eslint-plugin-react が 2024/06/12時点では v9 に対応していないため、ESLint v8 の Legacy Config で利用できるものを用意しました。
+
+## 構造
+
+```txt
+src/ ... 検証対象のファイルを配置しているディレクトリ
+.eslintrc.cjs ... ESLint の config ファイル。※  `.eslintrc` は `.mjs` に対応していないため `.cjs` で定義
+.prettierrc.mjs ... Pretteir の config ファイル。ESM として定義していることを明示的に示すために `.mjs` としています。
+package.json ... 依存パッケージ
+tsconfig.json ... `src` 内の Browser での動作を対象としたコード向けの tsconfig
+tsconfig.node.json ... Node.js を利用した開発ツール群の config ファイルや、スクリプト向けの tsconfig
+```
+
+### ESLint
+
+`eslint` と、`typescript-eslint` が推奨する設定を中心に、以下の設定をしています。
+
+- `eslint-plugin-import` と `eslint-plugin-simple-import-sort` を利用して、`import` と `export` の順序矯正
+- `@typescript-eslint/consistent-type-imports` と `import/consistent-type-specifier-style` ルールを用いて、 型 の imoprt を `import type` で行うように矯正
+- `eslint-plugin-tailwindcss` による、`className` の順序の矯正
+
+### Prettier
+
+[Prettier は EditorConfig の設定サポートしいる](https://prettier.io/docs/en/configuration.html#editorconfig)ため、その他の設定はデフォルトのままにしています。
+
+## 登録している npm-scripts
+
+| 名称   | 概要                                                  |
+| ------ | ----------------------------------------------------- |
+| check  | `tsc`, `eslint`, `prettier` を並列に実行する          |
+| format | `eslint --fix` を `prettier --write` を直列に実行する |

bases/eslint-prettier/eslint-v9-react/package.json

@@ -0,0 +1,39 @@
+{
+  "type": "module",
+  "description": "ESLint v9 (Flat Config) と Prettier を使用した React 向けの基本的な設定",
+  "scripts": {
+    "check:tsc": "tsc --noEmit",
+    "check:eslint": "eslint .",
+    "check:prettier": "prettier --check .",
+    "check": "concurrently --c 'auto' 'pnpm:check:*'",
+    "format:eslint": "pnpm check:eslint --fix",
+    "format:prettier": "pnpm prettier --write .",
+    "format": "pnpm format:eslint && pnpm format:prettier"
+  },
+  "devDependencies": {
+    "@tsconfig/node-lts": "^20.1.3",
+    "@tsconfig/vite-react": "^3.0.2",
+    "@types/eslint": "^8.56.10",
+    "@types/node": "^20",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
+    "concurrently": "^8.2.2",
+    "eslint": "^9",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-n": "^17.7.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-simple-import-sort": "^12.1.0",
+    "eslint-plugin-tailwindcss": "^3.17.0",
+    "prettier": "^3.2.5"
+  },
+  "peerDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
+}

bases/eslint-prettier/eslint-v9-react/src/README.md

@@ -0,0 +1,4 @@
+# 注意書き
+
+> [!CAUTION]
+> このディレクトリは、ESLint と Prettier の動作確認を行うためのコードを配置するためのディレクトリであり、上記ツールの設定に利用されているものではありません

bases/eslint-prettier/eslint-v9-react/src/index.tsx

@@ -0,0 +1,17 @@
+import type { FC } from "react";
+
+const Child = () => {
+  return (
+    <div>
+      <img src="https://placehold.co/100x100.png" />
+    </div>
+  );
+};
+
+export const App: FC = () => {
+  return (
+    <div>
+      <Child />
+    </div>
+  );
+};

bases/eslint-prettier/eslint-v9-react/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@tsconfig/vite-react/tsconfig.json",
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

bases/eslint-prettier/eslint-v9-react/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@tsconfig/node-lts/tsconfig.json",
+  "compilerOptions": {
+    "emitDeclarationOnly": true,
+    "composite": true,
+    "allowJs": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  },
+  "include": [".eslintrc.cjs", ".prettierrc.mjs", "vite.config.mjs"]
+}