react-doctor/jsx-filename-extension

Use .jsx / .tsx (or your project's chosen extension) for files containing JSX.

• Category: Architecture
• Severity: warn
• Source: oxlint-plugin-react-doctor
• Framework: global
• Enabled when: off by default (opt-in)
• Documentation: https://oxc.rs/docs/guide/usage/linter/rules/react/jsx-filename-extension

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Fires when a JSXElement or JSXFragment appears in a file whose extension is not in the allowed set (default .jsx, .tsx), reporting once per file on the first JSX node. In allow: "as-needed" mode it additionally fires on an allowed-extension file that contains zero JSX — unless ignoreFilesWithoutCode is set and the file has no non-comment statements. False positive: this is a pure filename-convention check, so JSX in a .js file is flagged even though setups like Next.js and Create React App compile JSX in .js out of the box — suppress when the project intentionally allows JSX in that extension. (Note: Vite/esbuild is NOT such a setup — it errors on JSX in .js by default and effectively agrees with this rule.)

Fix prompt

Use this once validation confirms the diagnostic is real.

Rename the file to an allowed JSX extension so its contents match its name — e.g. Button.js -> Button.tsx (or .jsx for plain JS), updating any imports that reference the old path. If your toolchain intentionally permits JSX in .js/.ts, instead add that extension under this port's setting settings["react-doctor"].jsxFilenameExtension.extensions (e.g. extensions: ["js", "jsx", "tsx"]) rather than renaming. See https://oxc.rs/docs/guide/usage/linter/rules/react/jsx-filename-extension