tsl-react

• Installation
• Enabling rules
• Specifying project-aware React configuration
• Roadmap
  • Port Local
  • Port Utility
  • Port Core & Shared
  • Port ESLint Plugins
  • Port ESLint Rules
• License
• Acknowledgements

(WIP) Bring the same linting functionality that eslint-react.xyz has to the TypeScript LSP.

This package provides the rulesets from beta.eslint-react.xyz/docs/rules/overview as custom rules for the ArnaudBarre/tsl linting tool.

Installation

pnpm add -D tsl tsl-react

Then follow the installation guide for tsl.

Enabling rules

// tsl.config.ts
import { core, defineConfig } from "tsl";
+ import * as react from "tsl-react";

export default defineConfig({
  rules: [
    ...core.all(),
+    react.noLeakedConditionalRendering(),
  ],
});

Specifying project-aware React configuration

In your tsconfig.json or jsconfig.json add the following:

{
  "compilerOptions": {
+    "jsx": "react-jsx",
    "plugins": [{ "name": "tsl/plugin" }],
  },
+  "react": {
+    "version": "19.1.0" // or "detect" to automatically detect the version
+    // other options can be added here
+  }
}

Roadmap

Port Local

• .pkgs/configs to .pkgs/configs
• .pkgs/eslint-plugin-local to .pkgs/tsl-local

Port Utility

• @eslint-react/eff to @react-analyzer/eff
• @eslint-react/ast to @react-analyzer/ast
• @eslint-react/var to @react-analyzer/var
• @eslint-react/kit to @react-analyzer/kit

Port Core & Shared

• @eslint-react/core to @react-analyzer/core
• @eslint-react/shared to @react-analyzer/shared

Port ESLint Plugins

• @eslint-react/eslint-plugin to tsl-react
• eslint-plugin-react-x to tsl-react-x
• eslint-plugin-react-dom to tsl-react-dom
• eslint-plugin-react-web-api to tsl-react-web-api
• eslint-plugin-react-hooks-extra to tsl-react-hooks-extra
• eslint-plugin-react-naming-convention to tsl-react-naming-convention

Port ESLint Rules

• noLeakedConditionalRendering: Prevents problematic leaked values from being rendered.
• ...

License

This project is licensed under the MIT License.

Acknowledgements

We extend our gratitude to:

• ArnaudBarre/tsl for the core and AST type rewrite, which significantly streamlined custom rules development within TypeScript Language Service Plugin.
• johnsoncodehk/tsslint for their early explorations of exposing the TypeScript Language Server diagnostic interface.
• typescript-eslint/typescript-eslint for providing the foundation where these custom rules were initially developed and tested.
• Effect-TS/language-service for inspiring the creation of typescriptreact-language-service (now tsl-react).