npm package: @svengreb/eslint-config
Description: The opinionated, yet universally applicable JavaScript code style guide rules with React support as an extensible shared ESLint configuration
Author: Sven Greb
Latest version: 0.12.0

<p align="center">
  <picture>
    <source srcset="https://raw.githubusercontent.com/svengreb/assets/main/static/images/logos/projects/styleguides/javascript/eslint-config/heroes/dark.svg?sanitize=true" width="100%" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" />
    <source srcset="https://raw.githubusercontent.com/svengreb/assets/main/static/images/logos/projects/styleguides/javascript/eslint-config/heroes/light.svg?sanitize=true" width="100%" media="(prefers-color-scheme: dark)" />
    <img src="https://raw.githubusercontent.com/svengreb/assets/main/static/images/logos/projects/styleguides/javascript/eslint-config/heroes/dark.svg?sanitize=true" width="100%" />
  </picture>
</p>

<p align="center">
  <a href="https://github.com/svengreb/styleguide-javascript/tree/main/rules" target="_blank">
    <img src="https://img.shields.io/github/release/svengreb/styleguide-javascript.svg?style=flat-square&label=Docs&colorA=4c566a&colorB=88c0d0&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI%2BCiAgICA8cGF0aCBmaWxsPSIjZDhkZWU5IiBkPSJNMTMuNzQ2IDIuODEzYS42Ny42NyAwIDAgMC0uNTU5LS4xMzNMOCAzLjg0OGwtNS4xODgtMS4xOGEuNjY5LjY2OSAwIDAgMC0uNTcuMTMzLjY3Ny42NzcgMCAwIDAtLjI0Mi41MzF2OC4xMzNjLS4wMDguMzIuMjEuNTk4LjUyLjY2OGw1LjMzMiAxLjE5OWguMjk2bDUuMzMyLTEuMmEuNjY4LjY2OCAwIDAgMCAuNTItLjY2N1YzLjMzMmEuNjU5LjY1OSAwIDAgMC0uMjU0LS41MnpNMy4zMzIgNC4xNjhsNCAuODk4djYuNzY2bC00LS44OTh6bTkuMzM2IDYuNzY2bC00IC44OThWNS4wNjZsNC0uODk4em0wIDAiLz4KPC9zdmc%2BCg%3D%3D" />
  </a>
  <a href="https://github.com/svengreb/styleguide-javascript/blob/main/changelog.md" target="_blank">
    <img src="https://img.shields.io/github/release/svengreb/styleguide-javascript.svg?style=flat-square&label=Changelog&logo=github&logoColor=eceff4&colorA=4c566a&colorB=88c0d0" />
  </a>
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@svengreb/eslint-config" target="_blank">
    <img src="https://img.shields.io/npm/v/@svengreb/eslint-config.svg?style=flat-square&label=npm&logoColor=eceff4&colorA=4c566a&colorB=88c0d0&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTEyIDE0SDRhMiAyIDAgMCAxLTItMlY0YTIgMiAwIDAgMSAyLTJoOGEyIDIgMCAwIDEgMiAydjhhMiAyIDAgMCAxLTIgMnpNNCAzLjMzMkEuNjcuNjcgMCAwIDAgMy4zMzIgNHY4YzAgLjM2Ny4zLjY2OC42NjguNjY4aDhhLjY3LjY3IDAgMCAwIC42NjgtLjY2OFY0QS42Ny42NyAwIDAgMCAxMiAzLjMzMnptMCAwIi8+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTggNmgyLjY2OHY2LjY2OEg4em0wIDAiLz48L3N2Zz4K" />
  </a>
  <a href="https://www.npmjs.com/package/@svengreb/eslint-config" target="_blank">
    <img src="https://img.shields.io/npm/dt/@svengreb/eslint-config.svg?style=flat-square&label=Downloads&logoColor=eceff4&colorA=4c566a&colorB=88c0d0&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTEyIDE0SDRhMiAyIDAgMCAxLTItMlY0YTIgMiAwIDAgMSAyLTJoOGEyIDIgMCAwIDEgMiAydjhhMiAyIDAgMCAxLTIgMnpNNCAzLjMzMkEuNjcuNjcgMCAwIDAgMy4zMzIgNHY4YzAgLjM2Ny4zLjY2OC42NjguNjY4aDhhLjY3LjY3IDAgMCAwIC42NjgtLjY2OFY0QS42Ny42NyAwIDAgMCAxMiAzLjMzMnptMCAwIi8+PHBhdGggZmlsbD0iI2Q4ZGVlOSIgZD0iTTggNmgyLjY2OHY2LjY2OEg4em0wIDAiLz48L3N2Zz4K" />
  </a>
</p>

