Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

eslint-plugin-react-ts

Package Overview
Dependencies
Maintainers
2
Versions
23
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

eslint-plugin-react-ts

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

  • 0.2.5
  • unpublished
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
Maintainers
2
Weekly downloads
 
Created
Source

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

  • 1.x

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

NameDescription💼⚠️
debug/function-componentreports all function components, including anonymous ones

jsx

NameDescription💼⚠️
jsx/no-leaked-conditional-renderingdisallow problematic leaked values from being rendered👍 🔍
jsx/no-misused-comment-in-textnodedisallow comments from being inserted as text nodes👍 🔍
jsx/prefer-shorthand-booleanenforce boolean attributes notation in JSX👍 🔍

naming-convention

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

react

Name                                      Description💼⚠️
no-constructed-context-valuedisallows passing constructed values to context providers👍 🔍
no-dangerously-set-innerhtmldisallow when a DOM element is using both children and dangerouslySetInnerHTML'👍 🔍
no-dangerously-set-innerhtml-with-childrendisallow when a DOM element is using both children and dangerouslySetInnerHTML'👍 🔍
no-deprecated-string-refsdisallow using deprecated string refs👍 🔍
no-unstable-default-propsdisallow 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

  1. TypeScript first. If a behavior can already be enforced by TypeScript built-in checker, don't reimplement it.
  2. Formatting independent. Rules should check for correctness, not style. We recommend using style focused tools for formatting (e.g. dprint or eslint-stylistic).
  3. 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

Package last updated on 05 Oct 2023

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc