Migrate eslintrc to flat config

.husky/pre-commit

@@ -0,0 +1 @@
+yarn lint-staged

.vscode/settings.json

@@ -3,7 +3,12 @@
     "**/.yarn": true,
     "**/.pnp.*": true
   },
-  "eslint.nodePath": ".yarn/sdks",
+  "eslint.enable": true,
+  "eslint.validate": ["javascript", "typescript", "typescriptreact"],
+  "eslint.workingDirectories": [{ "mode": "auto" }],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
   "prettier.prettierPath": ".yarn/sdks/prettier/index.cjs",
   "typescript.tsdk": ".yarn/sdks/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,

@types/environment.d.ts

@@ -1,5 +1,5 @@
 /* eslint-disable unused-imports/no-unused-vars */
-/* eslint-disable @typescript-eslint/no-unused-vars */
+
 namespace NodeJS {
   interface ProcessEnv extends NodeJS.ProcessEnv {
     EMAIL: string;

eslint.config.mjs

@@ -0,0 +1,108 @@
+import eslint from '@eslint/js';
+import nextPlugin from '@next/eslint-plugin-next';
+import reactPlugin from 'eslint-plugin-react';
+import hooksPlugin from 'eslint-plugin-react-hooks';
+import simpleImportSort from 'eslint-plugin-simple-import-sort';
+import unusedImports from 'eslint-plugin-unused-imports';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+import prettier from 'eslint-plugin-prettier/recommended';
+
+export default tseslint.config(
+  // * Base ESLint recommended configuration
+  // * TypeScript ESLint recommended configuration
+  eslint.configs.recommended,
+  tseslint.configs.recommended,
+  {
+    rules: {
+      '@typescript-eslint/no-unused-vars': 'off',
+    },
+  },
+
+  // * Prettier configuration
+  prettier,
+
+  // * Unused imports configuration
+  // * Simple import sort configuration
+  {
+    plugins: {
+      'unused-imports': unusedImports,
+      'simple-import-sort': simpleImportSort,
+    },
+    rules: {
+      'unused-imports/no-unused-imports': 'error',
+      'unused-imports/no-unused-vars': [
+        'warn',
+        {
+          vars: 'all',
+          varsIgnorePattern: '^_',
+          args: 'after-used',
+          argsIgnorePattern: '^_',
+        },
+      ],
+      'simple-import-sort/imports': [
+        'error',
+        {
+          groups: [
+            ['^\\u0000'],
+            [
+              '^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)',
+            ],
+            ['^react'],
+            ['^next'],
+            ['^@?\\w'],
+            ['^(@|libs|components|utils|hooks|db)(/.*|$)'],
+            ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+            ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+            ['^.+\\.svg$'],
+            ['^.+\\.module.s?css$'],
+          ],
+        },
+      ],
+      'simple-import-sort/exports': 'error',
+    },
+  },
+
+  // * Next.js configuration
+  {
+    plugins: {
+      '@next/next': nextPlugin,
+    },
+    rules: {
+      ...nextPlugin.configs.recommended.rules,
+      ...nextPlugin.configs['core-web-vitals'].rules,
+      '@next/next/no-img-element': 'error',
+    },
+  },
+
+  // * React configuration
+  // * React Hooks configuration
+  {
+    files: ['**/*.{ts,tsx}'],
+    plugins: {
+      react: reactPlugin,
+      'react-hooks': hooksPlugin,
+    },
+    languageOptions: {
+      globals: {
+        ...globals.serviceworker,
+        ...globals.browser,
+      },
+    },
+    rules: {
+      ...reactPlugin.configs.recommended.rules,
+      ...reactPlugin.configs['jsx-runtime'].rules,
+      ...hooksPlugin.configs['recommended-latest'].rules,
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+
+  // Ignore files configuration
+  {
+    ignores: ['**/*/dist/', '**/node_modules/', '*.config.*', '.next', '.yarn'],
+  },
+);

package.json

@@ -3,11 +3,13 @@
   "private": true,
   "version": "3.0.0",
   "scripts": {
+    "prepare": "husky",
     "open-browser": "open http://localhost:6100",
     "dev": "next dev -p 6100 & yarn open-browser",
     "build": "yarn run script && next build",
     "start": "next start",
-    "lint": "eslint --ext .tsx --ext .ts .",
+    "lint:prettier": "prettier --write .",
+    "lint:eslint": "eslint --fix",
     "script": "node .script/gSheet.cjs"
   },
   "dependencies": {
@@ -26,27 +28,42 @@
     "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^14.2.11",
+    "@eslint/compat": "^1.2.7",
+    "@eslint/js": "^9.23.0",
+    "@next/eslint-plugin-next": "^15.2.4",
     "@svgr/webpack": "8.1.0",
     "@types/node": "^20.12.2",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^8.2.0",
     "@typescript-eslint/parser": "^8.2.0",
     "dotenv": "^10.0.0",
-    "eslint": "^8.39.0",
+    "eslint": "^9.23.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-unused-imports": "^4.1.3",
+    "globals": "^16.0.0",
     "google-auth-library": "^9.14.0",
     "google-spreadsheet": "^4.1.2",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.5.0",
     "prettier": "^3.3.3",
     "sass": "1.77.8",
     "typescript": "^5.5.4",
+    "typescript-eslint": "^8.28.0",
     "webpack": "5.93.0"
   },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "prettier --write",
+      "eslint --fix"
+    ],
+    "*.{json,css}": [
+      "prettier --write"
+    ]
+  },
   "packageManager": "yarn@4.5.0"
 }

tsconfig.json

@@ -2,11 +2,7 @@
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": [
-      "DOM",
-      "DOM.Iterable",
-      "ESNext"
-    ],
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -21,9 +17,7 @@
     "jsx": "preserve",
     "baseUrl": "./",
     "paths": {
-      "@/*": [
-        "src/*"
-      ]
+      "@/*": ["src/*"]
     },
     "plugins": [
       {
@@ -32,13 +26,6 @@
     ],
     "incremental": true
   },
-  "include": [
-    "@types",
-    "next-env.d.ts",
-    "./src",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["@types", "next-env.d.ts", "./src", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }