UNPKG

@dr.pogodin/eslint-configs

Version:

ESLint configurations for TypeScript and/or React projects

197 lines (151 loc) 8.21 kB
# ESLint Configs [![Latest NPM Release](https://img.shields.io/npm/v/@dr.pogodin/eslint-configs.svg)](https://www.npmjs.com/package/@dr.pogodin/eslint-configs) [![NPM monthly downloads](https://img.shields.io/npm/dm/@dr.pogodin/eslint-configs)](https://www.npmjs.com/package/@dr.pogodin/eslint-configs) [![CircleCI](https://dl.circleci.com/status-badge/img/gh/birdofpreyru/eslint-configs/tree/master.svg?style=shield)](https://app.circleci.com/pipelines/github/birdofpreyru/eslint-configs) [![GitHub Repo stars](https://img.shields.io/github/stars/birdofpreyru/eslint-configs?style=social)](https://github.com/birdofpreyru/eslint-configs) [![Dr. Pogodin Studio](https://raw.githubusercontent.com/birdofpreyru/eslint-configs/master/.README/logo-dr-pogodin-studio.svg)](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. [![Sponsor](https://raw.githubusercontent.com/birdofpreyru/eslint-configs/master/.README/sponsor.svg)](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