Require TSX for Hooks

Error

small-rules/require-tsx-for-hooks

Require React hooks to be declared in a .tsx file.

Rationale

Many projects use the .tsx extension to mark React code. Their React lint rules run on .tsx files only, and the React Compiler often reads the same marker. A hook in a .ts file loses both without a warning. This rule reports a hook declared in a .ts file. A hook is a function whose name is use and then a capital letter or a digit, as the React Compiler defines it. Declaration files, declare signatures, re-exports, and aliases of an imported hook pass.

Diagnostic Messages

requireTsxForHooks

`{{name}}` is a React hook declared in a `.ts` file. Rename the file to `.tsx`: tooling that treats `.tsx` as the marker for React code, such as React lint rules scoped to `.tsx` and the React Compiler, skips it otherwise.

Configuration

This rule does not accept options.

.oxlintrc.json

{
  "jsPlugins": [
    "@pobammer-ts/small-rules"
  ],
  "rules": {
    "small-rules/require-tsx-for-hooks": "error"
  }
}

oxlint.config.ts

import { defineConfig } from "oxlint";

export default defineConfig({
  jsPlugins: ["@pobammer-ts/small-rules"],
  rules: {
    "small-rules/require-tsx-for-hooks": "error",
  },
});

Examples

Hook declared in a .ts file

export function useThing() { return 1; }

Hook declared in a .tsx file

export function useThing() { return 1; }