feat(jsx): add jsx-no-leaked-semicolon rule, closes #1685#1686
Conversation
Disallows trailing semicolons that would be rendered as text nodes in JSX. When refactoring JSX, trailing semicolons may be accidentally left immediately after JSX elements or fragments, causing `;` to be unexpectedly rendered. - Add rule implementation with JSXText and Literal node detection - Include comprehensive test cases - Add documentation with examples - Register in recommended, all, and jsx presets
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Adds a new JSX-focused ESLint rule to detect and warn on “dangling” semicolons that become rendered JSX text nodes, and wires it into presets and documentation.
Changes:
- Implement
react-jsx/no-trailing-semicolon(exposed as@eslint-react/jsx-no-trailing-semicolon) to report suspicious semicolons in JSX children text. - Add unit tests and rule documentation page.
- Register the rule in
recommended/all/jsx-related presets and the website rules metadata.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/plugins/eslint-plugin/src/configs/jsx.ts | Enables the new @eslint-react/jsx-no-trailing-semicolon rule in the JSX preset. |
| packages/plugins/eslint-plugin/src/configs/all.ts | Enables the new rule in the @eslint-react/all preset. |
| packages/plugins/eslint-plugin-react-jsx/src/rules/no-trailing-semicolon/no-trailing-semicolon.ts | Adds the rule implementation and reporting logic. |
| packages/plugins/eslint-plugin-react-jsx/src/rules/no-trailing-semicolon/no-trailing-semicolon.spec.ts | Adds rule tests covering common trailing-semicolon cases and non-violations. |
| packages/plugins/eslint-plugin-react-jsx/src/rules/no-trailing-semicolon/no-trailing-semicolon.mdx | Adds end-user documentation and examples for the new rule. |
| packages/plugins/eslint-plugin-react-jsx/src/plugin.ts | Registers the rule in the eslint-plugin-react-jsx plugin export. |
| packages/plugins/eslint-plugin-react-jsx/src/configs/recommended.ts | Enables the rule in the react-jsx/recommended config (and thus strict). |
| apps/website/content/docs/rules/meta.json | Adds the rule to the website rules index metadata. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
...ges/plugins/eslint-plugin-react-jsx/src/rules/no-trailing-semicolon/no-trailing-semicolon.ts
Show resolved
Hide resolved
...es/plugins/eslint-plugin-react-jsx/src/rules/no-trailing-semicolon/no-trailing-semicolon.mdx
Outdated
Show resolved
Hide resolved
3d60b12 to
3aba9cb
Compare
…-semicolon/no-trailing-semicolon.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: REL1CX <solarflarex@qq.com>
|
Thinking about it, I wonder if "jsx-no-dangling-semicolon" would be a better rule name 🤔 |
706fa1a to
4c398da
Compare
"jsx-no-dangling-semicolon" sounds better than "no-trailing-semicolon," though I personally prefer "no-leaked-semicolon." Anyway, until a final name is decided, I'll publish this as a recipe at https://www.eslint-react.xyz/docs/recipes/overview to avoid any breaking changes from a future rename. |
|
I'm not totally against "no-leaked-semicolon", but it can a bit confusing to understand at first glance: how can you "leak" a semicolon? Leaks generally refer to memory leaks, no? |
4ad0783 to
4c398da
Compare
The naming follows an established convention in the React community where "leaked" describes
In this context, "leak" means an unintended value appearing in the rendered output, not a Happy to consider alternative names if this still feels confusing. |
|
Gotta rename the PR title too |
👍…o-leaked-semicolon - Rename rule files and update all references - Rename function hasSuspiciousSemicolon to hasLeakedSemicolon - Update error message: "Leaked semicolon in JSX" - Update configs: recommended.ts, all.ts, jsx.ts - Update documentation meta.json
Disallows trailing semicolons that would be rendered as text nodes in JSX. When refactoring JSX, trailing semicolons may be accidentally left immediately after JSX elements or fragments, causing
;to be unexpectedly rendered.Update "[ ]" to "[x]" to check a box
What kind of change does this PR introduce?
Check at least one. If you are introducing a new binding, you must reference an issue where this binding has been proposed, discussed and approved by the maintainers.
Does this PR introduce a breaking change?
If yes, please describe the impact and migration path for existing applications in an attached issue.
Checklist
fix: remove a typo, closes #___, #___)Other information