npm package: @svengreb/eslint-config-typescript
Description: The opinionated, yet universally applicable JavaScript code style guide rules with TypeScript 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-typescript" target="_blank">
    <img src="https://img.shields.io/npm/v/@svengreb/eslint-config-typescript.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-typescript" target="_blank">
    <img src="https://img.shields.io/npm/dt/@svengreb/eslint-config-typescript.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][19] as an extensible shared [ESLint][3] configuration with plugin support for [TypeScript][30] through the official [TypeScript ESLint][14] project as well as compatibility integrations for other projects like [Prettier][28].

## Getting Started

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

To only use the ESLint core and [`eslint-plugin-import`][6] rules, please use the base configurations of the [@svengreb/eslint-config-base][20] 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][31] (classic / `v1`).

### Installation

Add the package as development dependency to your project:

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

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

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

#### Peer Dependencies

This package depends on the [`@typescript-eslint/parser`][11], [`@typescript-eslint/eslint-plugin`][10] and [`typescript`][22] packages defined as [peer dependencies][23].
Since this configuration provides an integration entry point for [Prettier][28] , the additional [`eslint-plugin-prettier`][8], [`eslint-config-prettier][5] peer dependencies are also required.

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

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

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

##### 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`][27] package globally to run the above command or use the [install-peerdeps][26] 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-typescript

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

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-typescript" peerDependencies

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

### Usage

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

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

As of [`@typescript-eslint/parser` version `2.0.0`][13] (also see [typescript-eslint/typescript-eslint#890][15]), the parser will panic when parsing files that are not included within the provided _tsconfig(s)_. The `project` field passed to ESLint's `parserOptions` object is required and must point to a valid `tsconfig` file where [the `include` field][29] is correctly set up to contain pattern for all files that should be linted.

Set the `project` field in your `eslintrc` to the path of your `tsconfig` and optionally also set the `tsconfigRootDir` when working with multiple _tsconfigs_:

```js
module.exports = {
  // ...
  parserOptions: {
    project: "./tsconfig.json",
  },
  // ...
};
```

Ensure your `tsconfig` is correctly configured to provide all file pattern for files that should be linted [in the `include` array][29] and optionally define pattern that should be excluded:

```jsonc
{
  // ...
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "test/**/*.ts",
    "test/**/*.tsx",
    "typings/**/*.ts"
    // ...
  ]
  // ...
}
```

The `extends` feature for _tsconfigs_ can be used to prevent code duplication by extending the root `tsconfig` and only overriding the `include` file or any other fields.

See the [`@typescript-eslint/parser` configuration documentation][12] for all details about the `parserOptions` field(s) and the [TypScript `tsconfig` documentation][29] to correctly configure the `include` file pattern.

## Entry Points

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

- `@svengreb/eslint-config-typescript` — The default entry point that includes the specific rules for TypeScript by extending the lightweight and recommended shared configurations of the [`@typescript-eslint/eslint-plugin`][10] and [`eslint-config-prettier`][5] packages as well as overriding and adjusting various plugin and core rules to ensure the best compatibility with TypeScript:
  - `@typescript-eslint/eslint-recommended` — Disables ESLint core rules that are already handled by TypeScript.
  - `@typescript-eslint/recommended` — Slim and recommended set of rules for TypeScript that does not require type information.
  - `@typescript-eslint/recommended-requiring-type-checking` — Additionally enable the slightly expanded set of rules that require type information. It also disables some ESLint core rules for compatibility since they are already handled by TypeScript.
- `@svengreb/eslint-config-typescript/prettier` — Entry point to enable support for [Prettier][28] through [`eslint-plugin-prettier`][8] and the officially recommended Prettier ESLint configuration using the [`eslint-config-prettier`][5] package. 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 TypeScript based projects by extending the special `prettier/@typescript-eslint` configuration that also disables specific `react/*` and JSX rules. Note that this configuration **should always be placed after `@svengreb/eslint-config-typescript`** in order to override conflicting rules, otherwise the `@svengreb/eslint-config-typescript` preset will take precedence leaving conflicting rules untouched!

## Contributing

Please read the [contribution guidelines][18] of the [JavaScript style guide][19] 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/typescript-eslint/typescript-eslint/tree/main/packages/eslint-plugin
[11]: https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/parser
[12]: https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/parser#configuration
[13]: https://github.com/typescript-eslint/typescript-eslint/releases/tag/v2.0.0
[14]: https://github.com/typescript-eslint/typescript-eslint
[15]: https://github.com/typescript-eslint/typescript-eslint/issues/890
[16]: https://github.com/npm/rfcs/blob/latest/implemented/0025-install-peer-deps.md
[17]: https://github.com/remarkjs/remark-lint
[18]: https://github.com/svengreb/styleguide-javascript#contributing
[19]: https://github.com/svengreb/styleguide-javascript
[20]: https://github.com/svengreb/styleguide-javascript/tree/main/packages/@svengreb/eslint-config-base
[21]: https://github.com/svengreb/styleguide-javascript/tree/main/packages/@svengreb/eslint-config
[22]: https://github.com/microsoft/TypeScript
[23]: https://nodejs.org/en/blog/npm/peer-dependencies
[24]: https://nodejs.org/dist/index.json
[25]: https://nodejs.org/dist/latest-v8.x
[26]: https://www.npmjs.com/package/install-peerdeps
[27]: https://www.npmjs.com/package/npx
[28]: https://prettier.io
[29]: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#details
[30]: https://www.typescriptlang.org
[31]: https://classic.yarnpkg.com