# 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

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.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Inspiration

Keywords

FAQs

What is eslint-plugin-react-ts?

Is eslint-plugin-react-ts well maintained?

Package last updated on 05 Oct 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

eslint-plugin-react-ts