@codfish/eslint-config 12.2.0 → 13.0.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)
@@ -18,10 +18,16 @@
 - [Installation](#installation)
 - [Usage](#usage)
   - [Opinionated Highlights](#opinionated-highlights)
+- [IDE Setup](#ide-setup)
+  - [VS Code / Cursor](#vs-code--cursor)
 - [Prettier Configuration](#prettier-configuration)
   - [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 -->
@@ -29,14 +35,14 @@
 
 ## 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
 - **Next.js support**: Automatically configures Next.js official plugin linting rules when detected
 - **Test framework agnostic**: Supports Jest and Vitest with automatic detection
 - **Testing Library integration**: Automatically includes Testing Library rules for test files
-- **YAML/YML support**: Built-in linting for YAML configuration files
+- **Multi-format support**: Built-in linting and formatting for Markdown, HTML, JSON, YAML/YML files
 - **Prettier integration**: Built-in Prettier configuration with conflict resolution via eslint-config-prettier
 - **ESM architecture**: Built with ECMAScript modules and full TypeScript typing
 - **Docker support**: Optional configuration for dockerized applications
@@ -47,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.
@@ -58,6 +64,7 @@ npm uninstall typescript-eslint \
   eslint-plugin-prettier \
   eslint-plugin-react \
   eslint-plugin-react-hooks \
+  @tanstack/eslint-plugin-query \
   eslint-plugin-simple-import-sort \
   eslint-plugin-testing-library \
   eslint-plugin-yml \
@@ -65,14 +72,15 @@ npm uninstall typescript-eslint \
   eslint-plugin-next \
   commitlint \
   @commitlint/cli \
-  @commitlint/config-conventional
+  @commitlint/config-conventional \
+  prettier # optional, see note
 ```
 
 > [!NOTE]
 >
-> Optionally, you can uninstall prettier as well. If you don't have prettier installed already but you want to format
-> other file types (like Markdown, JSON, CSS, etc.), you can install it as a dev dependency: `npm i -D prettier`. Then
-> you can use Prettier to format your non-JS files directly. Eslint will still run Prettier as an ESLint rule.
+> ESLint now handles linting and formatting for JavaScript, TypeScript, Markdown, HTML, JSON, and YAML files
+> automatically. If you want to format additional file types (like CSS, SCSS, etc.), you can leave Prettier installed as
+> a dev dependency in your project.
 
 ## Usage
 
@@ -279,10 +287,47 @@ This configuration includes some opinionated settings that you might want to cus
 See the [configuration examples below](#usage) for instructions on overriding these settings to match your team's
 preferences.
 
+## IDE Setup
+
+### VS Code / Cursor
+
+For the best development experience with VS Code or Cursor (or any VS Code-based IDE), install the
+[ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and configure it to
+auto-fix on save:
+
+Add these settings to your `.vscode/settings.json` or user settings:
+
+```json
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit"
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "markdown",
+    "json",
+    "jsonc",
+    "html",
+    "yml",
+    "yaml"
+  ]
+}
+```
+
+This configuration enables:
+
+- Automatic linting and formatting on save for all supported file types
+- ESLint validation for Markdown, JSON, YAML, and HTML files
+- A unified development experience across your entire codebase
+
 ## Prettier Configuration
 
-**Prettier is included and runs automatically** through ESLint for JavaScript, TypeScript, JSX, and TSX files using the
-[built-in configuration](./prettier.js). **You don't need to install or configure Prettier separately** for basic usage.
+**Prettier is included and runs automatically** through ESLint for JavaScript, TypeScript, JSX, TSX, Markdown, HTML,
+JSON, and YAML files using the [built-in configuration](./prettier.js). **You don't need to install or configure
+Prettier separately** for these file types.
 
 You can then override the default config by creating your own Prettier config file, or extend the built-in config:
 
@@ -338,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
@@ -359,7 +404,7 @@ export default {
 
 Optionally, you can add these scripts to your `package.json` for common linting workflows:
 
-**Basic scripts (no separate Prettier installation needed):**
+**Recommended scripts:**
 
 ```json
 {
@@ -368,24 +413,32 @@ Optionally, you can add these scripts to your `package.json` for common linting
     "fix": "eslint . --fix"
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": ["eslint --fix"]
+    "*.{js,jsx,ts,tsx,md,json,yml,yaml,html}": ["eslint --fix"]
   }
 }
 ```
 
-**With Prettier installed separately (for formatting non-JS files):**
+> [!NOTE]
+>
+> ESLint now handles linting and formatting for JavaScript, TypeScript, Markdown, HTML, JSON, and YAML files. You don't
+> need to run Prettier separately for these file types.
+
+**With Prettier for other file types (CSS, SCSS, etc.):**
+
+If you want to format additional file types not covered by ESLint (like CSS, SCSS), you can install Prettier and add
+these scripts:
 
 ```json
 {
   "scripts": {
     "lint": "eslint .",
     "fix": "eslint . --fix",
-    "format": "prettier --config ./node_modules/@codfish/eslint-config/prettier.js --write \"**/*.{json,css,md}\"",
+    "format": "prettier --write \"**/*.{css,scss}\"",
     "check": "npm run lint && npm run format -- --check --no-write"
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": ["eslint --fix"],
-    "*.{json,css,md}": ["prettier --write --config ./node_modules/@codfish/eslint-config/prettier.js"]
+    "*.{js,jsx,ts,tsx,md,json,yml,yaml,html}": ["eslint --fix"],
+    "*.{css,scss}": ["prettier --write"]
   }
 }
 ```
@@ -452,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/{jest.d.ts → tests.d.ts}

@@ -1,3 +1,3 @@
 declare const _default: import("eslint/config").Config[];
 export default _default;
-//# sourceMappingURL=jest.d.ts.map
+//# sourceMappingURL=tests.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tests.d.ts","sourceRoot":"","sources":["../../rules/tests.js"],"names":[],"mappings":""}

package/dist/tests/integration/eslint-execution.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=eslint-execution.spec.d.ts.map

package/dist/tests/integration/eslint-execution.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eslint-execution.spec.d.ts","sourceRoot":"","sources":["../../../tests/integration/eslint-execution.spec.js"],"names":[],"mappings":""}

package/dist/tests/integration/rule-application.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=rule-application.spec.d.ts.map

package/dist/tests/integration/rule-application.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rule-application.spec.d.ts","sourceRoot":"","sources":["../../../tests/integration/rule-application.spec.js"],"names":[],"mappings":""}

package/dist/tests/scenarios/edge-cases.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=edge-cases.spec.d.ts.map

package/dist/tests/scenarios/edge-cases.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"edge-cases.spec.d.ts","sourceRoot":"","sources":["../../../tests/scenarios/edge-cases.spec.js"],"names":[],"mappings":""}

package/dist/tests/unit/config-loading.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=config-loading.spec.d.ts.map

package/dist/tests/unit/config-loading.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-loading.spec.d.ts","sourceRoot":"","sources":["../../../tests/unit/config-loading.spec.js"],"names":[],"mappings":""}

package/dist/tests/unit/dynamic-detection.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dynamic-detection.spec.d.ts.map

package/dist/tests/unit/dynamic-detection.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-detection.spec.d.ts","sourceRoot":"","sources":["../../../tests/unit/dynamic-detection.spec.js"],"names":[],"mappings":""}

package/dist/tests/unit/utils.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=utils.spec.d.ts.map

package/dist/tests/unit/utils.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.spec.d.ts","sourceRoot":"","sources":["../../../tests/unit/utils.spec.js"],"names":[],"mappings":""}

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../utils.js"],"names":[],"mappings":"AA4BA,6EAKC;AAfgC,4CAA+D;AAA/D,+CAA+D;AAA/D,gDAA+D;AAMzF,8CAA8E;AAE9E,yDAAmE"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../utils.js"],"names":[],"mappings":"AAyBA,6EAKC;AAfgC,4CAA+D;AAA/D,+CAA+D;AAA/D,gDAA+D;AAMzF,8CAA8E;AAE9E,yDAAmE"}

package/index.js

@@ -1,6 +1,10 @@
 import js from '@eslint/js';
+import json from '@eslint/json';
+import markdown from '@eslint/markdown';
+import html from '@html-eslint/eslint-plugin';
+import htmlParser from '@html-eslint/parser';
 import { defineConfig } from 'eslint/config';
-import prettier from 'eslint-plugin-prettier/recommended';
+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';
@@ -8,26 +12,30 @@ import tseslint from 'typescript-eslint';
 
 import prettierBuiltInConfig from './prettier.js';
 import configFilesConfig from './rules/config-files.js';
-import jestConfig from './rules/jest.js';
 import reactConfig from './rules/react.js';
-import vitestConfig from './rules/vitest.js';
+import testConfig from './rules/tests.js';
 import { hasLocalConfig, ifAnyDep } from './utils.js';
 
 const useBuiltinPrettierConfig = !hasLocalConfig('prettier');
 
 /**
- * Modern ESLint configuration with dynamic feature detection
- * Supports TypeScript, React, Jest, Vitest, Prettier, YAML, and Next.js
+ * Modern ESLint configuration with dynamic feature detection.
+ * Supports TypeScript, React, Vitest, Prettier, YAML, and more.
+ *
+ * React ESLint configuration. Includes React, React Hooks, and JSX accessibility rules.
+ *   - https://github.com/jsx-eslint/eslint-plugin-react
+ *   - https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks
+ *   - https://github.com/jsx-eslint/eslint-plugin-jsx-a11y
  */
 export default defineConfig([
-  js.configs.recommended,
-
-  tseslint.configs.recommended,
-
   // Base opinionated rules
   {
     name: 'codfish/base',
 
+    files: ['**/*.{js,mjs,cjs,jsx,ts,mts,cts,tsx}'],
+
+    extends: [js.configs.recommended, tseslint.configs.recommended],
+
     plugins: {
       'simple-import-sort': simpleImportSortPlugin,
     },
@@ -75,41 +83,10 @@ export default defineConfig([
         },
       ],
       'simple-import-sort/exports': 'error',
+      'sort-imports': 'off',
 
-      // 2. 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'`
-      // More details in https://stackoverflow.com/questions/35250500/correct-way-to-import-lodash#answer-35251059
-      'no-restricted-imports': [
-        'error',
-        {
-          paths: [
-            {
-              name: 'lodash',
-              message: "Please use lodash-es direct import E.G: `import get from 'lodash-es/get'`",
-            },
-            {
-              name: 'lodash-es',
-              message: "Please use lodash-es direct import E.G: `import get from 'lodash-es/get'`",
-            },
-          ],
-          patterns: [
-            {
-              group: ['lodash/*'],
-              message: "Please use lodash-es direct import E.G: `import get from 'lodash-es/get'`",
-            },
-          ],
-        },
-      ],
-    },
-  },
-
-  {
-    name: 'codfish/ts-overrides',
-
-    files: ['**/*.ts', '**/*.tsx'],
-
-    rules: {
+      // 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',
@@ -131,6 +108,68 @@ export default defineConfig([
           '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"`
+      // More details in https://stackoverflow.com/questions/35250500/correct-way-to-import-lodash#answer-35251059
+      // 2. Prevent relative imports - use path aliases instead
+      // Use `@/` for src imports and `@tests/` for test imports
+      // 3. Prevent vitest globals imports - these are available globally
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: 'lodash',
+              message: 'Please use lodash-es direct import E.G: `import get from "lodash-es/get"`',
+            },
+            {
+              name: 'lodash-es',
+              message: 'Please use lodash-es direct import E.G: `import get from "lodash-es/get"`',
+            },
+            {
+              name: 'jest',
+              importNames: ['describe', 'expect', 'test', 'it', 'jest'],
+              message:
+                'These jest globals (describe, expect, test, it, jest) are available globally and should not be imported. Remove this import statement.',
+            },
+            {
+              name: 'vitest',
+              importNames: ['describe', 'expect', 'test', 'it', 'vi'],
+              message:
+                'These vitest globals (describe, expect, test, it, vi) are available globally and should not be imported. Remove this import statement.',
+            },
+          ],
+          patterns: [
+            {
+              group: ['lodash/*'],
+              message: 'Please use lodash-es direct import E.G: `import get from "lodash-es/get"`',
+            },
+            {
+              // Prevent relative imports going back 1+ directories. Use @/ or @tests/ aliases instead.
+              // Ensures consistent and cleaner import paths, and avoids confusing import hell with deeply nested files.
+              group: ['../*', '../../*', '../../../*', '../../../../*'],
+              message:
+                'Relative imports going back 1+ directories are not allowed. Use path aliases: @/ for src/*, @tests/ for tests/* imports. For example, instead of `import x from "../components/*"`, use `import x from "@/components/*"`',
+            },
+          ],
+        },
+      ],
     },
   },
 
