Skip to content
Biome
Docs Blog Playground

noSuspiciousSemicolonInJsx (since v1.6.0)

Diagnostic Category: lint/suspicious/noSuspiciousSemicolonInJsx

It detects possible “wrong” semicolons inside JSX elements.

Semicolons that appear after a self-closing element or a closing element are usually the result of a typo of a refactor gone wrong.

Examples

Section titled Examples

Invalid

Section titled Invalid
const Component = () => {
  return (
    <div>
      <div />;
    </div>
 );
}
suspicious/noSuspiciousSemicolonInJsx.js:4:14 lint/suspicious/noSuspiciousSemicolonInJsx ━━━━━━━━━━━

  ✖ There is a suspicious semicolon in the JSX element.
  
    2 │   return (
    3 │     <div>
  > 4 │       <div />;
      │              ^
  > 5 │     </div>
      │     
    6 │  );
    7 │ }
  
  ℹ This is usually the result of a typo or some refactor gone wrong.
  
  ℹ Remove the semicolon, or move it inside a JSX element.

Valid

Section titled Valid
const Component = () => {
  return (
    <div>
      <div />
      ;
    </div>
  );
}
const Component2 = () => {
  return (
    <div>
      <span>;</span>
    </div>
  );
}
Section titled Related links