eslint-config-ts-react-important-stuff

3.0.0 verified Sat Apr 25 auth: no javascript

An ESLint configuration preset for React and TypeScript projects, currently at version 3.0.0 (released 2023). It extends eslint-config-react-important-stuff and disables rules that conflict with TypeScript. It is a lightweight, opinionated set of rules focusing on important React patterns. Compared to alternatives like eslint-config-react-app, it is more minimal and does not include parser or plugin dependencies. Releases are infrequent and tied to upstream changes. The package has a low maintenance cadence.

Common errors

error Error: Failed to load parser '@typescript-eslint/parser' ↓

cause Missing @typescript-eslint/parser dependency.

fix

Run: npm install --save-dev @typescript-eslint/parser

error Error: Cannot find module 'eslint-config-react-important-stuff' ↓

cause The peer dependency eslint-config-react-important-stuff is not installed.

fix

Run: npm install --save-dev eslint-config-react-important-stuff

error Error: Configuration for rule 'react/display-name' is invalid ↓

cause The rule configuration in the upstream react-important-stuff may have been updated incompatibly.

fix

Check your eslint config and ensure rules are properly formatted; consider adding 'rules': { 'react/display-name': 'warn' } to override.

Warnings

breaking v3.0.0 upgraded eslint-config-react-important-stuff, which may include breaking rule changes. ↓

fix Review the upstream release notes at https://github.com/joeldenning/eslint-config-react-important-stuff/releases/tag/v3.0.0 and adjust your codebase.

breaking v2.0.0 no longer assumes babel-eslint parser; you must configure a parser (e.g., @typescript-eslint/parser). ↓

fix Install @typescript-eslint/parser and add 'parser': '@typescript-eslint/parser' to your ESLint config.

gotcha The config does not include @typescript-eslint/parser or plugins as dependencies; you must install them separately. ↓

fix In addition to this package, install @typescript-eslint/parser, @typescript-eslint/eslint-plugin, eslint-plugin-react, and eslint-plugin-react-hooks.

gotcha Mistakenly using the full package name in 'extends' will not work; use 'ts-react-important-stuff'. ↓

fix Use 'extends': ['ts-react-important-stuff'] (without the 'eslint-config-' prefix).

Install

npm install eslint-config-ts-react-important-stuff

yarn add eslint-config-ts-react-important-stuff

pnpm add eslint-config-ts-react-important-stuff

Imports

config
wrong
```
{
  "extends": ["eslint-config-ts-react-important-stuff"]
}
```
correct
```
{
  "extends": ["ts-react-important-stuff"]
}
```
Use the shorthand 'ts-react-important-stuff' in ESLint config. The full package name is not needed; ESLint resolves it automatically.

typescript parser

wrong

// Attempting to import parser from this package

correct

// Not directly exported; ensure you have @typescript-eslint/parser installed

This config does not provide a parser; you must install @typescript-eslint/parser separately.

overrides

wrong

{
  "extends": ["ts-react-important-stuff"],
  "overrides": [{
    "files": ["*.ts", "*.tsx"]
  }]
}

correct

{
  "extends": ["ts-react-important-stuff"],
  "overrides": [{
    "files": ["*.ts", "*.tsx"],
    "rules": {}
  }]
}

Overrides for TypeScript files are typically not needed because the config already targets them, but if you need custom rules, ensure the overrides structure is correct.

Quickstart

Installation and basic ESLint configuration for a TypeScript React project.

npm install --save-dev eslint-config-ts-react-important-stuff @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks
# Then create .eslintrc.json:
{
  "extends": ["ts-react-important-stuff"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2020,
    "sourceType": "module"
  }
}