ESLint Configs

ESLint configurations for JavaScript, TypeScript and/or React projects. This project is invisioned as a replacement for AirBnB ESLint configurations (eslint-config-airbnb), which are no longer maintained by AirBnB. Our aims are:

• Code style and rules similar to that of the original AirBnB configs + Some opinionated improvements on top them.

• Timely support of the latest ESLint and plugin releases.

Content

• Getting Started
• Provided Configs
  • configs.javascript
  • configs.javascriptNoPerf
  • configs.jest
  • configs.react
  • configs.typescript
  • configs.typescriptNoPerf

Getting Started

• Install this package as developement dependency:

  npm install --save-dev @dr.pogodin/eslint-configs

• Some plugins & rules we use depend on Babel. If you don't have it explicitly installed and configured in your project you should set requireConfigFile option of parser to false, e.g.:

  // eslint.config.mjs
  
  import { defineConfig } from 'eslint/config';
  import eslintConfigs from '@dr.pogodin/eslint-configs';
  
  export default defineConfig([
    {
      languageOptions: {
        parserOptions: {
          requireConfigFile: false,
        },
      },
    },
    eslintConfigs.config.javascript,
  ]);

• Add necessary configurations into your flat ESLint config file, for example (also see Provided Configs section below for further details):

  // eslint.config.mjs
  
  /* eslint-disable import/no-extraneous-dependencies */
  
  // defineConfig() is an optional helper provided by ESLint
  import { defineConfig } from 'eslint/config';
  
  import eslintConfigs from '@dr.pogodin/react-utils';
  
  export default defineConfig([
    {
      // Global ignore rules: an array of path patterns to be ignored by ESLint
      // for all other objects included into this configuration, in addition to
      // "**/node_modules/" and ".git/" paths which are always ignored; see:
      // https://eslint.org/docs/latest/use/configure/configuration-files#globally-ignoring-files-with-ignores 
      ignores: ['build/'],
    },
    // Apply JavaScript, TypeScript, and React configs to all files matched by
    // those configs by default.
    eslintConfigs.configs.javascript,
    eslintConfigs.configs.typescript,
    eslintConfigs.configs.react,
    {
      // Additionally apply Jest config to the folder with Jest-based unit
      // tests.
      extends: [eslintConfigs.configs.jest],
      files: ['__tests__/**'],
    },
  ]);

• Perfectionist rules included into our default JavaScript and TypeScript configs make the linting noticeably slow (compared to linting without these rules). Consider using --cache option of ESLint to speed-up repeated linting of your codebase.

Provided Configs

This package provides the following base configurations, that are meant to be combined and extended as necessary for the needs of host projects.

configs.javascript

Intended for JavaScript code, it applies to the files ESLint considers as JavaScript by default: **/*.js, **/*.cjs, **/*.mjs, as well as to any other files matched by other config objects in your config (i.e. it does not include files key, see ESLint docs for related configuration details); and it applies to them the following rule sets:

• ESLint Core Rules — the recommended rule set, with minor overrides, and many additional rules enabled.

• @babel/eslint-plugin — all rules enabled, with minor overrides of their default settings.

• @stylistic/eslint-plugin — the recommended rule set, with minor overrides, and many additional rules enabled.

• eslint-plugin-import — the recommended rule set, with minor overrides, and many additional rules enabled.

• Perfectionist — the recommended rule set, with minor overrides, such as the custom alphabet that places uppercase characters before lowercase ones, and allowance to use empty lines to separate entities into different sorting groups.

configs.javascriptNoPerf

The same as configs.javascript above, but without Perfectionist rules. Essentially, it is equivalent to configs.javascript from this library prior to its v0.2.0 release.

configs.jest

Intended for Jest-based unit test code, it applies to all files (assuming the consumer himself will configure the correct paths to apply it to); and it applies to them the following rule sets:

• eslint-plugin-jest — the recommended and style rule sets, with a bunch of additional rules enabled.

configs.react

Intended for React code, it applies to **/*.jsx and **/*.tsx files; and it applies to them the following rule sets:

• eslint-plugin-jsx-a11y — the recommended rule set, and a few additional rules enabled.

• eslint-plugin-react — the recommended rule set, with minor overrides, and many additional rules enabled.

Additionally, it applies to all other files matched by any other ESLint configuration object; and it applies to them the following rule sets:

• eslint-plugin-react-hooks — all rules enabled (it has to apply to all files, as hooks do not have to live ony inside JSX or TSX files exclusively).

• the rule that forbids using JSX syntax in files with extensions different from .jsx or .tsx.

configs.typescript

Intended for TypeScript code, it applies to **/*.ts and **/*.tsx files; and it applies to them the following rule sets:

• Everything from our configs.javascript, with minor necessary overrides.

• typescript-eslint — the recommendedTypeChecked and stylisticTypeChecked rule sets, with minor overrides, and many additional rules enabled.

configs.typescriptNoPerf

The same as configs.typescript above, but without Perfectionist rules. Essentially, it is equivalent to configs.typescript from this library prior to its v0.2.0 release.