Eslint-plugin-react-ts NPM

eslint-plugin-react-ts

ESLint plugin for React and Preact function components with TypeScript, built from scratch (almost).

Warning This plugin is still in early development, and will likely change significantly before reaching a stable version.

Supported Engines

Node.js

18.x LTS Hydrogen
20.x Current

Bun

Installation

# npm
npm install --save-dev eslint-plugin-react-ts

# pnpm
pnpm add --save-dev eslint-plugin-react-ts

# yarn
yarn add --dev eslint-plugin-react-ts

# bun
bun add --dev eslint-plugin-react-ts

Usage

`.eslintrc`

{
    "extends": [
        "plugin:react-ts/recommended"
    ],
    "rules": {
        "react-ts/<rule-name>": "error"
    }
}

`eslint.config.js` (requires eslint >= v8.23.0)

import reactTsRecommended from "eslint-plugin-react-ts/configs/recommended";

export default [
    reactTsRecommended,
    {
        rules: {
            "react-ts/<rule-name>": "error",
            // ...
        },
    },
];

Rules

💼 Configurations enabled in.\ ⚠️ Configurations set to warn in.\ 👍 Set in the recommended configuration.\ 🔍 Set in the recommended-type-checked configuration.

debug

Name	Description	💼	⚠️
debug/function-component	reports all function components, including anonymous ones

jsx

Name	Description	💼	⚠️
jsx/no-leaked-conditional-rendering	disallow problematic leaked values from being rendered	👍 🔍
jsx/no-misused-comment-in-textnode	disallow comments from being inserted as text nodes		👍 🔍
jsx/prefer-shorthand-boolean	enforce boolean attributes notation in JSX		👍 🔍

naming-convention

Name	Description	💼	⚠️
naming-convention/event-handler	enforce event handler naming conventions in JSX
naming-convention/filename	enforce naming convention for jsx files
naming-convention/filename-extension	enforce using `.ts` instead of `.tsx` extension when there is no JSX in the file

react

Name	Description	💼
no-constructed-context-value	disallows passing constructed values to context providers	👍 🔍
no-dangerously-set-innerhtml	disallow when a DOM element is using both children and dangerouslySetInnerHTML'	👍 🔍
no-dangerously-set-innerhtml-with-children	disallow when a DOM element is using both children and dangerouslySetInnerHTML'	👍 🔍
no-deprecated-string-refs	disallow using deprecated string refs	👍 🔍
no-unstable-default-props	disallow usage of referential-type variables as default param in function component	👍 🔍

Rules status

Work in progress

react-ts/jsx/prefer-shorthand-boolean
react-ts/jsx/no-leaked-conditional-rendering
react-ts/jsx/no-misused-comment-in-textnode
react-ts/jsx/no-useless-fragment
react-ts/jsx/no-missing-key-prop
react-ts/jsx/no-array-index-key
react-ts/naming-convention/event-handler
react-ts/naming-convention/filename
react-ts/naming-convention/filename-extension
react-ts/no-constructed-context-value
react-ts/no-dangerously-set-innerhtml
react-ts/no-dangerously-set-innerhtml-with-children
react-ts/no-deprecated-string-refs
react-ts/no-unstable-default-props
react-ts/no-unstable-nested-components
react-ts/no-missing-display-name
react-ts/no-direct-mutation-state
...

Planned (will be added in the future)

react-ts/jsx/no-complicated-conditional-rendering
react-ts/hooks/no-suppressing-exhaustive-deps
react-ts/no-access-ref-current-during-rendering
react-ts/no-legacy-children-methods
react-ts/no-legacy-class-components
react-ts/no-legacy-clone-element
react-ts/no-legacy-createRef
...

Philosophy

Focus on code rather than style.
Linting errors are better than runtime crashes.
Types are the fundamental unit of correctness.

Rule introduction or modification principles

TypeScript first. If a behavior can already be enforced by TypeScript built-in checker, don't reimplement it.
Formatting independent. Rules should check for correctness, not style. We recommend using style focused tools for formatting (e.g. dprint or eslint-stylistic).
Sensible defaults. Rules should be easy to setup and use with minimal configuration and sensible defaults.