@fullstacksjs/eslint-config 9.0.14 → 9.0.16

package/README.md

@@ -12,138 +12,158 @@
 
 ## Installation
 
-If you use [ESLint](https://eslint.org/) alongside [TypeScript](https://typescriptlang.org/)
-
-### npm :
-
-```sh
-$ npm install --save-dev @fullstacksjs/eslint-config eslint prettier typescript
-```
-
-### yarn :
-
-```sh
-$ yarn add --dev @fullstacksjs/eslint-config eslint prettier typescript
-```
-
-for JavaScript development
-
-### npm :
-
 ```sh
 $ npm install --save-dev @fullstacksjs/eslint-config eslint prettier
 ```
 
-### yarn :
-
-```sh
-$ yarn add --dev @fullstacksjs/eslint-config eslint prettier
-```
+## Usage
 
-optional dependencies (if you need):
+### Method 1: Init API
 
-* react
-* jest
-* cypress
+Create `.eslintrc.js` file and init the configuration.
 
-## Usage
+```js
+const { init } = require('@fullstacksjs/eslint-config/init');
 
-Just extend from `@fullstacksjs`:
+module.exports = init({
+  modules: {
+    auto: true, // If you need auto module detection (refer to Auto Module Detection).
+    // Modules configuration check (optional). (refer to Module API)
+  },
+  // Your configurations
+});
 
-```json
-{
-  "extends": ["@fullstacksjs"]
-}
 ```
 
-It reads your root `package.json` dependencies and includes necessary rules.
-
-## NextJS
-
-Our index setup conflicts with the built-in ESLint [NextJS](https://nextjs.org/) configuration. To utilize it in a NextJS project, configure your eslintrc file as follows.
+### Method 2: Extends API
+You can also use the configuration within a `json` or `yaml` files by extending from `@fullstacksjs`, the Auto Module Detection is enabled on this method
 
 ```json
 {
-  "extends": ["next/core-web-vitals", "@fullstacksjs/eslint-config/nextjs"]
+  "extends": ["@fullstacksjs"]
 }
 ```
 
-## Advanced Usage
-
-```jsonc
-{
-  "extends": [
-    "@fullstacksjs/eslint-config/base",
-    "@fullstacksjs/eslint-config/jest",
-    "@fullstacksjs/eslint-config/react",
-    "@fullstacksjs/eslint-config/typescript",
-    "@fullstacksjs/eslint-config/strict",
-    "@fullstacksjs/eslint-config/cypress",
-    "@fullstacksjs/eslint-config/storybook",
-    "@fullstacksjs/eslint-config/graphql", // Need extra config
-    "@fullstacksjs/eslint-config/esm", // for native ESM modules
-    "@fullstacksjs/eslint-config/typecheck" // ⚠️ Needs configurations (not included in default config)
-  ]
+## Auto Module Detection
+
+When auto module detection is turned on, the configuration reads the metadata from your root "package.json" file and automatically adds the rules and plugins that are needed. It's enabled for the `extends` API, and you should set `modules.auto` to `true` when you use the `init` API.
+
+## Modules API
+
+```typescript
+interface Modules {
+    auto?: boolean; // Auto module detection
+    react?: 'next' | 'raw'; // controls react, react-hooks, jsx/a11y plugins
+    typescript?: { // controls typescript plugin
+      parserProject?: string[] | string; // controls parserOptions.project
+      resolverProject?: string[] | string // controls settings['import/resolver'].typescript.project
+    };
+    node?: boolean; // controls node plugin
+    strict?: boolean; // controls strict plugin
+    import?: boolean; // controls import plugin
+    esm?: boolean; // controls esm plugin
+    graphql?: boolean; // controls graphql plugin
+    test?: boolean; // controls jest/vitest plugin
+    cypress?: boolean; // controls cypress plugin
+    storybook?: boolean; // controls storybook plugin
 }
 ```
 
-## Need more typescript rules?
+## Typescript configuration
 
-If you need more advanced `typescript-eslint` rules, then you can extend from `"@fullstacksjs/eslint-config/typecheck"` and set `parserOptions.project` option:
+If you need more advanced typescript-eslint rule you need to specify `modules.typescript.resolverProject`.
 
-```json
-{
-  "extends": [
-    "@fullstacksjs",
-    "@fullstacksjs/eslint-config/typecheck"
-  ],
-  "parserOptions": {
-    "project": "<PATH_TO_TSCONFIG>"
-  }
-}
+```js
+module.exports = init({
+  modules: {
+    typescript: { resolverProject: "<PATH_TO_TSCONFIG>" }
+  },
+});
 ```
 
-## Graphql
+## React/NextJS configuration
 
-To enable graphql module you need to extends from `@fullstacksjs/eslint-config/graphql` and configure schema and operations in you eslint config or graphql config. for more information checkout [here](https://github.com/B2o5T/graphql-eslint#configuration).
+React/NextJS configuration should automatically work with Auto Module Detection, but if you need to have more control over the rules you can configure it through `modules.react`.
 
-Here is an example:
-
-```jsonc
-// eslintrc
-
-{
-  "extends": [
-    ...
-    "@fullstacksjs/eslint-config/graphql"
-  ],
-}
+```js
+module.exports = init({
+  modules: {
+    react: 'raw' // for React/CRA/Vite
+  },
+});
 ```
 
-```yaml
-# .graphqlrc.yml
+and
 
-schema: 'path/to/schema'
+```js
+module.exports = init({
+  modules: {
+    react: 'next' // for NextJS
+  },
+});
 ```
 
+## Migration Guid
+
+### to v9
+
+v9 does not have any breaking change, which means the current configuration you have should work without any problem, but in order to migrate to new Module API:
+
+1. Move your configs to `.eslintrc.js` file.
+2. Use init API.
+    ```diff
+    -module.exports = {
+    -  extends: [
+    -    "@fullstacksjs",
+    -    "@fullstacksjs/eslint-config/esm",
+    -    "@fullstacksjs/eslint-config/typecheck",
+    -    "@fullstacksjs/eslint-config/graphql"
+    -  ],
+    -  "parserOptions": {
+    -    "project": ["./tsconfig.eslint.json"]
+    -  },
+    -  "settings": {
+    -    "import/resolver": {
+    -      "typescript": {
+    -        "project": ["./tsconfig.json"]
+    -      },
+    -    },
+    -  },
+    -  // your configuration
+    -};
+    +const { init } = require('@fullstacksjs/eslint-config/init');
+    +
+    +module.exports = init({
+    +  modules: {
+    +    auto: true,
+    +    esm: true,
+    +    graphql: true,
+    +    typescript: {
+    +      parserProject: ['./tsconfig.eslint.json'],
+    +      resolverProject: ['./tsconfig.json'],
+    +    },
+    +  },
+    +  // your configuration
+    +});
+    ```
 
 ## What's included?
 
-* @typescript-eslint/eslint-plugin
-* eslint-plugin-import
-* eslint-plugin-jest
-* eslint-plugin-jest-formatting
-* eslint-plugin-cypress
-* eslint-plugin-jsx-a11y
-* eslint-plugin-prettier
-* eslint-plugin-react
-* eslint-plugin-react-hooks
-* eslint-plugin-simple-import-sort
-* eslint-plugin-fp
-* eslint-plugin-node
-* eslint-plugin-promise
-* eslint-plugin-storybook
-* eslint-plugin-graphql
+* [@typescript-eslint/eslint-plugin](https://typescript-eslint.io/)
+* [eslint-plugin-import](https://github.com/import-js/eslint-plugin-import)
+* [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-cypress](https://github.com/cypress-io/eslint-plugin-cypress)
+* [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y)
+* [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier)
+* [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react)
+* [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks)
+* [eslint-plugin-simple-import-sort](https://github.com/lydell/eslint-plugin-simple-import-sort)
+* [eslint-plugin-fp](https://github.com/jfmengels/eslint-plugin-fp)
+* [eslint-plugin-node](https://github.com/mysticatea/eslint-plugin-node)
+* [eslint-plugin-promise](https://github.com/eslint-community/eslint-plugin-promise)
+* [eslint-plugin-storybook](https://github.com/storybookjs/eslint-plugin-storybook#readme)
+* [eslint-plugin-graphql](https://github.com/apollographql/eslint-plugin-graphql)
 
 That's all. Feel free to use 💛
 

package/cypress.js

@@ -6,7 +6,7 @@ const { exts } = require('./utils');
 module.exports = {
   overrides: [
     {
-      files: [`**/cypress/**/*.${exts}`, `**/*.cy.+${exts}`],
+      files: [`**/cypress/**/*.${exts}`, `**/*.cy.${exts}`],
       plugins: ['jest', 'jest-formatting', 'cypress'],
       env: {
         'cypress/globals': true,

package/esm.js

@@ -1,13 +1,13 @@
 /** @type { import('eslint').Linter.Config } */
 module.exports = {
   rules: {
-    'import/extensions': ['error', { mjs: 'ignorePackages' }],
+    ...(global.fullstacksjs?.import && { 'import/extensions': ['error', { mjs: 'ignorePackages' }] }),
   },
   overrides: [
     {
       files: ['*.ts', '*.tsx'],
       rules: {
-        'import/no-unresolved': ['error', { ignore: ['.js$'], caseSensitiveStrict: true }],
+        ...(global.fullstacksjs?.import && { 'import/no-unresolved': ['error', { ignore: ['.js$'], caseSensitiveStrict: true }] }),
       },
     },
   ],

package/index.js

@@ -1,9 +1,8 @@
 require('./registerOpts');
-const { compact } = require('@fullstacksjs/toolbox');
 
 /** @type { import('eslint').Linter.Config } */
 module.exports = {
-  extends: compact([
+  extends: [
     require.resolve('./base'),
     require.resolve('./fp'),
     require.resolve('./import'),
@@ -15,5 +14,5 @@ module.exports = {
     global.fullstacksjs?.typescript && require.resolve('./typescript'),
     global.fullstacksjs?.cypress && require.resolve('./cypress'),
     require.resolve('./prettier'),
-  ]),
+  ].filter(Boolean),
 };

package/init.d.ts

@@ -1,15 +1,18 @@
-export interface Options {
-  react: 'next' | 'raw';
-  typescript: { parserProject: string[] | string; resolverProject: string[] | string };
-  node: boolean;
-  strict: boolean;
-  import: boolean;
-  esm: boolean;
-  graphql: boolean;
-  test: boolean;
-  cypress: boolean;
-  storybook: boolean;
-  overrides: import('eslint').Linter.Config;
+type Config = import('eslint').Linter.Config;
+export interface Options extends Config {
+  modules: {
+    auto?: boolean;
+    react?: 'next' | 'raw';
+    typescript?: { parserProject: string[] | string; resolverProject: string[] | string };
+    node?: boolean;
+    strict?: boolean;
+    import?: boolean;
+    esm?: boolean;
+    graphql?: boolean;
+    test?: boolean;
+    cypress?: boolean;
+    storybook?: boolean;
+  };
 }
 
 export declare const init: (opts: Options) => import('eslint').Linter.Config;

package/init.js

@@ -1,34 +1,38 @@
-require('./registerOpts');
-const { compact } = require('@fullstacksjs/toolbox');
 const merge = require('deepmerge');
 
 /** @param { import('./init.d').Options } opts */
 // eslint-disable-next-line complexity
 function init(opts = {}) {
-  const { extends: extendsOverrides, ...overrides } = opts.overrides;
-  global.fullstacksjs = merge(global.fullstacksjs, opts);
+  const { modules = {}, extends: extraExtends = [], ...eslintConfig } = opts;
+  if (modules.auto) {
+    require('./registerOpts');
+    global.fullstacksjs = merge(global.fullstacksjs, modules);
+  } else {
+    global.fullstacksjs = modules;
+  }
+  opts = global.fullstacksjs;
 
   /** @type { import('eslint').Linter.Config } */
   const config = {
-    extends: compact([
+    extends: [
       require.resolve('./base'),
       require.resolve('./promise'),
       require.resolve('./fp'),
       opts.node && require.resolve('./node'),
-      opts.cypress && require.resolve('./cypress'),
-      opts.test && require.resolve('./jest'),
       opts.graphql && require.resolve('./graphql'),
-      opts.storybook && require.resolve('./storybook'),
-      opts.importModule && require.resolve('./import'),
+      opts.import && require.resolve('./import'),
       opts.typescript && require.resolve('./typescript'),
+      opts.storybook && require.resolve('./storybook'),
+      opts.cypress && require.resolve('./cypress'),
+      opts.test && require.resolve('./jest'),
       opts.esm && require.resolve('./esm'),
       opts.strict && require.resolve('./strict'),
       require.resolve('./prettier'),
-      ...(extendsOverrides ?? []),
-    ]),
+      ...extraExtends,
+    ].filter(Boolean),
     parserOptions: {},
     settings: {},
-    ...overrides,
+    ...eslintConfig,
   };
 
   if (opts.react === 'raw') config.extends.push(require.resolve('./react.js'));

package/jest.js

@@ -68,7 +68,7 @@ module.exports = {
           'jest/no-deprecated-functions': 'error',
         }),
 
-        ...(global.fullstacksjs?.typescript && {
+        ...(global.fullstacksjs?.typescript?.resolverProject && {
           '@typescript-eslint/unbound-method': 'off',
           'jest/unbound-method': 'error',
           'jest/no-untyped-mock-factory': 'warn',

package/naming-convention.js

@@ -2,6 +2,10 @@ module.exports = [
   {
     selector: 'default',
     format: ['camelCase'],
+    filter: {
+      regex: '^_+$',
+      match: false,
+    },
   },
   {
     selector: 'function',
@@ -11,11 +15,19 @@ module.exports = [
   {
     selector: 'variable',
     format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
+    filter: {
+      regex: '^_+$',
+      match: false,
+    },
   },
   {
     selector: 'parameter',
     format: ['camelCase', 'PascalCase'],
-    leadingUnderscore: 'allowSingleOrDouble',
+    leadingUnderscore: 'allow',
+    filter: {
+      regex: '^_+$',
+      match: false,
+    },
   },
   {
     selector: 'memberLike',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fullstacksjs/eslint-config",
-  "version": "9.0.14",
+  "version": "9.0.16",
   "license": "MIT",
   "author": "fullstacks <fullstacksjs@gmail.com>",
   "description": "fullstacks eslint config",

package/registerOpts.js

@@ -6,7 +6,7 @@ const defaultOptions = {
   cypress: hasDep('cypress'),
   graphql: hasDep('graphql'),
   react: hasDep('react') && !hasDep('next'),
-  storybook: hasDep('storybook'),
+  storybook: hasDep('@storybook/react'),
   test: hasDep('jest') || hasDep('vitest'),
   typescript: hasDep('typescript'),
   import: true,

package/storybook.js

@@ -2,8 +2,8 @@
 module.exports = {
   overrides: [
     {
+      files: ['**/*.stories.+(ts|tsx|js|jsx|mjs|cjs|mdx)', '**/*.story.+(ts|tsx|js|jsx|mjs|cjs|mdx)'],
       plugins: ['storybook'],
-      files: ['*.stories.+(ts|tsx|js|jsx|mjs|cjs|mdx)', '*.story.+(ts|tsx|js|jsx|mjs|cjs|mdx)'],
       rules: {
         'storybook/await-interactions': 'error',
         'storybook/context-in-play-function': 'error',

package/typescript.js

@@ -89,7 +89,7 @@ module.exports = {
         '@typescript-eslint/no-unused-vars-experimental': 'off', // Why two rules?
         '@typescript-eslint/no-unused-vars': [
           'warn',
-          { argsIgnorePattern: '^_', varsIgnorePattern: '^[iI]gnore(d)?', args: 'after-used', ignoreRestSiblings: true },
+          { argsIgnorePattern: '^_', varsIgnorePattern: '^([iI]gnore(d)?)|(_+)', args: 'after-used', ignoreRestSiblings: true },
         ],
         '@typescript-eslint/no-use-before-define': ['error', { functions: false, classes: true }],
         '@typescript-eslint/no-useless-constructor': 'error',