@lms5400/eslint-plugin-rsx

ESLint rules for RSX components.

RSX files use JSX syntax but do not follow React’s runtime or hook model.
This plugin enforces RSX-specific semantics while remaining compatible with React projects.

See https://github.com/LMS007/babel-plugin-rsx

---

What this plugin enforces

RSX components are not React components. This plugin helps enforce that distinction by:

• Disallowing React hooks (useState, useEffect, etc.)
• Disallowing useRef
• Requiring RSX context destructuring
• Allowing JSX syntax

---

Requirements

• ESLint ≥ 8.57 (flat config)
• Node.js ≥ 18
• babel-plugin-rsx

---

Installation

npm

npm install --save-dev eslint @lms5400/eslint-plugin-rsx

Or yarn

yarn add -D eslint @lms5400/eslint-plugin-rsx

---

Basic setup (React + RSX)

This setup assumes:

• .jsx / .tsx files use normal React rules
• .rsx files use RSX rules
• ESLint flat config is enabled

eslint.config.js (or eslint.config.cjs)

import js from "@eslint/js";
import globals from "globals";
import react from "eslint-plugin-react";
import reactHooks from "eslint-plugin-react-hooks";
import rsx from "@lms5400/eslint-plugin-rsx";

export default [
  // ----------------------------------------
  // React JSX / TSX files
  // ----------------------------------------
  {
    files: ["**/*.{jsx,tsx}"],
    plugins: {
      react,
      "react-hooks": reactHooks,
    },
    rules: {
      // React + hooks rules
    },
  },

  // ----------------------------------------
  // RSX files
  // ----------------------------------------
  {
    files: ["**/*.rsx"],
    plugins: {
      rsx,
    },
    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",
      globals: {
        ...globals.browser,
        ...globals.node,
      },
      parserOptions: {
        ecmaFeatures: { jsx: true },
      },
    },
    rules: {
      // Base JS rules
      ...js.configs.recommended,
      // RSX rules
      ...rsx.configs.recommended
    },
  },
];

---

Why React rules are not applied to .rsx

RSX files:

• may contain JSX
• do not use React hooks
• do not rely on React reconciliation
• have explicit lifecycle management

Applying eslint-plugin-react rules to .rsx files often produces incorrect or misleading errors.

If you want minimal JSX hygiene, you may selectively enable rules like:

• react/jsx-no-undef
• react/jsx-uses-vars

Full React recommended rules are not advised for RSX.

---

VS Code setup (required)

The ESLint VS Code extension does not automatically lint custom extensions like .rsx.

Add the following to your workspace settings.

.vscode/settings.json

{
  "eslint.useFlatConfig": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
  ],
  "files.associations": {
    "*.rsx": "javascriptreact"
  },
  "eslint.nodePath": "./node_modules"
}

After changing settings:

1. Open Command Palette
2. Run “ESLint: Restart ESLint Server”
3. Reload the window if needed

---

Verifying the setup

Create a test RSX file:

export default function Test(ctx) {
  useState(0);
}

Expected:

• ❌ ESLint error
• Rule: rsx/no-react-hooks
• Visible inline and in the Problems panel

---

Rules

Rule	Description
rsx/no-react-hooks	Disallow React hooks in RSX
rsx/no-use-ref	Disallow useRef
rsx/require-ctx-destructure	Require RSX context destructuring
rsx/jsx-uses-vars	Mark JSX components as used (prevents false-positive no-unused-vars errors)

---

Design philosophy

• RSX is explicit and lifecycle-driven
• JSX is syntax, not a runtime commitment
• Linting should enforce RSX semantics, not React assumptions

---

License

MIT