npm package: @svengreb/eslint-config-base
Description: The opinionated, yet universally applicable JavaScript code style guide base rules 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-base/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-base/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-base/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-base" target="_blank">
    <img src="https://img.shields.io/npm/v/@svengreb/eslint-config-base.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-base" target="_blank">
    <img src="https://img.shields.io/npm/dt/@svengreb/eslint-config-base.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>

<p align="center">The opinionated, yet universally applicable <a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a> code style guide base rules as an extensible shared <a href="https://eslint.org" target="_blank">ESLint</a> configuration.</p>

This package implements the base rules of the [opinionated, yet universally applicable JavaScript code style guide][15] as an extensible [ESLint][3] configuration with plugin support for [Prettier][24].

## Getting Started

To enable support for [React][9] and [JSX A11Y][7] plugin rules as well as compatibility integrations for other projects like [Prettier][24], use the shareable rule configuration package [@svengreb/eslint-config][16].

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][25] (classic / `v1`).

### Installation

Add the package as development dependency to your project:

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

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

Note that [peer dependencies][19], like the [remark-lint][13] 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][20] for more information about which npm version is bundled with which Node version.

#### Peer Dependencies

Next to all base ESLint rules, the default export also contains rules related to ECMAScript 6+ including the [import][18] and [export][17] features as well as compatibility integrations for other projects like [Prettier][24].
Therefore this package depends on the [`eslint-plugin-import`][6], [eslint-plugin-prettier][8], [prettier][12] and [`eslint`][10] packages that are defined as [peer dependencies][19].

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

As of **npm version `7.0.0`, peer dependencies are** [**installed automatically**][11] 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][21]) but less than `7.0.0`**, all peer dependencies can be auto-installed using the pre-bundled [`npx`][23] package:

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

##### 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`][23] package globally to run the above command or use the [install-peerdeps][22] 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-base

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

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-base" 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][22] 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-base 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-base
```

### Usage

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

```js
module.exports = {
  extends: [
    /* Provides support for all ESLint core rules. */
    "@svengreb/eslint-config-base",
    /*
     * Optional entry point to enable support for projects using Prettier.
     * Note that this must always be placed after the `@svengreb/eslint-config-base` preset to take precedence,
     * otherwise it won't prevent errors due to useless and possibly conflicting rules!
     */
    "@svengreb/eslint-config-base/prettier",
  ],
};
```

## Entry Points

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

- `@svengreb/eslint-config-base` — The default entry point that support for all ESLint core rules.
- `@svengreb/eslint-config-base/prettier` — Entry point to enable support for [Prettier][24] through [eslint-plugin-prettier][8] and the officially recommended Prettier ESLint configuration [eslint-config-prettier][5]. It disables possibly conflicting rules and rules that definitely not needed when using Prettier for code formatting. There is also additional support when Prettier is used for React based projects by extending the special `prettier/react` configuration that also disables specific `react/` and JSX rules. See the [@svengreb/eslint-config][16] package to use React specific rules. Note that this configuration **should always be placed after `@svengreb/eslint-config-base`** in order to override conflicting rules, otherwise the `@svengreb/eslint-config-base` preset will take precedence leaving conflicting rules untouched!

## Contributing

Please read the [contribution guidelines][14] of the [JavaScript style guide][15] 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/latest/extend/shareable-configs
[2]: https://eslint.org/docs/latest/use/configure/#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/prettier/eslint-config-prettier
[6]: https://github.com/import-js/eslint-plugin-import
[7]: https://github.com/evcohen/eslint-plugin-jsx-a11y
[8]: https://github.com/prettier/eslint-plugin-prettier
[9]: https://github.com/jsx-eslint/eslint-plugin-react
[10]: https://github.com/eslint/eslint
[11]: https://github.com/npm/rfcs/blob/main/implemented/0025-install-peer-deps.md
[12]: https://github.com/prettier/prettier
[13]: https://github.com/remarkjs/remark-lint
[14]: https://github.com/svengreb/styleguide-javascript#contributing
[15]: https://github.com/svengreb/styleguide-javascript
[16]: https://github.com/svengreb/styleguide-javascript/tree/main/packages/@svengreb/eslint-config
[17]: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
[18]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
[19]: https://nodejs.org/en/blog/npm/peer-dependencies
[20]: https://nodejs.org/dist/index.json
[21]: https://nodejs.org/dist/latest-v8.x
[22]: https://www.npmjs.com/package/install-peerdeps
[23]: https://www.npmjs.com/package/npx
[24]: https://prettier.io
[25]: https://classic.yarnpkg.com