Home Software Engineering Scientific Consulting Dev Blog In Media

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.

Getting Started

Install this package and ESLint as developement dependencies:
```
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/'],
}, {
  // This object opts-in for JavaScript, TypeScript, and React code checks
  // inside the project, with exception for a folder with tests, which is
  // checked by different rules below.
  extends: [
    eslintConfigs.configs.javascript,
    eslintConfigs.configs.typescript,
    eslintConfigs.configs.react,
  ],
  ignores: ['__tests__/**'],
}, {
  // This is a separate set of rules for a folder with Jest-based unit tests.
  extends: [
    eslintConfigs.configs.javascript,
    eslintConfigs.configs.typescript,
    eslintConfigs.configs.react,
    eslintConfigs.configs.jest,
  ],
  files: ['__tests__/**'],
}]);

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; 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.

`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.