eslint-plugin-validate-jsx-nesting

The Problem

Certain HTML elements have nesting restrictions. For example, placing a <p> inside another <p> is invalid. When browsers encounter this, they silently modify the DOM to fix it.

If you write this JSX:

<p>
  Hello
  <p>World</p>
</p>

The browser creates this DOM:

<p>Hello</p>
<p>World</p>
<p></p>

The outer paragraph gets closed early, and the inner paragraph ends up as a sibling. This mismatch between your JSX and the actual DOM causes hydration errors in React and other frameworks.

The Solution

This ESLint plugin catches invalid nesting in your editor as you type. No waiting for build errors or production bugs:

src/App.tsx
  3:3  error  Invalid HTML nesting: <p> cannot be child of <p>
              validate-jsx-nesting/no-invalid-jsx-nesting

✖ 1 problem (1 error, 0 warnings)

Setup

Install eslint-plugin-validate-jsx-nesting and add it to your ESLint config:

{
  "plugins": ["validate-jsx-nesting"],
  "rules": {
    "validate-jsx-nesting/no-invalid-jsx-nesting": "error"
  }
}

Related