<p align="center">
  <a href="https://github.com/svengreb/styleguide-javascript/actions/workflows/ci-node.yaml" target="_blank">
    <img src="https://img.shields.io/github/actions/workflow/status/svengreb/styleguide-javascript/ci-node.yaml?branch=main&style=flat-square&label=CI%20Node&logoColor=eceff4&colorA=4c566a&logo=github-actions" />
  </a>
</p>

<p align="center">
  <a href="https://github.com/svengreb/styleguide-markdown/releases/latest" target="_blank">
    <img src="https://img.shields.io/github/release/svengreb/styleguide-markdown.svg?style=flat-square&label=Markdown%20Style%20Guide&logoColor=eceff4&colorA=4c566a&colorB=88c0d0&logo=markdown" />
  </a>
  <a href="https://github.com/svengreb/styleguide-javascript/releases/latest" target="_blank">
    <img src="https://img.shields.io/github/release/svengreb/styleguide-javascript.svg?style=flat-square&label=JavaScript%20Style%20Guide&logoColor=eceff4&colorA=4c566a&colorB=88c0d0&logo=javascript" />
  </a>
  <a href="https://github.com/svengreb/styleguide-git/releases/latest" target="_blank">
    <img src="https://img.shields.io/github/release/svengreb/styleguide-git.svg?style=flat-square&label=Git%20Style%20Guide&logoColor=eceff4&colorA=4c566a&colorB=88c0d0&logo=git" />
  </a>
</p>

This package implements the rules of the [opinionated, yet universally applicable JavaScript code style guide][12] as an extensible shared [ESLint][3] configuration with plugin support for [React][8], its [_Hooks_][7] and [JSX A11Y][6].

## Getting Started

To only use the ESLint core and [`eslint-plugin-import`][5] rules, please use the base configurations of the [@svengreb/eslint-config-base][13] package.

Note that this package uses [npm version 7.7.0 or higher][4] as the main package manager, but the documentations also include instructions to work with [Yarn][20] (classic / `v1`).

### Installation

Add the package as development dependency to your project:

```sh
# With npm...
npm install --save-dev @svengreb/eslint-config

# or Yarn.
yarn add --dev @svengreb/eslint-config
```

