react-doctor/design-no-em-dash-in-jsx-text

Replace em dashes in JSX prose with commas, colons, semicolons, or parentheses so UI copy reads less like generated text.

• Category: Architecture
• Severity: warn
• Source: oxlint-plugin-react-doctor
• Framework: global
• Enabled when: always

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Fires when a JSXText node literally contains the em-dash character — (U+2014). The rule walks up the ancestor chain and skips text inside <code>, <pre>, <kbd>, <samp>, <var>, <tt>, or any element with translate="no". Dynamic strings inside {expression} containers aren't inspected, so interpolated copy escapes the check.

Fix prompt

Use this once validation confirms the diagnostic is real.

Replace — with a comma, colon, semicolon, parentheses, or a plain hyphen for ranges. Em dashes scream LLM output in product copy; tightening the sentence almost always improves it. Reserve em dashes for long-form editorial content where you've audited the voice. https://practicaltypography.com/hyphens-and-dashes.html

Related rules

More Architecture rules from the rules reference:

• react-doctor/design-no-redundant-padding-axes: Collapse `px-N py-N` to `p-N` when both axes match. Keep them split only when one axis varies at a breakpoint (`py-2 md:py-3`)
• react-doctor/design-no-redundant-size-axes: Collapse `w-N h-N` to `size-N` (Tailwind v3.4+) when both axes match
• react-doctor/design-no-space-on-flex-children: Use `gap-*` on the flex/grid parent. `space-x-*` / `space-y-*` produce phantom gaps when a sibling is conditionally rendered, lose vertical spacing on wrapped lines, and don't mirror in RTL
• react-doctor/design-no-three-period-ellipsis: Use the typographic ellipsis "…" (or `&hellip;`) instead of three periods — pairs with action-with-followup labels ("Rename…", "Loading…")
• react-doctor/display-name: Give each component a stable displayName so React DevTools shows a real name instead of "Unknown".