Rules
no-leaked-semicolon
Catches ';' at the start of JSX text nodes — typically from accidentally placing a statement-ending ';' inside JSX. The ';' "leaks" into the rendered output.
Full Name in eslint-plugin-react-jsx
react-jsx/no-leaked-semicolonFull Name in @eslint-react/eslint-plugin
@eslint-react/jsx-no-leaked-semicolonFeatures
🔧
Presets
recommended
recommended-typescript
recommended-type-checked
strict
strict-typescript
strict-type-checked
Rule Details
When refactoring JSX, trailing semicolons may be accidentally left immediately after JSX elements or fragments. This causes ; to be unexpectedly rendered as text nodes:
// before
return <div />;
// after
return (
<div>
<div />;
</div>
);Common Violations
Invalid
function MyComponent() {
return (
<div>
<div />;
</div>
);
}function MyComponent() {
return (
<div>
<Component>
<div />
</Component>;
</div>
);
}Valid
function MyComponent() {
return (
<div>
<div />
</div>
);
}function MyComponent() {
return (
<div>
<div />
;
</div>
);
}Resources
See Also
react-jsx/no-leaked-dollar
Catches$before{expr}in JSX — typically from template literal${expr}being copy-pasted into JSX without removing the$. The$"leaks" into the rendered output.