jsx
Reports all JSX elements and fragments in JSON format. Useful for debugging. This rule should be used only for debugging purposes; otherwise leave it off.
Full Name in eslint-plugin-react-debug
react-debug/jsxFeatures
🐞
Rule Details
This rule reports all JSX elements and fragments in JSON format. It includes information about the JSX runtime (automatic or classic), factory, fragment factory, and import source derived from tsconfig.json or pragma comments.
Examples
Automatic runtime JSX
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxFactory": "React.createElement",
"jsxFragmentFactory": "React.Fragment",
"jsxImportSource": "react"
}
}import React from "react";
// This rule reports JSX elements and includes automatic runtime information.
const element = <div>Hello World</div>;
// ^^^^^^^^^^^^^^^^^^^^^^
// - [jsx element] jsx: 'react-jsx', jsxFactory: 'React.createElement', jsxFragmentFactory: 'React.Fragment', jsxRuntime: 'automatic', jsxImportSource: 'react'Classic runtime with pragma comments
/** @jsx Preact.h */
/** @jsxFrag Preact.Fragment */
/** @jsxImportSource preact */
/** @jsxRuntime classic */
import Preact from "preact";
// This rule reports JSX elements and includes classic runtime information from pragma comments.
const element = <div>Hello World</div>;
// ^^^^^^^^^^^^^^^^^^^^^^
// - [jsx element] jsx: 'react', jsxFactory: 'Preact.h', jsxFragmentFactory: 'Preact.Fragment', jsxRuntime: 'classic', jsxImportSource: 'preact'Versions
Resources
See Also
react-debug/function-component
Reports all function components in JSON format.react-debug/is-from-react
Reports all identifiers initialized from React in JSON format.