@react-analyzer/tsl

(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 @react-analyzer/tsl

Then follow the installation guide for tsl.

Enabling rules

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

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
+  }
}

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 @react-analyzer/tsl).