@dr.pogodin/eslint-configs
Version:
ESLint configurations for TypeScript and/or React projects
197 lines (151 loc) • 8.21 kB
Markdown
# ESLint Configs
[](https://www.npmjs.com/package/@dr.pogodin/eslint-configs)
[](https://www.npmjs.com/package/@dr.pogodin/eslint-configs)
[](https://app.circleci.com/pipelines/github/birdofpreyru/eslint-configs)
[](https://github.com/birdofpreyru/eslint-configs)
[](https://dr.pogodin.studio/docs/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.
[](https://github.com/sponsors/birdofpreyru)
## Content
- [Getting Started]
- [Provided Configs]
- [`configs.javascript`]
- [`configs.javascriptNoPerf`]
- [`configs.jest`]
- [`configs.react`]
- [`configs.typescript`]
- [`configs.typescriptNoPerf`]
## Getting Started
[Getting Started]: #getting-started
- Install this package as developement dependency:
```sh
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._:
```js
// 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):
```js
// 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](https://eslint.org/docs/latest/use/command-line-interface#--cache)
option of ESLint to speed-up repeated linting of your codebase.
## Provided Configs
[Provided Configs]: #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`
[`configs.javascript`]: #configsjavascript
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](https://eslint.org/docs/latest/use/configure/configuration-files#specifying-files-and-ignores));
and it applies to them the following rule sets:
- [ESLint Core Rules](https://eslint.org/docs/latest/rules) —
the `recommended` rule set, with minor overrides, and many additional rules
enabled.
- [@babel/eslint-plugin](https://www.npmjs.com/package/@babel/eslint-plugin) —
all rules enabled, with minor overrides of their default settings.
- [@stylistic/eslint-plugin](https://eslint.style/rules) —
the `recommended` rule set, with minor overrides, and many additional rules
enabled.
- [eslint-plugin-import](https://www.npmjs.com/package/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`
[`configs.javascriptNoPerf`]: #configsjavascriptnoperf
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](https://github.com/birdofpreyru/eslint-configs/releases/tag/v0.2.0) release.
### `configs.jest`
[`configs.jest`]: #configsjest
Intended for [Jest](https://jestjs.io)-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](https://www.npmjs.com/package/eslint-plugin-jest) —
the `recommended` and `style` rule sets, with a bunch of additional rules
enabled.
### `configs.react`
[`configs.react`]: #configsreact
Intended for React code, it applies to `**/*.jsx` and `**/*.tsx` files;
and it applies to them the following rule sets:
- [eslint-plugin-jsx-a11y](https://www.npmjs.com/package/eslint-plugin-jsx-a11y) —
the `recommended` rule set, and a few additional rules enabled.
- [eslint-plugin-react](https://www.npmjs.com/package/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](https://www.npmjs.com/package/eslint-plugin-react-hooks)
— the recommended rule set (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`
[`configs.typescript`]: #configstypescript
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](https://typescript-eslint.io/rules) —
the `recommendedTypeChecked` and `stylisticTypeChecked` rule sets, with minor
overrides, and many additional rules enabled.
### `configs.typescriptNoPerf`
[`configs.typescriptNoPerf`]: #configstypescriptnoperf
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](https://github.com/birdofpreyru/eslint-configs/releases/tag/v0.2.0) release.
[Babel]: https://babeljs.io
[ESLint]: https://eslint.org
[eslint-config-airbnb]: https://www.npmjs.com/package/eslint-config-airbnb
[Perfectionist]: https://perfectionist.dev