@@ -175,21 +214,34 @@ export default defineConfig([
       '.expo',
       '**/tmp/',
       '**/temp/',
-      '.tmp',
+      '**/.tmp',
       '.nx',
-      '.eslintcache',
+      '**/.eslintcache',
       '*.tsbuildinfo',
       'node_modules',
       '**/node_modules/',
-      'pnpm-lock.yaml',
-      'pnpm-lock.*.yaml',
+      '**/pnpm-lock.yaml',
+      '**/pnpm-lock.*.yaml',
       '.history',
+      '**/.yarn',
+      '**/yarn.lock',
+      '**/package-lock.json',
+      '**/.yarnrc.yml',
+      'pacts',
+      '.claude',
+      '.__mf__temp',
     ],
   },
 
   // Configuration files (eslint, prettier, etc.)
   configFilesConfig,
 
+  // React configuration (dynamic)
+  ifAnyDep('react', reactConfig, []),
+
+  // Jest OR Vitest configuration (dynamic)
+  ifAnyDep(['jest', 'vitest'], testConfig, []),
+
   // YML files
   ymlPlugin.configs['flat/standard'],
   ymlPlugin.configs['flat/prettier'], // handles conflicting rules with the yml plugin
@@ -204,24 +256,67 @@ export default defineConfig([
     },
   },
 
