Installation

$ npm install --save-dev @fullstacksjs/eslint-config eslint prettier

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.

ESM

import { init } from '@fullstacksjs/eslint-config';

export default init();

CJS

const { init } = require('@fullstacksjs/eslint-config');

module.exports = init();

Modules API

You can fine-tune module detection by overriding it, the init function accepts options as its first argument to control enabled modules.

interface Options {
    react?: boolean; // controls react, react-hooks, jsx/a11y plugins
    typescript?: { // controls typescript plugin
      project?: boolean | string[] | string; // https://typescript-eslint.io/packages/parser/#project
      tsconfigRootDir?: string // https://typescript-eslint.io/packages/parser/#tsconfigrootdir
    };
    node?: boolean; // controls node plugin
    sort?: boolean; // controls perfectionist plugin
    strict?: boolean; // controls strict rules
    import?: {
      projects?: string[] | string // controls settings['import/resolver'].typescript.project
      internalRegExp?: string;
      lifetime?: number;
    }; // controls import plugin
    esm?: boolean; // controls esm plugin
    test?: boolean; // controls test formatting plugin
    jest?: boolean; // controls jest plugin
    vitest?: boolean; // controls vitest plugin
    cypress?: boolean; // controls cypress plugin
    playwright?: boolean // controls playwright plugin
    storybook?: boolean; // controls storybook plugin
    tailwind?: boolean | { callee?: string[] }; // controls tailwindcss plugin
    next?: boolean; // controls next plugin
    prettier?: boolean; // controls prettier plugin
    disableExpensiveRules?: boolean; // controls expensive rules
}

Extra configuration

You can pass any number of arbitrary custom config overrides to init function:

import { init } from '@fullstacksjs/eslint-config';

export default init(
  {
    typescript: true,
    // You can pass extends here
    rules {
      'no-console': 'error'
    }
  },
  // And any number of extra configurations
  {
    files: ['**/*.ts'],
    rules: {},
  }, {
    rules: {},
  })

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:

Rule	Time (ms)	Relative
prettier/prettier	3299.631	19.2%
@typescript-eslint/no-misused-promises	2473.767	14.4%
import/no-cycle	1177.111	6.8%
import/namespace	1148.731	6.7%

As illustrated, certain rules significantly increase linting time, potentially hindering the developer experience by slowing down the feedback loop. To mitigate this, you may consider disabling these resource-intensive rules in the development environment. However, they can remain active in environments where performance is less critical, such as Continuous Integration (CI) systems or during pre-commit checks (git hooks).

To conditionally disable expensive linting rules, you can modify your configuration as follows:

List of expensiveRules to be affected:

@typescript-eslint/no-floating-promises
@typescript-eslint/no-misused-promises
import/default
import/export
import/named
import/namespace
import/no-cycle
import/no-deprecated
import/no-named-as-default-member

export default init({
  disableExpensiveRules: !process.env.CI || !process.env.HUSKY // Or anywhere you want
  prettier: false // So you should run the formatter explicitly.
});

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:

1. Move your configs to eslint.config.js file.
2. Use init API.

   -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
   +);

What's included?

• @eslint-react/eslint-plugin
• @next/eslint-config-next
• eslint-plugin-cypress
• eslint-plugin-import-x
• eslint-plugin-jest
• eslint-plugin-jest-formatting
• eslint-plugin-jsx-a11y
• eslint-plugin-perfectionist
• eslint-plugin-n
• eslint-plugin-playwright
• eslint-plugin-prettier
• eslint-plugin-perfectionist
• eslint-plugin-promise
• eslint-plugin-react-hooks
• eslint-plugin-storybook
• eslint-plugin-tailwindcss
• eslint-plugin-vitest
• typescript-eslint

That's all. Feel free to use 💛