noSuspiciousSemicolonInJsx

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.6.0` - Diagnostic Category: [`lint/suspicious/noSuspiciousSemicolonInJsx`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule doesn't have a fix. - The default severity of this rule is [**warning**](/reference/diagnostics#warning). ## How to configure ```json title="biome.json" { "linter": { "rules": { "suspicious": { "noSuspiciousSemicolonInJsx": "error" } } } }

## Description
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

### Invalid

```jsx
const Component = () => {
  return (
    <div>
      <div />;
    </div>
 );
}

<pre class="language-text"><code class="language-text">code-block.jsx:4:14 <a href="https://biomejs.dev/linter/rules/no-suspicious-semicolon-in-jsx">lint/suspicious/noSuspiciousSemicolonInJsx</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⚠ 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. </code></pre>

Valid

jsx

const Component = () => {
  return (
    <div>
      <div />
      ;
    </div>
  );
}
const Component2 = () => {
  return (
    <div>
      <span>;</span>
    </div>
  );
}

</TabItem> </Tabs>

Valid

Related links