Problem Description

It can happen that trailing semicolons are unintentionally left in JSX, for example when wrapping a one-liner in another jsx element/fragment:

// before
return <div />;

// after
return (
  <div>
    <div />;
  </div>
);

this will then render a text node with ; in the DOM, which is not intended in 99.99% of cases.

Biome has a rule for this:
https://biomejs.dev/linter/rules/no-suspicious-semicolon-in-jsx/
The original rule request in Biome:
biomejs/biome#927

Alternative Solutions

🤷‍♂️

Rule Documentation Template

Rule Details

When refactoring JSX, trailing semicolons may be kept unintentionally immediately after JSX elements or fragments. This leads to ; semicolons being unexpectedly rendered as text nodes in the DOM.

Common Violations

Invalid

// ❌ Bad: a trailing semicolon will be rendered in the DOM
return (
  <div>
    <div />;
  </div>
);

// ❌ Bad: a trailing semicolon will be rendered in the DOM
return (
  <div>
    <Component>
      <div />
    </Component>;
  </div>
);

Valid

// ✅ Good: no issues
return (
  <div>
    <div />
  </div>
);

// ✅ Good: rendering a semicolon on its own line is more explicit, it may be intentional, it is easier to catch during code reviews
return (
  <div>
    <div />
    ;
  </div>
);

// ✅ Good: rendering a semicolon in a JSX expression is more explicit, it may be intentional, it is easier to catch during code reviews
return (
  <div>
    <div />{';'}
  </div>
);

// ✅ Good: rendering a semicolon using an HTML entity is more explicit, it may be intentional, it is easier to catch during code reviews
return (
  <div>
    <div />&#59;
  </div>
);

// ✅ Good: semicolon in JSX within an element, between elements, after text, or as part of an HTML entity are allowed
return (
  <div>
    <span>;</span>
    text;
    <span />;<span />
    &amp;
  </div>
);

// ✅ Good: this semicolon is outside of the JSX tree and will not be rendered in the DOM
return <div />;

// ✅ Good: this semicolon is outside of the JSX tree and will not be rendered in the DOM
return <div>
  <div />
</div>;

Troubleshooting

Why is this pattern problematic?

Unintentionally rendering semicolons in the DOM will lead to unexpected layout issues, and may reveal a potential oversight.

Resources

• Rule Source

Evaluation Checklist

• I have had problems with the pattern I want to forbid
• I could not find a way to solve the problem by changing the API of the problematic code or introducing a new API
• I have thought very hard about what the corner cases could be and what kinds of patterns this would forbid that are actually okay, and they are acceptable
• I think the rule explains well enough how to solve the issue to make sure beginners are not blocked by it
• I have discussed this rule with team members, and they all find it valuable