Note that [peer dependencies][14], like the [remark-lint][10] package itself, are **only installed automatically when using a npm version equal or higher than `7.0.0`**, otherwise they must be installed separately like described in the [peer dependencies](#peer-dependencies) section below.
See the [Node distribution index][15] for more information about which npm version is bundled with which Node version.

#### Peer Dependencies

This package depends on the [eslint-plugin-react][8] and [eslint-plugin-jsx-a11y][6] packages that are defined as [peer dependencies][14].
Since this configuration is build on top of the [base rules package][13], the additional [eslint-plugin-import][5] peer dependency is also required.

##### npm versions `>=7.0.0`

As of **npm version `7.0.0`, peer dependencies are** [**installed automatically**][9] and does not require any additional steps.

##### npm versions `>=5.0.0 <7.0.0`

For **npm version equal to or higher than `5.0.0` (pre-bundled with [Node.js 8][16]) but less than `7.0.0`**, all peer dependencies can be auto-installed using the pre-bundled [`npx`][18] package:

```sh
npx install-peerdeps --dev @svengreb/eslint-config
```

##### npm versions `<5.0.0`

If you’re using a **npm version less than `5.0.0`**, the `npx` package is not pre-bundled, but users can either simply install the [`npx`][18] package globally to run the above command or use the [install-peerdeps][17] helper package locally/globally to let it handle the installation of all peer dependencies:

```sh
# Install and use the "install-peerdeps" helper package locally...
npm install install-peerdeps
./node_modules/.bin/install-peerdeps --dev @svengreb/eslint-config

# ...or globally.
npm install --global install-peerdeps
install-peerdeps --dev @svengreb/eslint-config
```

To install all peer dependencies manually without `npx` or any helper package, the npm `info` command can be used to get a list of all packages and their versions:

```sh
# List the names and versions of all peer dependencies...
npm info "@svengreb/eslint-config" peerDependencies

# ...and install each listed package manually.
npm install PACKAGE@VERSION
```

##### Using Yarn instead of npm

If you’re not using npm but Yarn, peer dependencies can be installed by either adding them manually or using the [install-peerdeps][17] helper package:

```sh
# Either add all packages manually by listing all required names and their versions and install them manually...
yarn info @svengreb/eslint-config peerDependencies
yarn add --dev remark-lint #...

# ...or use the "install-peerdeps" helper package.
yarn add --dev install-peerdeps
yarn run install-peerdeps --dev @svengreb/eslint-config
```

### Usage

This package provides a [shareable configuration preset][1] that can be used by [extending the ESLint configuration file][2]. Add `@svengreb/eslint-config` and/or any of the [additional entry points](#entry-points) to the `extends` array in your `.eslintrc` configuration file:

```js
module.exports = {
  extends: [
    /* Provides all base rules and specific rules for "React" and "JSX A11Y". */
    "@svengreb/eslint-config"
    /*
     * Optional entry point to enable support for projects using React Hooks.
     */
    "@svengreb/eslint-config/react-hooks"
  ]
};
```

## Entry Points

This package provides multiple entry points that can be composed especially for the projects they are used in:

- `@svengreb/eslint-config` — The default entry point that includes the base rules of the [@svengreb/eslint-config-base][13] package as well as additional rules from the [eslint-plugin-react][8] and [eslint-plugin-jsx-a11y][6] packages.
- `@svengreb/eslint-config/react-hooks` — Entry point to enable support for [React _Hooks_][19] through [eslint-plugin-react-hooks][7].

## Contributing

Please read the [contribution guidelines][11] of the [JavaScript style guide][12] project for detailed information.

<p align="center">
  <picture>
    <source srcset="https://raw.githubusercontent.com/svengreb/assets/main/static/images/elements/separators/logo/footer/dark/spaced.svg?sanitize=true" width="100%" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" />
    <source srcset="https://raw.githubusercontent.com/svengreb/assets/main/static/images/elements/separators/logo/footer/light/spaced.svg?sanitize=true" width="100%" media="(prefers-color-scheme: dark)" />
    <img src="https://raw.githubusercontent.com/svengreb/assets/main/static/images/elements/separators/logo/footer/dark/spaced.svg?sanitize=true" width="100%" />
  </picture>
</p>

<p align="center">
  Copyright &copy; 2016-present <a href="https://www.svengreb.de" target="_blank">Sven Greb</a>
</p>

<p align="center">
  <a href="https://github.com/svengreb/styleguide-javascript/blob/main/license" target="_blank">
    <img src="https://img.shields.io/static/v1.svg?style=flat-square&label=License&message=MIT&logoColor=eceff4&colorA=4c566a&colorB=88c0d0" />
  </a>
  <a href="https://www.svengreb.de">
    <img src="https://img.shields.io/static/v1.svg?style=flat-square&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAABMklEQVQ4jcWQvUoDQRRGz52s5IfVIiDWPkGKFFaCIVaGdIagjcFAwICFb7DvIK6QQlNpY2UQLMQVBbEQ0SewFkGbKCQmOzaTJay7/lR+zTAf9xwuF/47Mv45rdezqWEq72v/RWZnHgqOMwDwHMfSj085JSqb6Pu38we7r18E3nqzhmYbsE11rxKsAvhDfQiSM30XYbOw57YDwfnaRl6U3ABWaMNn806H+oGPzBX3d+4UgChZiYBHYBgGsBLoKoAyhR0x9G20Zmpc4P1ZoMQDcwMNclFrdhBKv6M5WWi7ZQGtjEUn35IV4OwnVjSX/WGmKqCDDUa5rmyle3bvGFiMg3WGUsF1u0EXHoqTRMGRgkAy2eugKZrqijRLYThWANBpNDL2h3UE0J0YLJdbrfe42f/NJ0wqY7/KcXKPAAAAAElFTkSuQmCC&label=lovely%20crafted%20in&message=Germany&colorA=4c566a&colorB=88c0d0" />
  </a>
</p>

[1]: https://eslint.org/docs/developer-guide/shareable-configs
[2]: https://eslint.org/docs/user-guide/configuring#extending-configuration-files
[3]: https://eslint.org
[4]: https://github.blog/2020-10-13-presenting-v7-0-0-of-the-npm-cli
[5]: https://github.com/import-js/eslint-plugin-import
[6]: https://github.com/evcohen/eslint-plugin-jsx-a11y
[7]: https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks
[8]: https://github.com/jsx-eslint/eslint-plugin-react
[9]: https://github.com/npm/rfcs/blob/latest/implemented/0025-install-peer-deps.md
[10]: https://github.com/remarkjs/remark-lint
[11]: https://github.com/svengreb/styleguide-javascript#contributing
[12]: https://github.com/svengreb/styleguide-javascript
[13]: https://github.com/svengreb/styleguide-javascript/tree/main/packages/@svengreb/eslint-config-base
[14]: https://nodejs.org/en/blog/npm/peer-dependencies
[15]: https://nodejs.org/dist/index.json
[16]: https://nodejs.org/dist/latest-v8.x
[17]: https://www.npmjs.com/package/install-peerdeps
[18]: https://www.npmjs.com/package/npx
[19]: https://reactjs.org/docs/hooks-intro.html
[20]: https://classic.yarnpkg.com