-  // React configuration (dynamic)
-  ifAnyDep('react', reactConfig, []),
+  // JSON files
+  {
+    name: 'codfish/json',
+    files: ['**/*.json'],
+    ignores: ['**/tsconfig*.json', '**/package-lock.json'],
+    plugins: { json },
+    language: 'json/json',
+    extends: ['json/recommended'],
+  },
 
-  // Jest OR Vitest configuration (dynamic)
-  ifAnyDep('jest', jestConfig, []),
+  // JSONC files (JSON with Comments) - for files that allow comments
+  {
+    name: 'codfish/jsonc',
+    files: ['**/*.jsonc'],
+    plugins: { json },
+    language: 'json/jsonc',
+    extends: ['json/recommended'],
+  },
 
-  // Vitest configuration (dynamic)
-  ifAnyDep('vitest', vitestConfig, []),
+  // JSON5 files - for TypeScript configs (supports comments AND trailing commas)
+  {
+    name: 'codfish/json5',
+    files: ['**/tsconfig*.json', '**/*.json5'],
+    plugins: { json },
+    language: 'json/json5',
+    extends: ['json/recommended'],
+  },
+
+  // Markdown files
+  {
+    name: 'codfish/markdown',
+    files: ['**/*.md'],
+    plugins: { markdown },
+    extends: ['markdown/recommended'],
+    rules: {
+      // Allow GitHub-style alerts and checkbox syntax (task lists)
+      'markdown/no-missing-label-refs': [
+        'error',
+        { allowLabels: ['!NOTE', '!WARNING', '!IMPORTANT', '!TIP', '!CAUTION', '', 'x', 'X'] },
+      ],
+    },
+  },
+
+  // HTML files
+  {
+    name: 'codfish/html',
+    files: ['**/*.html'],
+    plugins: { html },
+    languageOptions: { parser: htmlParser },
+  },
 
   // Prettier plugin is responsible for running prettier as an ESLint
   // rule and turning off ESLint rules that might conflict.
   // IMPORTANT: KEEP THIS LAST TO OVERRIDE ESLINT!
