@willbooster/eslint-config-next 1.2.0 → 2.0.0

package/README.md

@@ -1,6 +1,6 @@
 # eslint-config-next
 
-A ESLint config for Next.js.
+A ESLint flat config for Next.js.
 You need to do the following command to install peer dependencies.
 
 ```sh

package/eslint.config.js

@@ -0,0 +1,346 @@
+/* eslint-disable unicorn/no-null */
+
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { FlatCompat } from '@eslint/eslintrc';
+import js from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import eslintPluginReact from 'eslint-plugin-react';
+import eslintPluginSortClassMembers from 'eslint-plugin-sort-class-members';
+import eslintPluginSortDestructureKeys from 'eslint-plugin-sort-destructure-keys';
+import eslintPluginUnicorn from 'eslint-plugin-unicorn';
+import eslintPluginUnusedImports from 'eslint-plugin-unused-imports';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+// mimic CommonJS variables -- not needed if using CommonJS
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const config = [
+  ...compat.extends('next/core-web-vitals').map((config) => ({
+    ...config,
+  })),
+
+  // We import configs of eslint-config-js/js-react/ts/ts-react manually
+  // because next/core-web-vitals depends on eslint-plugin-import,
+  // and we want to use eslint-plugin-import-x in the above configs.
+
+  // --------------- from eslint-config-js ---------------
+  // Note: don't merge the below two objects!
+  {
+    files: ['{,src/**/,tests/**/,scripts/**/}*.{cjs,js,jsx,mjs}'],
+  },
+  {
+    ignores: [
+      // Directories
+      '.yarn/**',
+      '3rd-party/**',
+      '@types/**',
+      '__generated__/**',
+      'android/**',
+      'build/**',
+      'coverage/**',
+      'dist/**',
+      'ios/**',
+      'no-format/**',
+      'node_modules/**',
+      'temp/**',
+      'test-fixtures/**',
+      // Files
+      '*.d.ts',
+      '*.min.*js',
+    ],
+  },
+  // cf. https://github.com/eslint/eslint/blob/main/packages/js/src/configs/eslint-recommended.js
+  js.configs.recommended,
+  // cf. https://github.com/sindresorhus/eslint-plugin-unicorn#recommended-config
+  eslintPluginUnicorn.configs.recommended,
+  {
+    plugins: {
+      'sort-class-members': eslintPluginSortClassMembers,
+      'sort-destructure-keys': eslintPluginSortDestructureKeys,
+    },
+    languageOptions: {
+      ecmaVersion: 'latest',
+      globals: {
+        // for Web
+        ...globals.browser,
+        ...globals.serviceworker,
+        // for Node.js
+        ...globals.node,
+      },
+    },
+    rules: {
+      eqeqeq: 'warn',
+      'no-console': 'off', // Allow `console.log()`.
+      'no-unused-vars': ['warn', { ignoreRestSiblings: true }], // Allow unused vars in object destructuring.
+      'object-shorthand': 'error',
+      'one-var': ['error', 'never'], // We prefer one variable declaration per line.
+      'spaced-comment': 'error', // Enforce consistency of spacing after the start of a comment // or /*.
+      'import/newline-after-import': 'error',
+      'import/no-duplicates': 'error',
+      'import/order': [
+        'error',
+        {
+          'newlines-between': 'always',
+          alphabetize: {
+            order: 'asc',
+          },
+        },
+      ],
+      'sort-destructure-keys/sort-destructure-keys': 'error',
+      'unicorn/filename-case': [
+        'error',
+        {
+          cases: {
+            camelCase: true,
+            pascalCase: true,
+          },
+        },
+      ],
+      'unicorn/no-abusive-eslint-disable': 'off',
+      'unicorn/no-array-callback-reference': 'off',
+      'unicorn/no-array-reduce': 'warn',
+      'unicorn/no-null': 'warn',
+      'unicorn/no-process-exit': 'off',
+      'unicorn/no-useless-undefined': [
+        'error',
+        {
+          checkArguments: false,
+        },
+      ],
+      'unicorn/prefer-top-level-await': 'warn',
+      'unicorn/prevent-abbreviations': 'off',
+    },
+  },
+  // -----------------------------------------------------------
+
+  // --------------- from eslint-config-js-react ---------------
+  // cf. https://github.com/jsx-eslint/eslint-plugin-react#flat-configs
+  eslintPluginReact.configs.flat.recommended,
+  eslintPluginReact.configs.flat['jsx-runtime'],
+  {
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      'react/jsx-sort-props': [
+        'error',
+        {
+          callbacksLast: true,
+          shorthandFirst: true,
+          reservedFirst: true,
+        },
+      ],
+      'react/no-unknown-property': [
+        'error',
+        {
+          ignore: ['global', 'jsx'],
+        },
+      ],
+      'react/prop-types': 'off',
+    },
+  },
+  // -----------------------------------------------------------
+
+  // --------------- from eslint-config-ts ---------------
+  ...tseslint.configs.recommendedTypeChecked.map((config) => ({
+    ...config,
+    files: ['{,src/**/,tests/**/,scripts/**/}*.{cts,mts,ts,tsx}'],
+    ignores: ['*.{cjs,js,mjs}'],
+  })),
+  {
+    files: ['{,src/**/,tests/**/,scripts/**/}*.{cts,mts,ts,tsx}'],
+    ignores: ['*.{cjs,js,mjs}'],
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    rules: {
+      '@typescript-eslint/camelcase': 'off', // c.f. https://github.com/typescript-eslint/typescript-eslint/issues/2050
+      '@typescript-eslint/consistent-type-imports': 'error',
+      '@typescript-eslint/explicit-function-return-type': [
+        'error',
+        {
+          allowExpressions: true,
+          allowHigherOrderFunctions: true,
+        },
+      ],
+      '@typescript-eslint/explicit-member-accessibility': [
+        'error',
+        {
+          accessibility: 'no-public',
+        },
+      ],
+      '@typescript-eslint/naming-convention': [
+        'error',
+        {
+          selector: 'default',
+          format: ['camelCase'],
+          leadingUnderscore: 'allow',
+          trailingUnderscore: 'allow',
+        },
+        {
+          selector: 'parameter',
+          format: ['camelCase'],
+          leadingUnderscore: 'allow',
+        },
+        {
+          selector: 'variable',
+          format: ['camelCase', 'PascalCase', 'UPPER_CASE'], // to use 'const ReactElem = () => { ...  };'
+          leadingUnderscore: 'allow',
+          trailingUnderscore: 'allow',
+        },
+        {
+          selector: 'typeLike',
+          format: ['PascalCase'],
+        },
+        {
+          selector: 'enumMember',
+          format: ['PascalCase'],
+        },
+        {
+          // allow any name when referring to import and property
+          selector: ['import', 'property'],
+          format: null,
+        },
+        {
+          // allow any name in object destructuring of variable
+          selector: 'variable',
+          modifiers: ['destructured'],
+          format: null,
+        },
+        {
+          // allow any name in object destructuring of parameter
+          selector: 'parameter',
+          modifiers: ['destructured'],
+          format: null,
+        },
+      ],
+      '@typescript-eslint/no-explicit-any': 'error', // let's try avoiding `any`
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', ignoreRestSiblings: true }], // allow unused vars in object destructuring
+      '@typescript-eslint/no-use-before-define': 'off', // abstract code should appear first
+    },
+  },
+  // cf. https://github.com/sweepline/eslint-plugin-unused-imports#usage
+  {
+    plugins: {
+      'unused-imports': eslintPluginUnusedImports,
+    },
+    rules: {
+      '@typescript-eslint/no-unused-vars': 'off',
+      'unused-imports/no-unused-imports': 'error',
+      'unused-imports/no-unused-vars': [
+        'warn',
+        {
+          vars: 'all',
+          varsIgnorePattern: '^_',
+          args: 'after-used',
+          argsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+  // cf. https://github.com/prettier/eslint-config-prettier#installation
+  eslintConfigPrettier,
+  // -----------------------------------------------------------
+
+  {
+    // A default export is required in app and page files.
+    // See also https://nextjs.org/docs/app/building-your-application/routing#file-conventions
+    files: [
+      'src/app/**/{layout,page,loading,not-found,error,template,default}.tsx',
+      'src/app/global-error.tsx',
+      'src/pages/**/*.tsx',
+      'src/pages/api/**/*.ts',
+    ],
+    rules: {
+      'import/no-default-export': 'off',
+    },
+  },
+  {
+    // You can use brackets for dynamic routes.
+    // cf. https://nextjs.org/docs/getting-started/project-structure
+    files: ['src/pages/**/*.tsx', 'src/pages/api/**/*.ts'],
+    rules: {
+      'unicorn/filename-case': [
+        'error',
+        {
+          case: 'kebabCase',
+          ignore: [String.raw`^\[.+\]\.tsx?$`],
+        },
+      ],
+    },
+  },
+  {
+    // Request handlers must have the same name as the HTTP methods name (uppercase, e.g. `GET`).
+    // https://nextjs.org/docs/app/api-reference/file-conventions/route
+    files: ['src/app/api/**/route.ts'],
+    rules: {
+      '@typescript-eslint/naming-convention': [
+        'error',
+        {
+          selector: 'default',
+          format: ['camelCase'],
+          leadingUnderscore: 'allow',
+          trailingUnderscore: 'allow',
+        },
+        {
+          selector: 'parameter',
+          format: ['camelCase'],
+          leadingUnderscore: 'allow',
+        },
+        {
+          selector: 'variable',
+          format: ['camelCase', 'PascalCase', 'UPPER_CASE'],
+          // to use 'const ReactElem = () => { ...  };'
+          leadingUnderscore: 'allow',
+          trailingUnderscore: 'allow',
+        },
+        {
+          selector: 'typeLike',
+          format: ['PascalCase'],
+        },
+        {
+          selector: 'enumMember',
+          format: ['PascalCase'],
+        },
+        {
+          // allow any name when referring to import and property
+          selector: ['import', 'property'],
+          format: null,
+        },
+        {
+          // allow any name in object destructuring of variable
+          selector: 'variable',
+          modifiers: ['destructured'],
+          format: null,
+        },
+        {
+          // allow any name in object destructuring of parameter
+          selector: 'parameter',
+          modifiers: ['destructured'],
+          format: null,
+        },
+        {
+          filter: '^(?:DELETE|GET|HEAD|OPTIONS|PATCH|POST|PUT)$',
+          selector: 'function',
+          modifiers: ['exported'],
+          format: null,
+        },
+      ],
+    },
+  },
+];
+
+export default config;

package/package.json

@@ -1,64 +1,71 @@
 {
   "name": "@willbooster/eslint-config-next",
-  "version": "1.2.0",
-  "description": "A ESLint config for Next.js",
+  "version": "2.0.0",
+  "description": "A ESLint flat config for Next.js",
   "license": "Apache-2.0",
   "author": "WillBooster Inc.",
-  "main": ".eslintrc.json",
+  "type": "module",
+  "main": "eslint.config.js",
   "files": [
-    ".eslintrc.json"
+    "eslint.config.js"
   ],
   "scripts": {
     "cleanup": "yarn format && yarn lint-fix",
     "format": "sort-package-json && yarn prettify",
-    "lint": "eslint --color \"./{scripts,src,tests}/**/*.{cjs,cts,js,jsx,mjs,mts,ts,tsx}\"",
+    "lint": "eslint --color",
     "lint-fix": "yarn lint --fix --rule \"{ react-hooks/exhaustive-deps: 0 }\"",
-    "prettify": "prettier --cache --color --write \"**/{.*/,}*.{cjs,css,cts,htm,html,js,json,json5,jsx,md,mjs,mts,scss,ts,tsx,vue,yaml,yml}\" \"!**/test-fixtures/**\"",
+    "prettify": "prettier --cache --color --write \"**/{.*/,}*.{cjs,css,cts,htm,html,js,json,json5,jsonc,jsx,md,mjs,mts,scss,ts,tsx,vue,yaml,yml}\" \"!**/test-fixtures/**\"",
     "test": "yarn lint",
     "typecheck": "tsc --noEmit --Pretty"
   },
   "prettier": "@willbooster/prettier-config",
-  "dependencies": {
-    "@willbooster/eslint-config-ts": "10.6.0"
-  },
   "devDependencies": {
-    "@types/eslint": "8.56.10",
-    "@types/micromatch": "4.0.7",
-    "@types/node": "20.12.7",
-    "@types/react": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "7.7.1",
-    "@typescript-eslint/parser": "7.7.1",
-    "@willbooster/prettier-config": "9.1.2",
-    "eslint": "8.57.0",
-    "eslint-config-next": "14.2.3",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-import-resolver-typescript": "3.6.1",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-react": "7.34.1",
-    "eslint-plugin-react-hooks": "4.6.1",
-    "eslint-plugin-sort-class-members": "1.20.0",
+    "@eslint/eslintrc": "3.3.0",
+    "@eslint/js": "9.21.0",
+    "@types/eslint": "9.6.1",
+    "@types/micromatch": "4.0.9",
+    "@types/node": "22.13.9",
+    "@types/react": "19.0.10",
+    "@typescript-eslint/parser": "8.26.0",
+    "@willbooster/prettier-config": "10.0.0",
+    "eslint": "9.21.0",
+    "eslint-config-next": "15.2.1",
+    "eslint-config-prettier": "10.0.2",
+    "eslint-import-resolver-typescript": "3.8.3",
+    "eslint-plugin-import-x": "4.6.1",
+    "eslint-plugin-react": "7.37.4",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-sort-class-members": "1.21.0",
     "eslint-plugin-sort-destructure-keys": "2.0.0",
-    "eslint-plugin-unicorn": "52.0.0",
-    "lint-staged": "15.2.2",
-    "micromatch": "4.0.5",
-    "prettier": "3.2.5",
-    "react": "18.3.0",
-    "sort-package-json": "2.10.0",
-    "typescript": "5.4.5",
-    "use-immer": "0.9.0"
+    "eslint-plugin-unicorn": "57.0.0",
+    "eslint-plugin-unused-imports": "4.1.4",
+    "globals": "16.0.0",
+    "lint-staged": "15.4.3",
+    "micromatch": "4.0.8",
+    "next": "15.2.1",
+    "prettier": "3.5.3",
+    "react": "19.0.0",
+    "sort-package-json": "3.0.0",
+    "typescript": "5.8.2",
+    "typescript-eslint": "8.26.0",
+    "use-immer": "0.11.0"
   },
   "peerDependencies": {
-    "@typescript-eslint/eslint-plugin": ">=5",
-    "@typescript-eslint/parser": ">=5",
-    "@willbooster/prettier-config": "9.1.2",
-    "eslint": ">=8",
-    "eslint-config-next": ">=13",
-    "eslint-config-prettier": ">=8",
-    "eslint-import-resolver-typescript": ">=2",
-    "eslint-plugin-import": ">=2",
-    "eslint-plugin-sort-class-members": ">=1.14",
-    "eslint-plugin-sort-destructure-keys": ">=1.4",
-    "typescript": ">=4"
+    "@eslint/eslintrc": ">=3",
+    "@eslint/js": ">=9",
+    "@typescript-eslint/parser": ">=8",
+    "eslint": ">=9",
+    "eslint-config-next": ">=15",
+    "eslint-config-prettier": ">=10",
+    "eslint-import-resolver-typescript": ">=3",
+    "eslint-plugin-import-x": ">=4",
+    "eslint-plugin-sort-class-members": ">=1.21",
+    "eslint-plugin-sort-destructure-keys": ">=2",
+    "eslint-plugin-unicorn": ">=57",
+    "eslint-plugin-unused-imports": ">=4",
+    "globals": ">=16",
+    "typescript": ">=5",
+    "typescript-eslint": ">=8"
   },
   "publishConfig": {
     "access": "public"

package/.eslintrc.json

@@ -1,109 +0,0 @@
-{
-  "extends": ["next/core-web-vitals", "@willbooster/eslint-config-ts"],
-  "rules": {
-    "import/no-default-export": "error",
-    "react/jsx-sort-props": [
-      "error",
-      {
-        "callbacksLast": true,
-        "shorthandFirst": true,
-        "reservedFirst": true
-      }
-    ],
-    "react/no-unknown-property": [
-      "error",
-      {
-        "ignore": ["global", "jsx"]
-      }
-    ],
-    "react/prop-types": "off"
-  },
-  "overrides": [
-    {
-      // A default export is required in app and page files.
-      // See also https://nextjs.org/docs/app/building-your-application/routing#file-conventions
-      "files": [
-        "src/app/**/{layout,page,loading,not-found,error,template,default}.tsx",
-        "src/app/global-error.tsx",
-        "src/pages/**/*.tsx",
-        "src/pages/api/**/*.ts"
-      ],
-      "rules": {
-        "import/no-default-export": "off"
-      }
-    },
-    {
-      // You can use brackets for dynamic routes.
-      // cf. https://nextjs.org/docs/getting-started/project-structure
-      "files": ["src/pages/**/*.tsx", "src/pages/api/**/*.ts"],
-      "rules": {
-        "unicorn/filename-case": [
-          "error",
-          {
-            "case": "kebabCase",
-            "ignore": ["^\\[.+\\]\\.tsx?$"]
-          }
-        ]
-      }
-    },
-    {
-      // Request handlers must have the same name as the HTTP methods name (uppercase, e.g. `GET`).
-      // https://nextjs.org/docs/app/api-reference/file-conventions/route
-      "files": ["src/app/api/**/route.ts"],
-      "rules": {
-        "@typescript-eslint/naming-convention": [
-          "error",
-          {
-            "selector": "default",
-            "format": ["camelCase"],
-            "leadingUnderscore": "allow",
-            "trailingUnderscore": "allow"
-          },
-          {
-            "selector": "parameter",
-            "format": ["camelCase"],
-            "leadingUnderscore": "allow"
-          },
-          {
-            "selector": "variable",
-            "format": ["camelCase", "PascalCase", "UPPER_CASE"],
-            // to use 'const ReactElem = () => { ...  };'
-            "leadingUnderscore": "allow",
-            "trailingUnderscore": "allow"
-          },
-          {
-            "selector": "typeLike",
-            "format": ["PascalCase"]
-          },
-          {
-            "selector": "enumMember",
-            "format": ["PascalCase"]
-          },
-          {
-            // allow any name when referring to import and property
-            "selector": ["import", "property"],
-            "format": null
-          },
-          {
-            // allow any name in object destructuring of variable
-            "selector": "variable",
-            "modifiers": ["destructured"],
-            "format": null
-          },
-          {
-            // allow any name in object destructuring of parameter
-            "selector": "parameter",
-            "modifiers": ["destructured"],
-            "format": null
-          },
-          {
-            "filter": "^(?:DELETE|GET|HEAD|OPTIONS|PATCH|POST|PUT)$",
-            "selector": "function",
-            "modifiers": ["exported"],
-            "format": null
-          }
-        ]
-      }
-    }
-  ]
-}