react/self-closing-comp Style
What it does
Detects components without children which can be self-closed to avoid unnecessary extra closing tags.
Why is this bad?
Components without children don't need explicit closing tags. Using self-closing syntax makes code more concise and reduces visual clutter. It also follows common React and JSX conventions for empty elements.
A self-closing component which contains whitespace is allowed except when it also contains a newline.
Examples
Examples of incorrect code for this rule:
jsx
const elem = <Component linter="oxlint"></Component>;
const dom_elem = <div id="oxlint"></div>;
const welem = (
<div id="oxlint">
</div>
);Examples of correct code for this rule:
jsx
const elem = <Component linter="oxlint" />;
const welem = <Component linter="oxlint"></Component>;
const dom_elem = <div id="oxlint" />;Configuration
This rule accepts a configuration object with the following properties:
component
type: boolean
default: true
Whether to enforce self-closing for custom components.
html
type: boolean
default: true
Whether to enforce self-closing for native HTML elements.
How to use
To enable this rule in the CLI or using the config file, you can use:
bash
oxlint --deny react/self-closing-comp --react-pluginjson
{
"plugins": ["react"],
"rules": {
"react/self-closing-comp": "error"
}
}