---
# Don't modify this file manually. This file is auto generated from source, and you will lose your changes next time the website is built.
# Head to the `biomejs/biome` repository, and modify the source code in there.

title: noSuspiciousSemicolonInJsx
description: Learn more about 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> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">There is a suspicious </span><span style="color: Orange;"><strong>semicolon</strong></span><span style="color: Orange;"> in the JSX element.</span><br />  <br />    <strong>2 │ </strong>  return (<br />    <strong>3 │ </strong>    &lt;div&gt;<br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>4 │ </strong>      &lt;div /&gt;;<br />   <strong>   │ </strong>             <strong><span style="color: Tomato;">^</span></strong><br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>5 │ </strong>    &lt;/div&gt;<br />   <strong>   │ </strong>    <br />    <strong>6 │ </strong> );<br />    <strong>7 │ </strong>&#125;<br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This is usually the result of a typo or some refactor gone wrong.</span><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Remove the </span><span style="color: lightgreen;"><strong>semicolon</strong></span><span style="color: lightgreen;">, or move it inside a JSX element.</span><br />  <br /></code></pre>

### Valid

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

## Related links

- [Disable a rule](/linter/#disable-a-rule)
- [Configure the code fix](/linter#configure-the-code-fix)
- [Rule options](/linter/#rule-options)
- [Source Code](https://github.com/biomejs/biome/blob/main/crates/biome_js_analyze/src/lint/suspicious/no_suspicious_semicolon_in_jsx.rs)
- [Test Cases](https://github.com/biomejs/biome/blob/main/crates/biome_js_analyze/tests/specs/suspicious/noSuspiciousSemicolonInJsx)

</TabItem>
</Tabs>