@codfish/eslint-config 12.3.0 → 13.1.0

package/README.md

@@ -1,7 +1,7 @@
 # @codfish/eslint-config
 
 > Modern ESLint configuration with TypeScript, React/Next.js, YAML, Testing Library, and testing framework support using
-> ESLint v9+ flat config format.
+> ESLint v10+ flat config format.
 
 [![version](https://img.shields.io/npm/v/@codfish/eslint-config.svg)](http://npm.im/@codfish/eslint-config)
 [![downloads](https://img.shields.io/npm/dm/@codfish/eslint-config.svg)](http://npm-stat.com/charts.html?package=@codfish/eslint-config&from=2015-08-01)
@@ -24,6 +24,10 @@
   - [Use in combination with prettier-plugin-tailwindcss](#use-in-combination-with-prettier-plugin-tailwindcss)
 - [Example scripts](#example-scripts)
 - [Commitlint Configuration](#commitlint-configuration)
+- [Upgrading to ESLint 10](#upgrading-to-eslint-10)
+  - [Breaking Changes in ESLint 10](#breaking-changes-in-eslint-10)
+  - [Migration Steps](#migration-steps)
+  - [What Changed](#what-changed)
 - [Migration from Legacy Config](#migration-from-legacy-config)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
@@ -31,7 +35,7 @@
 
 ## Features
 
-- **Modern ESLint v9+ flat config**: Uses the new flat configuration format
+- **Modern ESLint v10+ flat config**: Uses the new flat configuration format
 - **Dynamic feature detection**: Automatically configures based on your project's dependencies
 - **TypeScript support**: Full TypeScript linting with modern typescript-eslint parser and rules
 - **React ecosystem**: React, React Hooks, and JSX accessibility rules when React is detected
@@ -49,7 +53,7 @@
 Install the package and required peer dependencies:
 
 ```sh
-npm i -D eslint@9 @codfish/eslint-config
+npm i -D eslint@10 @codfish/eslint-config
 
 # Optionally, you can uninstall plugins or presets you don't need to manage anymore,
 # @codfish/eslint-config includes them all.
@@ -379,7 +383,7 @@ export default {
 ### Use in combination with prettier-plugin-tailwindcss
 
 ```sh
-npm i -D eslint@9 @codfish/eslint-config prettier-plugin-tailwindcss
+npm i -D eslint@10 @codfish/eslint-config prettier-plugin-tailwindcss
 ```
 
 ```js
@@ -501,11 +505,72 @@ jobs:
           --verbose
 ```
 
+## Upgrading to ESLint 10
+
+This package now requires **ESLint 10.0.0 or higher** and **Node.js v20.19.0 or higher**.
+
+### Breaking Changes in ESLint 10
+
+- **ESLint 10 Required**: Minimum ESLint version is now 10.0.0
+- **Node.js v20.19.0+**: Minimum Node.js version increased from v20.0.0 to v20.19.0
+- **Legacy eslintrc removed**: ESLint 10 completely removes the deprecated eslintrc config system (this package already
+  uses flat config)
+- **Improved JSX tracking**: ESLint 10 properly tracks JSX references in scope analysis, which may surface previously
+  hidden unused import warnings in React files
+- **New recommended rules**: Three new rules enabled in `eslint:recommended`:
+  - `no-unassigned-vars` - Disallow variables that are assigned but never used
+  - `no-useless-assignment` - Disallow assignments that don't change the value
+  - `preserve-caught-error` - Enforce that caught errors are not reassigned
+
+### Migration Steps
+
+1. **Update Node.js** (if needed):
+
+   ```sh
+   node --version  # Ensure you're on v20.19.0+ or v22.13.0+
+   ```
+
+2. **Update ESLint and this config**:
+
+   ```sh
+   npm install --save-dev eslint@10 @codfish/eslint-config@latest
+   ```
+
+3. **Install dependencies with legacy peer deps** (required until all plugins update):
+
+   ```sh
+   npm install --legacy-peer-deps
+   ```
+
+   This is necessary because some ESLint plugins haven't updated their `peerDependencies` to include ESLint 10 yet. The
+   plugins still work correctly with ESLint 10.
+
+4. **Run linting** and check for new violations:
+
+   ```sh
+   npm run lint
+   ```
+
+5. **Review React files** for newly reported unused imports. ESLint 10's improved JSX tracking may flag imports that
+   were previously ignored but are actually used in JSX.
+
+### What Changed
+
+Since this package already uses ESLint's flat config format (the biggest change in ESLint 9), the upgrade to ESLint 10
+is relatively smooth. The main changes are:
+
+- ✅ Flat config format (already implemented)
+- ✅ Plugin configurations updated to ESLint 10-compatible versions
+- ✅ All tests passing with ESLint 10
+- ⚠️ Some plugins show peer dependency warnings but work correctly (ecosystem is catching up)
+
+For more details, see the [ESLint 10 Migration Guide](https://eslint.org/docs/latest/use/migrate-to-10.0.0).
+
 ## Migration from Legacy Config
 
 If you're upgrading from an older version that used Airbnb presets:
 
-1. **Update to ESLint v9+**: `npm install --save-dev eslint@9`
+1. **Update to ESLint v10+**: `npm install --save-dev eslint@10`
 2. **Switch to flat config**: Replace `.eslintrc.js` with `eslint.config.js`
 3. **Use import syntax**: Change from `require()` to `import` statements
 4. **Remove explicit React config**: React support is now automatically detected

package/dist/rules/typescript.d.ts

@@ -0,0 +1,38 @@
+export default tseslintConfig;
+export const rules: {
+    '@typescript-eslint/no-unused-vars': (string | {
+        ignoreRestSiblings: boolean;
+    })[];
+    '@typescript-eslint/no-empty-function': string;
+    '@typescript-eslint/naming-convention': (string | {
+        selector: string[];
+        format: string[];
+        custom: {
+            regex: string;
+            match: boolean;
+        };
+    })[];
+    '@typescript-eslint/ban-ts-comment': (string | {
+        'ts-ignore': string;
+        'ts-expect-error': string;
+        'ts-nocheck': string;
+    })[];
+    '@typescript-eslint/no-restricted-types': (string | {
+        types: {
+            'React.FC': {
+                message: string;
+            };
+            'React.FunctionComponent': {
+                message: string;
+            };
+        };
+    })[];
+} | {
+    '@typescript-eslint/no-unused-vars'?: never;
+    '@typescript-eslint/no-empty-function'?: never;
+    '@typescript-eslint/naming-convention'?: never;
+    '@typescript-eslint/ban-ts-comment'?: never;
+    '@typescript-eslint/no-restricted-types'?: never;
+};
+declare const tseslintConfig: import("eslint").Linter.Config[];
+//# sourceMappingURL=typescript.d.ts.map

package/dist/rules/typescript.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typescript.d.ts","sourceRoot":"","sources":["../../rules/typescript.js"],"names":[],"mappings":";AAeA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCO;AA9CP,8BACa,OAAO,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,CACsC"}

package/index.js

@@ -8,14 +8,13 @@ import prettierConfig from 'eslint-plugin-prettier/recommended';
 import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';
 import ymlPlugin from 'eslint-plugin-yml';
 import globals from 'globals';
-import tseslint from 'typescript-eslint';
 
 import prettierBuiltInConfig from './prettier.js';
 import configFilesConfig from './rules/config-files.js';
 import reactConfig from './rules/react.js';
 import testConfig from './rules/tests.js';
+import tseslintConfig, { rules as tsRules } from './rules/typescript.js';
 import { hasLocalConfig, ifAnyDep } from './utils.js';
-
 const useBuiltinPrettierConfig = !hasLocalConfig('prettier');
 
 /**
@@ -34,7 +33,7 @@ export default defineConfig([
 
     files: ['**/*.{js,mjs,cjs,jsx,ts,mts,cts,tsx}'],
 
-    extends: [js.configs.recommended, tseslint.configs.recommended],
+    extends: [js.configs.recommended, ...tseslintConfig],
 
     plugins: {
       'simple-import-sort': simpleImportSortPlugin,
@@ -43,6 +42,9 @@ export default defineConfig([
     languageOptions: {
       ecmaVersion: 'latest',
       sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
       globals: {
         ...globals.browser,
         ...globals.node,
@@ -54,8 +56,10 @@ export default defineConfig([
       // Error handling rules to enforce using the Error object
       'no-throw-literal': 'error',
       'prefer-promise-reject-errors': 'error',
+      'no-unused-vars': ['error', { ignoreRestSiblings: true }],
+      'no-empty-function': 'off',
 
-      // Asynchronous functions that don’t use await might not need to be asynchronous functions
+      // Asynchronous functions that don't use await might not need to be asynchronous functions
       // Usually result of refactoring, leads to misunderstanding/misusage
       'require-await': 'error',
 
@@ -85,44 +89,6 @@ export default defineConfig([
       'simple-import-sort/exports': 'error',
       'sort-imports': 'off',
 
-      // Allows destructuring of rest properties even if they are unused
-      '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true }],
-      '@typescript-eslint/no-empty-function': 'off',
-      '@typescript-eslint/naming-convention': [
-        'error',
-        {
-          selector: ['interface', 'typeAlias'],
-          format: ['PascalCase'],
-          custom: {
-            regex: '^I[A-Z]', // prevent prefixing interfaces and type alias declarations with "I"
-            match: false,
-          },
-        },
-      ],
-      '@typescript-eslint/ban-ts-comment': [
-        'error',
-        {
-          // If you need to use a ts comment, make sure you have a description.
-          'ts-ignore': 'allow-with-description',
-          'ts-expect-error': 'allow-with-description',
-          'ts-nocheck': 'allow-with-description',
-        },
-      ],
-
-      '@typescript-eslint/no-restricted-types': [
-        'error',
-        {
-          types: {
-            'React.FC': {
-              message: 'Useless and has some drawbacks, see https://github.com/facebook/create-react-app/pull/8177',
-            },
-            'React.FunctionComponent': {
-              message: 'Useless and has some drawbacks, see https://github.com/facebook/create-react-app/pull/8177',
-            },
-          },
-        },
-      ],
-
       // 1. Encouraging `lodash-es` imports per file
       // lodash imports should use `lodash-es` package and should be imported per file.
       //    E.G: `import get from "lodash-es/get"`
@@ -170,6 +136,9 @@ export default defineConfig([
           ],
         },
       ],
+
+      // TypeScript rules (empty object when typescript is not installed)
+      ...tsRules,
     },
   },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codfish/eslint-config",
-  "version": "12.3.0",
+  "version": "13.1.0",
   "description": "Modern ESLint configuration with TypeScript, React, and testing framework support.",
   "type": "module",
   "repository": {
@@ -54,44 +54,45 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@commitlint/cli": "^20.4.0",
-    "@commitlint/config-conventional": "^20.4.0",
-    "@eslint/js": "^9.35.0",
-    "@eslint/json": "^1.0.0",
+    "@commitlint/cli": "^20.4.2",
+    "@commitlint/config-conventional": "^20.4.2",
+    "@eslint/js": "^10.0.0",
+    "@eslint/json": "^1.0.1",
     "@eslint/markdown": "^7.5.1",
-    "@html-eslint/eslint-plugin": "^0.54.2",
-    "@html-eslint/parser": "^0.54.0",
+    "@html-eslint/eslint-plugin": "^0.57.1",
+    "@html-eslint/parser": "^0.57.1",
     "@next/eslint-plugin-next": "^16.1.6",
     "@tanstack/eslint-plugin-query": "^5.91.4",
-    "@vitest/eslint-plugin": "^1.3.10",
+    "@vitest/eslint-plugin": "^1.6.9",
     "cosmiconfig": "^9.0.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-jest": "^29.0.1",
+    "eslint-plugin-jest": "^29.15.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.0",
+    "eslint-plugin-react-refresh": "^0.5.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-testing-library": "^7.1.0",
-    "eslint-plugin-yml": "^3.0.0",
+    "eslint-plugin-testing-library": "^7.16.0",
+    "eslint-plugin-yml": "^3.3.0",
     "globals": "^17.3.0",
     "lodash.has": "^4.5.2",
     "prettier": ">= 3",
     "read-package-up": "^12.0.0",
-    "typescript-eslint": "^8.44.0"
+    "typescript-eslint": "^8.56.1"
   },
   "devDependencies": {
+    "@types/node": "^25.3.3",
     "@vitest/coverage-v8": "^4.0.18",
-    "doctoc": "^2.2.1",
-    "eslint": "^9.35.0",
+    "doctoc": "^2.3.0",
+    "eslint": "^10.0.2",
     "husky": "^9.1.7",
-    "lint-staged": "^16.1.6",
+    "lint-staged": "^16.3.0",
     "typescript": "^5.9.2",
     "vitest": "^4.0.18"
   },
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=20.19.0"
   },
   "files": [
     "dist",
@@ -104,7 +105,7 @@
     "commitlint.js"
   ],
   "peerDependencies": {
-    "eslint": ">= 9",
+    "eslint": ">= 10",
     "prettier": ">= 3"
   },
   "peerDependenciesMeta": {
@@ -127,6 +128,6 @@
     ]
   },
   "volta": {
-    "node": "24.8.0"
+    "node": "24.14.0"
   }
 }

package/rules/typescript.js

@@ -0,0 +1,56 @@
+import { hasAnyDep } from '../utils.js';
+
+/**
+ * TypeScript ESLint configuration. Dynamically loads typescript-eslint
+ * only when typescript is installed in the consuming project.
+ *
+ * - https://typescript-eslint.io/
+ */
+const hasTypeScript = hasAnyDep('typescript');
+const tseslintConfig =
+  /** @type {import('eslint').Linter.Config[]} */
+  (hasTypeScript ? [(await import('typescript-eslint')).configs.recommended] : []);
+
+export default tseslintConfig;
+
+export const rules = hasTypeScript
+  ? {
+      // Allows destructuring of rest properties even if they are unused
+      '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true }],
+      '@typescript-eslint/no-empty-function': 'off',
+      '@typescript-eslint/naming-convention': [
+        'error',
+        {
+          selector: ['interface', 'typeAlias'],
+          format: ['PascalCase'],
+          custom: {
+            regex: '^I[A-Z]', // prevent prefixing interfaces and type alias declarations with "I"
+            match: false,
+          },
+        },
+      ],
+      '@typescript-eslint/ban-ts-comment': [
+        'error',
+        {
+          // If you need to use a ts comment, make sure you have a description.
+          'ts-ignore': 'allow-with-description',
+          'ts-expect-error': 'allow-with-description',
+          'ts-nocheck': 'allow-with-description',
+        },
+      ],
+
+      '@typescript-eslint/no-restricted-types': [
+        'error',
+        {
+          types: {
+            'React.FC': {
+              message: 'Useless and has some drawbacks, see https://github.com/facebook/create-react-app/pull/8177',
+            },
+            'React.FunctionComponent': {
+              message: 'Useless and has some drawbacks, see https://github.com/facebook/create-react-app/pull/8177',
+            },
+          },
+        },
+      ],
+    }
+  : {};