@fullstacksjs/eslint-config 11.8.1 → 11.10.0

package/README.md

@@ -16,29 +16,37 @@
 $ npm install --save-dev @fullstacksjs/eslint-config eslint prettier
 ```
 
+⚡️ That's it, you don't need to install any eslint-plugin!  If you already have some plugins installed, please remove them.
+
 ## Usage
 
-To use the configuration, all you need is to export the generated config by the `init` function. The configuration reads the metadata from your root `package.json` file and automatically adds the rules and plugins that are needed.
+To use the configuration, all you need is to export the generated config by the `defineConfig` function. It automatically enables required plugins with **Auto Module Detection**.
 
 ### ESM
 
 ```js
-import { init } from '@fullstacksjs/eslint-config';
+import { defineConfig } from '@fullstacksjs/eslint-config';
 
-export default init();
+export default defineConfig();
 ```
 
 ### CJS
 
 ```js
-const { init } = require('@fullstacksjs/eslint-config');
+const { defineConfig } = require('@fullstacksjs/eslint-config');
 
-module.exports = init();
+module.exports = defineConfig();
 ```
 
-## Modules API
+## How Module Detection Works
+
+Automatic module detection enables ESLint plugins based on the dependencies listed in your `package.json`. It scans your project to identify which tools you're using, and then activates the corresponding ESLint plugins accordingly.
+
+For example, if your `package.json` includes `vitest` as a dependency, the configuration will automatically enable `eslint-plugin-vitest` for you. (You don't need to install the plugin itself)
 
-You can fine-tune module detection by overriding it, the `init` function accepts options as its first argument to control enabled modules.
+### Modules API
+
+You can fine-tune module detection by overriding it, the `defineConfig` function accepts options as its first argument to control enabled modules.
 
 ```typescript
 interface Options {
@@ -69,14 +77,14 @@ interface Options {
 }
 ```
 
-## Extra configuration
+## What if I want to add my one rules
 
-You can pass any number of arbitrary custom config overrides to `init` function:
+You can pass any number of arbitrary custom config overrides to `defineConfig` function:
 
 ```js
-import { init } from '@fullstacksjs/eslint-config';
+import { defineConfig } from '@fullstacksjs/eslint-config';
 
-export default init(
+export default defineConfig(
   {
     typescript: true,
     // You can pass extends here
@@ -93,6 +101,26 @@ export default init(
   })
 ```
 
+## What If I Want to Use a Plugin That Isn't Supported?
+
+You can still use any ESLint plugin, even if it's not supported by automatic detection. Simply install the plugin manually and add it to the `defineConfig`. There are no limitations.
+
+```js
+import { defineConfig } from '@fullstacksjs/eslint-config';
+import pluginVue from 'eslint-plugin-vue';
+
+export default defineConfig(
+  { typescript: true },
+  ...pluginVue.configs['flat/recommended']
+)
+```
+
+## I'm Getting a Next.js Warning: Plugin Was Not Detected
+
+This configuration includes built-in support for [Next.js](https://nextjs.org). The warning you're seeing from Next.js is misleading—it simply checks whether the plugin is explicitly listed in your package.json.
+
+You can safely ignore this warning. Alternatively, you can update your lint script from next lint to eslint to avoid it entirely.
+
 ## Speed Optimization!
 
 Balancing the benefits of linting rules against their performance impact is crucial. Below is a table highlighting the most resource-intensive linting rules encountered in a real-world React project:
@@ -110,20 +138,20 @@ To conditionally disable expensive linting rules, you can modify your configurat
 
 List of `expensiveRules` to be affected:
 
-```
+```sh
 @typescript-eslint/no-floating-promises
 @typescript-eslint/no-misused-promises
-import/default
-import/export
-import/named
+import/default # (disabled in TS env)
+import/export # (disabled in TS env)
+import/named # (disabled in TS env)
+import/no-named-as-default-member # (disabled in TS env)
 import/namespace
 import/no-cycle
 import/no-deprecated
-import/no-named-as-default-member
 ```
 
 ```js
-export default init({
+export default defineConfig({
   disableExpensiveRules: !process.env.CI || !process.env.HUSKY // Or anywhere you want
   prettier: false // So you should run the formatter explicitly.
 });
@@ -131,49 +159,22 @@ export default init({
 
 ## Migration Guide
 
-### To v11
-
-v11 drops support for ESLint v8 configuration and only ESLint v9 is supported, which means you should migrate to [ESlint Flat Config](https://eslint.org/docs/latest/extend/plugin-migration-flat-config):
-
-1. Move your configs to `eslint.config.js` file.
-2. Use init API.
-    ```diff
-    -const { init } = require('@fullstacksjs/eslint-config/init');
-    +import { init } from '@fullstacksjs/eslint-config';
-
-    -module.exports = init({
-    -  modules: {
-    -    auto: true,
-    -    esm: true,
-    -    typescript: {
-    -      parserProject: ['./tsconfig.eslint.json'],
-    -      resolverProject: ['./tsconfig.json'],
-    -    },
-    -  },
-    -  // your configuration
-    -});
-    +export default init({
-    +    esm: true,
-    +    typescript: true,
-    +  },
-    +  // your configuration
-    +);
-    ```
+[See Migration Guide](./MIGRATION.md)
 
 ## What's included?
 
 * [@eslint-react/eslint-plugin](https://eslint-react.xyz/)
-* [@next/eslint-config-next](https://nextjs.org/docs/basic-features/eslint#eslint-plugin)
+* [@next/eslint-plugin-next](https://nextjs.org/docs/basic-features/eslint#eslint-plugin)
+* [@stylistic/eslint-plugin](https://eslint.style/packages/default)
 * [eslint-plugin-cypress](https://github.com/cypress-io/eslint-plugin-cypress)
 * [eslint-plugin-import-x](https://github.com/un-ts/eslint-plugin-import-x)
 * [eslint-plugin-jest](https://github.com/jest-community/eslint-plugin-jest)
 * [eslint-plugin-jest-formatting](https://github.com/dangreenisrael/eslint-plugin-jest-formatting)
 * [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y)
-* [eslint-plugin-perfectionist](https://perfectionist.dev/)
 * [eslint-plugin-n](https://github.com/eslint-community/eslint-plugin-n)
+* [eslint-plugin-perfectionist](https://perfectionist.dev/)
 * [eslint-plugin-playwright](https://github.com/playwright-community/eslint-plugin-playwright)
 * [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier)
-* [eslint-plugin-perfectionist](https://perfectionist.dev/)
 * [eslint-plugin-promise](https://github.com/eslint-community/eslint-plugin-promise)
 * [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks)
 * [eslint-plugin-storybook](https://github.com/storybookjs/eslint-plugin-storybook#readme)

package/cjs/index.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.init = init;
+exports.defineConfig = defineConfig;
+exports.init = void 0;
 var _deepmerge = _interopRequireDefault(require("deepmerge"));
 var _config = require("eslint/config");
 var _localPkg = require("local-pkg");
@@ -62,7 +63,7 @@ const defaultOptions = {
  * @param {...Config} extend
  * @returns {Config[]}
  */
-function init(initOptions = {}, ...extend) {
+function defineConfig(initOptions = {}, ...extend) {
   const options = (0, _deepmerge.default)(defaultOptions, initOptions);
   if (options.tailwind === true) {
     options.tailwind = {};
@@ -113,3 +114,6 @@ function init(initOptions = {}, ...extend) {
   if (extend) Array.prototype.push.apply(rules, extend);
   return (0, _config.defineConfig)(rules);
 }
+
+/** @deprecated Please use `defineConfig` from `@fullstacksjs/eslint-config` instead, this function will be removed in the next major release */
+const init = exports.init = defineConfig;

package/cjs/modules/imports.js

@@ -17,20 +17,6 @@ const allExtensions = [...jsExtensions, ...tsExtensions];
  */
 function imports(options = {}) {
   const isObject = typeof options.import === 'object';
-  const opt = options.esm ? 'always' : 'never';
-  const extensionOptions = {
-    ignorePackages: true,
-    js: opt,
-    jsx: opt,
-    mjs: opt,
-    cjs: opt,
-    ...(options.typescript && {
-      ts: opt,
-      tsx: opt,
-      mts: opt,
-      cts: opt
-    })
-  };
   const config = {
     plugins: {
       import: _eslintPluginImportX.default
@@ -55,7 +41,22 @@ function imports(options = {}) {
     },
     rules: {
       'import/consistent-type-specifier-style': ['warn', 'prefer-top-level'],
-      // 'import/extensions': ['error', 'ignorePackages', extensionOptions], FIXME: This rule is broken!
+      /*
+      * FIXME: This rule is broken!
+        const opt = options.esm ? 'always' : 'never';
+      'import/extensions': [
+        'error',
+        opt,
+        {
+          ignorePackages: true,
+          js: opt,
+          jsx: opt,
+          mjs: opt,
+          cjs: opt,
+          ...(options.typescript && { ts: opt, tsx: opt, mts: opt, cts: opt }),
+        },
+      ],
+      */
       'import/first': 'error',
       'import/newline-after-import': 'warn',
       'import/no-absolute-path': 'error',

package/cjs/modules/react.js

@@ -24,17 +24,20 @@ function react() {
     },
     rules: {
       '@eslint-react/dom/no-children-in-void-dom-elements': 'warn',
-      '@eslint-react/dom/no-dangerously-set-innerhtml': 'off',
       '@eslint-react/dom/no-dangerously-set-innerhtml-with-children': 'error',
+      '@eslint-react/dom/no-dangerously-set-innerhtml': 'off',
       '@eslint-react/dom/no-find-dom-node': 'error',
+      '@eslint-react/dom/no-flush-sync': 'off',
+      '@eslint-react/dom/no-hydrate': 'warn',
       '@eslint-react/dom/no-missing-button-type': 'warn',
       '@eslint-react/dom/no-missing-iframe-sandbox': 'warn',
       '@eslint-react/dom/no-namespace': 'error',
       '@eslint-react/dom/no-render-return-value': 'error',
+      '@eslint-react/dom/no-render': 'warn',
       '@eslint-react/dom/no-script-url': 'warn',
       '@eslint-react/dom/no-unsafe-iframe-sandbox': 'warn',
       '@eslint-react/dom/no-unsafe-target-blank': 'warn',
-      '@eslint-react/ensure-forward-ref-using-ref': 'warn',
+      '@eslint-react/ensure-forward-ref-using-ref': 'off',
       '@eslint-react/no-access-state-in-setstate': 'error',
       '@eslint-react/no-array-index-key': 'warn',
       '@eslint-react/no-children-count': 'warn',
@@ -52,8 +55,9 @@ function react() {
       '@eslint-react/no-direct-mutation-state': 'error',
       '@eslint-react/no-duplicate-key': 'error',
       '@eslint-react/no-implicit-key': 'error',
+      '@eslint-react/no-missing-context-display-name': 'off',
       '@eslint-react/no-missing-key': 'error',
-      '@eslint-react/no-nested-components': 'warn',
+      '@eslint-react/no-nested-component-definitions': 'warn',
       '@eslint-react/no-redundant-should-component-update': 'error',
       '@eslint-react/no-set-state-in-component-did-mount': 'warn',
       '@eslint-react/no-set-state-in-component-did-update': 'warn',
@@ -66,6 +70,7 @@ function react() {
       '@eslint-react/no-unstable-default-props': 'error',
       '@eslint-react/no-unused-class-component-members': 'warn',
       '@eslint-react/no-unused-state': 'warn',
+      '@eslint-react/no-useless-forward-ref': 'warn',
       '@eslint-react/no-useless-fragment': 'warn',
       '@eslint-react/prefer-destructuring-assignment': 'warn',
       '@eslint-react/prefer-shorthand-boolean': 'warn',
@@ -75,11 +80,12 @@ function react() {
       '@eslint-react/hooks-extra/prefer-use-state-lazy-initialization': 'warn',
       '@eslint-react/hooks-extra/no-useless-custom-hooks': 'warn',
       '@eslint-react/naming-convention/component-name': 'warn',
-      '@eslint-react/naming-convention/filename': 'off',
+      '@eslint-react/naming-convention/context-name': 'warn',
       '@eslint-react/naming-convention/filename-extension': ['error', {
         allow: 'always',
         extensions: ['.jsx', '.tsx']
       }],
+      '@eslint-react/naming-convention/filename': 'off',
       '@eslint-react/naming-convention/use-state': 'off',
       'react-hooks/exhaustive-deps': 'warn',
       'react-hooks/rules-of-hooks': 'error',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fullstacksjs/eslint-config",
-  "version": "11.8.1",
+  "version": "11.10.0",
   "license": "MIT",
   "author": "fullstacks <fullstacksjs@gmail.com>",
   "description": "fullstacks eslint config",
@@ -34,22 +34,22 @@
     }
   },
   "dependencies": {
-    "@eslint-react/eslint-plugin": "1.28.0",
-    "@next/eslint-plugin-next": "15.1.7",
-    "@stylistic/eslint-plugin": "4.1.0",
+    "@eslint-react/eslint-plugin": "1.37.3",
+    "@next/eslint-plugin-next": "15.2.3",
+    "@stylistic/eslint-plugin": "4.2.0",
     "deepmerge": "4.3.1",
-    "eslint-plugin-cypress": "4.1.0",
-    "eslint-plugin-import-x": "4.6.1",
+    "eslint-plugin-cypress": "4.2.0",
+    "eslint-plugin-import-x": "4.9.1",
     "eslint-plugin-jest": "28.11.0",
     "eslint-plugin-jest-formatting": "3.1.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-n": "17.15.1",
-    "eslint-plugin-perfectionist": "4.9.0",
+    "eslint-plugin-n": "17.16.2",
+    "eslint-plugin-perfectionist": "4.10.1",
     "eslint-plugin-playwright": "2.2.0",
     "eslint-plugin-prettier": "5.2.3",
     "eslint-plugin-promise": "7.2.1",
-    "eslint-plugin-react-hooks": "5.1.0",
-    "eslint-plugin-storybook": "0.11.3",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-storybook": "0.11.6",
     "eslint-plugin-tailwindcss": "3.18.0",
     "eslint-plugin-vitest": "0.5.4",
     "globals": "16.0.0",
@@ -57,14 +57,14 @@
     "typescript-eslint": "8.27.0"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "3.3.0",
-    "@eslint/js": "9.22.0",
+    "@eslint/eslintrc": "3.3.1",
+    "@eslint/js": "9.23.0",
     "@semantic-release/github": "11.0.1",
     "@semantic-release/npm": "12.0.1",
     "@semantic-release/release-notes-generator": "14.0.3",
     "@types/eslint": "9.6.1",
     "cspell": "8.17.5",
-    "eslint": "9.22.0",
+    "eslint": "9.23.0",
     "husky": "9.1.7",
     "jest": "29.7.0",
     "lint-staged": "15.5.0",
@@ -77,7 +77,7 @@
   },
   "peerDependencies": {
     "cypress": ">=8",
-    "eslint": "^9",
+    "eslint": ">=9.22",
     "prettier": "3",
     "react": ">=16",
     "typescript": ">=4.7"

package/src/index.mjs

@@ -1,5 +1,5 @@
 import merge from 'deepmerge';
-import { defineConfig } from 'eslint/config';
+import { defineConfig as eslintConfig } from 'eslint/config';
 import { isPackageExists } from 'local-pkg';
 
 import base from './modules/base.mjs';
@@ -55,7 +55,7 @@ const defaultOptions = {
  * @param {...Config} extend
  * @returns {Config[]}
  */
-export function init(initOptions = {}, ...extend) {
+export function defineConfig(initOptions = {}, ...extend) {
   const options = merge(defaultOptions, initOptions);
 
   if (options.tailwind === true) {
@@ -110,5 +110,8 @@ export function init(initOptions = {}, ...extend) {
   if (Object.keys(eslintOptions).length > 0) rules.push(eslintOptions);
   if (extend) Array.prototype.push.apply(rules, extend);
 
-  return defineConfig(rules);
+  return eslintConfig(rules);
 }
+
+/** @deprecated Please use `defineConfig` from `@fullstacksjs/eslint-config` instead, this function will be removed in the next major release */
+export const init = defineConfig;

package/src/modules/imports.mjs

@@ -12,20 +12,6 @@ const allExtensions = [...jsExtensions, ...tsExtensions];
  */
 function imports(options = {}) {
   const isObject = typeof options.import === 'object';
-  const opt = options.esm ? 'always' : 'never';
-  const extensionOptions = {
-    ignorePackages: true,
-    js: opt,
-    jsx: opt,
-    mjs: opt,
-    cjs: opt,
-    ...(options.typescript && {
-      ts: opt,
-      tsx: opt,
-      mts: opt,
-      cts: opt,
-    }),
-  };
 
   const config = {
     plugins: { import: plugin },
@@ -46,7 +32,22 @@ function imports(options = {}) {
 
     rules: {
       'import/consistent-type-specifier-style': ['warn', 'prefer-top-level'],
-      // 'import/extensions': ['error', 'ignorePackages', extensionOptions], FIXME: This rule is broken!
+      /*
+      * FIXME: This rule is broken!
+        const opt = options.esm ? 'always' : 'never';
+      'import/extensions': [
+        'error',
+        opt,
+        {
+          ignorePackages: true,
+          js: opt,
+          jsx: opt,
+          mjs: opt,
+          cjs: opt,
+          ...(options.typescript && { ts: opt, tsx: opt, mts: opt, cts: opt }),
+        },
+      ],
+      */
       'import/first': 'error',
       'import/newline-after-import': 'warn',
       'import/no-absolute-path': 'error',

package/src/modules/react.mjs

@@ -18,18 +18,20 @@ function react() {
     },
     rules: {
       '@eslint-react/dom/no-children-in-void-dom-elements': 'warn',
-      '@eslint-react/dom/no-dangerously-set-innerhtml': 'off',
       '@eslint-react/dom/no-dangerously-set-innerhtml-with-children': 'error',
+      '@eslint-react/dom/no-dangerously-set-innerhtml': 'off',
       '@eslint-react/dom/no-find-dom-node': 'error',
+      '@eslint-react/dom/no-flush-sync': 'off',
+      '@eslint-react/dom/no-hydrate': 'warn',
       '@eslint-react/dom/no-missing-button-type': 'warn',
       '@eslint-react/dom/no-missing-iframe-sandbox': 'warn',
       '@eslint-react/dom/no-namespace': 'error',
       '@eslint-react/dom/no-render-return-value': 'error',
+      '@eslint-react/dom/no-render': 'warn',
       '@eslint-react/dom/no-script-url': 'warn',
       '@eslint-react/dom/no-unsafe-iframe-sandbox': 'warn',
       '@eslint-react/dom/no-unsafe-target-blank': 'warn',
-
-      '@eslint-react/ensure-forward-ref-using-ref': 'warn',
+      '@eslint-react/ensure-forward-ref-using-ref': 'off',
       '@eslint-react/no-access-state-in-setstate': 'error',
       '@eslint-react/no-array-index-key': 'warn',
       '@eslint-react/no-children-count': 'warn',
@@ -47,8 +49,9 @@ function react() {
       '@eslint-react/no-direct-mutation-state': 'error',
       '@eslint-react/no-duplicate-key': 'error',
       '@eslint-react/no-implicit-key': 'error',
+      '@eslint-react/no-missing-context-display-name': 'off',
       '@eslint-react/no-missing-key': 'error',
-      '@eslint-react/no-nested-components': 'warn',
+      '@eslint-react/no-nested-component-definitions': 'warn',
       '@eslint-react/no-redundant-should-component-update': 'error',
       '@eslint-react/no-set-state-in-component-did-mount': 'warn',
       '@eslint-react/no-set-state-in-component-did-update': 'warn',
@@ -61,6 +64,7 @@ function react() {
       '@eslint-react/no-unstable-default-props': 'error',
       '@eslint-react/no-unused-class-component-members': 'warn',
       '@eslint-react/no-unused-state': 'warn',
+      '@eslint-react/no-useless-forward-ref': 'warn',
       '@eslint-react/no-useless-fragment': 'warn',
       '@eslint-react/prefer-destructuring-assignment': 'warn',
       '@eslint-react/prefer-shorthand-boolean': 'warn',
@@ -72,8 +76,9 @@ function react() {
       '@eslint-react/hooks-extra/no-useless-custom-hooks': 'warn',
 
       '@eslint-react/naming-convention/component-name': 'warn',
-      '@eslint-react/naming-convention/filename': 'off',
+      '@eslint-react/naming-convention/context-name': 'warn',
       '@eslint-react/naming-convention/filename-extension': ['error', { allow: 'always', extensions: ['.jsx', '.tsx'] }],
+      '@eslint-react/naming-convention/filename': 'off',
       '@eslint-react/naming-convention/use-state': 'off',
 
       'react-hooks/exhaustive-deps': 'warn',