ESLint Configuration for TypeScript Projects

3.0.0 · active · verified Tue Apr 21

eslint-config-typescript is an opinionated, base set of recommended ESLint rules specifically designed for TypeScript projects. It bundles configurations for common scenarios, including React and Prettier integration. The current stable version is 3.0.0. Release cadence appears to be driven by dependency updates and feature additions, with major versions introducing breaking changes. Its key differentiator is providing a pre-configured, modular setup that simplifies ESLint adoption for TypeScript, reducing the boilerplate of manually configuring `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` while offering extensions for popular tools like Prettier and React out-of-the-box. It requires ESLint 6.0.0 or higher for full functionality.

Common errors

```
Error: Failed to load config "typescript" to extend from. Referenced from ...
```
cause The `eslint-config-typescript` package or its peer dependencies are not installed, or ESLint cannot find them.

fix Run `npm install --save-dev eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint typescript`
```
Error: You have used a version of TypeScript which is not supported by @typescript-eslint/typescript-estree. Please update to TypeScript >=3.2.1.
```
cause The `typescript` peer dependency is outdated or incompatible with the installed `@typescript-eslint/parser`.

fix Update your project's `typescript` package: `npm install --save-dev typescript@latest`.
```
Error: The 'parser' option is required when using a custom parser. Please set 'parser' to '@typescript-eslint/parser' in your ESLint configuration file.
```
cause Although `eslint-config-typescript` sets the parser, if you define your own `parserOptions` or have conflicting configs, this error can appear.

fix Ensure your `.eslintrc` file explicitly includes `"parser": "@typescript-eslint/parser"` at the top level, or within specific `overrides`.

Warnings

breaking Version 3.0.0 introduces breaking changes by updating dependencies and introducing overrides exclusive to TypeScript. This requires ESLint version 6.0.0 or newer to support `extends` within overrides.
Fix: Ensure your project's `eslint` peer dependency is updated to `^6.0.0` or higher.
breaking Version 2.0.0 introduced breaking changes due to dependency upgrades and structural changes. The `prettier` configuration was updated to include TypeScript settings, and a new `prettier-react` configuration was introduced.
Fix: Review your ESLint configuration file when upgrading from v1 to v2. Specifically, if you were combining `prettier` and `react` manually, consider using the new `typescript/prettier-react` preset.
gotcha ESLint configuration files require the `eslint-config-typescript` entry to be placed last in the `extends` array to ensure it correctly overrides other configurations and applies its opinionated rules without conflicts.
Fix: Always list `"typescript"` (and its sub-configs like `"typescript/react"`) as the last entry in your `.eslintrc` file's `extends` array.

Install

npm install eslint-config-typescript npm
yarn add eslint-config-typescript yarn
pnpm add eslint-config-typescript pnpm

Imports

base configuration
wrong:
```
import config from 'eslint-config-typescript'
```
correct:
```
{ "extends": ["typescript"] }
```
ESLint configurations are typically 'extended' in the .eslintrc file, not directly imported as JavaScript modules.
React configuration
```
{ "extends": ["typescript/react"] }
```
Use this specific path in your ESLint config's `extends` array when working with React projects.
Prettier integration
```
{ "extends": ["typescript/prettier"] }
```
Extends the base config with Prettier-specific rules to disable conflicting ESLint rules and integrate Prettier formatting.
Prettier + React integration
```
{ "extends": ["typescript/prettier-react"] }
```
Automatically includes `typescript/prettier`. This is the recommended extension for React projects that also use Prettier.

Quickstart

This quickstart demonstrates a complete ESLint configuration for a TypeScript/React project, integrating Prettier with custom settings and additional plugins like `filenames` and `jest`.

{
  "extends": [
    "typescript",
    "typescript/prettier-react"
  ],
  "plugins": ["filenames", "jest"],
  "env": {
    "jest": true,
    "node": true
  },
  "rules": {
    "filenames/no-index": "error",
    "filenames/match-exported": ["error", "kebab"],
    "jest/no-disabled-tests": "error",
    "jest/no-focused-tests": "error",
    "jest/no-identical-title": "error",
    "jest/valid-expect": "error",
    "prettier/prettier": [
      "error",
      {
        "semi": false,
        "tabWidth": 4,
        "singleQuote": true
      }
    ]
  }
}

view raw JSON →