-  prettier,
-
   {
+    files: ['**/*.{js,ts,jsx,tsx,md,yml,yaml,html,json,jsonc,json5}'],
+
+    extends: [prettierConfig],
+
     rules: {
-      // Reset prettier rule passing in codfish's prettier config.
-      // IMPORTANT: KEEP THIS LAST TO OVERRIDE PRETTIER PLUGIN!
+      // Reset prettier rule passing in custom prettier config.
       'prettier/prettier': useBuiltinPrettierConfig ? ['error', prettierBuiltInConfig] : 'error',
     },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codfish/eslint-config",
-  "version": "12.2.0",
+  "version": "13.0.0",
   "description": "Modern ESLint configuration with TypeScript, React, and testing framework support.",
   "type": "module",
   "repository": {
@@ -45,47 +45,54 @@
   "scripts": {
     "build": "tsc --emitDeclarationOnly",
     "dev": "tsc --watch",
-    "type-check": "tsc --noEmit",
-    "lint": "eslint .",
-    "fix": "prettier --write \"**/*.{json,css,scss,md}\" --config ./prettier.js && npm run lint -- --fix",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint",
+    "format": "eslint --fix",
     "test": "vitest",
-    "test:watch": "vitest --watch",
     "test:coverage": "vitest --coverage",
     "prepublishOnly": "npm run build",
     "prepare": "husky"
   },
   "dependencies": {
-    "@commitlint/cli": "^19.8.1",
-    "@commitlint/config-conventional": "^19.8.1",
-    "@eslint/js": "^9.35.0",
-    "@vitest/eslint-plugin": "^1.3.10",
+    "@commitlint/cli": "^20.4.1",
+    "@commitlint/config-conventional": "^20.4.1",
+    "@eslint/js": "^10.0.0",
+    "@eslint/json": "^1.0.1",
+    "@eslint/markdown": "^7.5.1",
+    "@html-eslint/eslint-plugin": "^0.55.0",
+    "@html-eslint/parser": "^0.55.0",
+    "@next/eslint-plugin-next": "^16.1.6",
+    "@tanstack/eslint-plugin-query": "^5.91.4",
+    "@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.14.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": "^5.2.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-testing-library": "^7.1.0",
-    "eslint-plugin-yml": "^1.16.0",
-    "@next/eslint-plugin-next": "^15.1.6",
-    "globals": "^16.4.0",
+    "eslint-plugin-testing-library": "^7.15.4",
+    "eslint-plugin-yml": "^3.1.2",
+    "globals": "^17.3.0",
     "lodash.has": "^4.5.2",
-    "prettier": "^3.6.2",
-    "read-package-up": "^11.0.0",
-    "typescript-eslint": "^8.44.0"
+    "prettier": ">= 3",
+    "read-package-up": "^12.0.0",
+    "typescript-eslint": "^8.55.0"
   },
   "devDependencies": {
+    "@types/node": "^25.2.3",
+    "@vitest/coverage-v8": "^4.0.18",
     "doctoc": "^2.2.1",
-    "eslint": "^9.35.0",
+    "eslint": "^10.0.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.1.6",
     "typescript": "^5.9.2",
-    "vitest": "^1.0.0"
+    "vitest": "^4.0.18"
   },
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=20.19.0"
   },
   "files": [
     "dist",
@@ -98,7 +105,7 @@
     "commitlint.js"
   ],
   "peerDependencies": {
-    "eslint": ">= 9",
+    "eslint": ">= 10",
     "prettier": ">= 3"
   },
   "peerDependenciesMeta": {
@@ -121,6 +128,6 @@
     ]
   },
   "volta": {
-    "node": "24.8.0"
+    "node": "24.13.0"
   }
 }

package/rules/react.js

@@ -1,8 +1,10 @@
 import nextPlugin from '@next/eslint-plugin-next';
+import tanstackQuery from '@tanstack/eslint-plugin-query';
 import { defineConfig } from 'eslint/config';
 import jsxA11y from 'eslint-plugin-jsx-a11y';
 import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
 import globals from 'globals';
 
 import { ifAnyDep } from '../utils.js';
@@ -18,10 +20,17 @@ export default defineConfig([
   {
     name: 'codfish/react',
 
-    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
+    files: ['**/*.jsx', '**/*.tsx', '**/*.mjsx', '**/*.mtsx'],
 
-    ...react.configs.flat.recommended,
-    ...jsxA11y.flatConfigs.recommended,
+    extends: [
+      react.configs.flat.recommended,
+      reactHooks.configs.flat['recommended-latest'],
+      reactRefresh.configs.recommended,
+      jsxA11y.flatConfigs.recommended,
+      ifAnyDep('@tanstack/react-query', tanstackQuery.configs['flat/recommended']),
+      ifAnyDep('next', nextPlugin.configs.recommended),
+      ifAnyDep('next', nextPlugin.configs['core-web-vitals']),
+    ].filter(Boolean),
 
     languageOptions: {
       globals: {
@@ -29,26 +38,47 @@ export default defineConfig([
         ...globals.browser,
       },
     },
-  },
 
-  // React Hooks configuration
-  reactHooks.configs['recommended-latest'],
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+
+    rules: {
+      // React 17+ uses automatic JSX runtime, no need to import React
+      'react/react-in-jsx-scope': 'off',
+      'react/jsx-uses-react': 'off',
+
+      // TypeScript provides type checking, no need for PropTypes
+      'react/prop-types': 'off',
 
-  // Next.js configuration (dynamic)
-  ifAnyDep(
-    'next',
-    {
-      ...(nextPlugin?.flatConfig?.recommended || {}),
-      ...(nextPlugin?.flatConfig?.coreWebVitals || {}),
+      // this rule is too noisey and doesn't account for certain valid use cases
+      'react-hooks/exhaustive-deps': 'off',
+
+      // sometimes autoFocus is needed for better UX. @todo - revisit later?
+      'jsx-a11y/no-autofocus': 'off',
+
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
 
-      name: 'codfish/next',
+      ...ifAnyDep('@tanstack/react-query', { '@tanstack/query/exhaustive-deps': 'error' }, {}),
+
+      ...ifAnyDep(
+        'next',
+        {
+          // annoying cause this is common in Next.js, i.e. generateMetadata()
+          'react-refresh/only-export-components': ['off'],
+        },
+        {},
+      ),
     },
-    {},
-  ),
+  },
 
   {
+    name: 'codfish/react-next-config',
+    files: ['next.config.js', 'next.config.ts'],
     rules: {
-      'react-hooks/exhaustive-deps': 'off',
+      'require-await': 'off',
     },
   },
 ]);

package/rules/tests.js

@@ -0,0 +1,52 @@
+import vitest from '@vitest/eslint-plugin';
+import { defineConfig } from 'eslint/config';
+import jest from 'eslint-plugin-jest';
+import testingLibrary from 'eslint-plugin-testing-library';
+import globals from 'globals';
+
+import { ifAnyDep } from '../utils.js';
+
+/**
+ * Jest ESLint configuration for flat config format
+ * Includes Jest-specific rules, globals, and Testing Library rules for test files
+ */
+export default defineConfig({
+  name: 'codfish/tests',
+
+  files: [
+    '**/*.{spec,test}.{js,ts,jsx,tsx}',
+    '**/tests/**/*.{js,ts,jsx,tsx}',
+    '**/__mocks__/**/*.{js,ts,jsx,tsx}',
+    '**/__tests__/**/*.{js,ts,jsx,tsx}',
+    '**/jest.config.{js,ts}',
+    '**/jest.setup.{js,ts}',
+    '**/vitest.config.{js,ts}',
+    '**/vitest.setup.{js,ts}',
+    '**/setupTests.{js,ts}',
+    '**/testUtils.{js,ts}',
+    'tests/**/*.{js,ts,jsx,tsx}',
+  ],
+
+  extends: [
+    ifAnyDep('jest', jest.configs['flat/recommended'], false),
+    ifAnyDep('vitest', vitest.configs.recommended, false),
+    ifAnyDep('@testing-library/dom', testingLibrary.configs['flat/dom'], false),
+    ifAnyDep('@testing-library/react', testingLibrary.configs['flat/react'], false),
+    ifAnyDep('@testing-library/vue', testingLibrary.configs['flat/vue'], false),
+    ifAnyDep('@testing-library/svelte', testingLibrary.configs['flat/svelte'], false),
+    ifAnyDep('@testing-library/angular', testingLibrary.configs['flat/angular'], false),
+    ifAnyDep('@testing-library/marko', testingLibrary.configs['flat/marko'], false),
+  ].filter(Boolean),
+
+  languageOptions: {
+    globals: {
+      ...globals.node,
+      ...ifAnyDep('jest', globals.jest, {}),
+      ...ifAnyDep('vitest', globals.vitest, {}),
+    },
+  },
+
+  rules: {
+    'no-console': 'off',
+  },
+});

package/utils.js

@@ -8,12 +8,9 @@
 import fs from 'node:fs';
 import { cosmiconfigSync } from 'cosmiconfig';
 import has from 'lodash.has';
-import { readPackageUp } from 'read-package-up';
+import { readPackageUpSync } from 'read-package-up';
 
-const { packageJson: pkg, path: pkgPath } =
-  (await readPackageUp({
-    cwd: fs.realpathSync(process.cwd()),
-  })) || {};
+const { packageJson: pkg, path: pkgPath } = readPackageUpSync({ cwd: fs.realpathSync(process.cwd()) }) || {};
 
 const hasPkgProp = props => [props].flat().some(prop => has(pkg, prop));
 const hasPkgSubProp = pkgProp => props => hasPkgProp([props].flat().map(p => `${pkgProp}.${p}`));

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

@@ -1 +0,0 @@
-{"version":3,"file":"jest.d.ts","sourceRoot":"","sources":["../../rules/jest.js"],"names":[],"mappings":""}

package/dist/rules/vitest.d.ts

@@ -1,3 +0,0 @@
-declare const _default: import("eslint/config").Config[];
-export default _default;
-//# sourceMappingURL=vitest.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"vitest.d.ts","sourceRoot":"","sources":["../../rules/vitest.js"],"names":[],"mappings":""}

package/rules/jest.js

@@ -1,34 +0,0 @@
-import { defineConfig } from 'eslint/config';
-import jest from 'eslint-plugin-jest';
-import testingLibrary from 'eslint-plugin-testing-library';
-
-import { ifAnyDep } from '../utils.js';
-
-/**
- * Jest ESLint configuration for flat config format
- * Includes Jest-specific rules, globals, and Testing Library rules for test files
- */
-export default defineConfig([
-  {
-    name: 'codfish/jest',
-
-    files: [
-      '**/__tests__/**/*.{js,ts,jsx,tsx}',
-      '**/*.{test,spec}.{js,ts,jsx,tsx}',
-      '**/jest.config.{js,ts}',
-      '**/jest.setup.{js,ts}',
-      '**/setupTests.{js,ts}',
-      '**/testUtils.{js,ts}',
-      'tests/**/*.{js,ts,jsx,tsx}',
-    ],
-
-    ...jest.configs['flat/recommended'],
-
-    ...ifAnyDep('react-testing-library', testingLibrary.configs['flat/react'], {}),
-    ...ifAnyDep('vue-testing-library', testingLibrary.configs['flat/vue'], {}),
-
-    rules: {
-      'no-console': 'off',
-    },
-  },
-]);

package/rules/vitest.js

@@ -1,39 +0,0 @@
-import vitest from '@vitest/eslint-plugin';
-import { defineConfig } from 'eslint/config';
-import testingLibrary from 'eslint-plugin-testing-library';
-import globals from 'globals';
-
-import { ifAnyDep } from '../utils.js';
-
-/**
- * Vitest ESLint configuration for flat config format
- * Includes Vitest-specific rules, globals, and Testing Library rules for test files
- */
-export default defineConfig([
-  {
-    files: [
-      '**/*.{spec,test}.{js,ts,jsx,tsx}',
-      '**/tests/**/*.{js,ts,jsx,tsx}',
-      '**/__mocks__/**/*.{js,ts,jsx,tsx}',
-      '**/__tests__/**/*.{js,ts,jsx,tsx}',
-    ],
-
-    ...vitest.configs.recommended,
-
-    ...ifAnyDep('react-testing-library', testingLibrary.configs['flat/react'], {}),
-    ...ifAnyDep('vue-testing-library', testingLibrary.configs['flat/vue'], {}),
-
-    name: 'codfish/vitest',
-
-    languageOptions: {
-      globals: {
-        ...vitest.environments.env.globals,
-        ...globals.node,
-      },
-    },
-
-    rules: {
-      'no-console': 'off',
-    },
-  },
-]);