eslint-plugin-validate-jsx-nesting

ESLint plugin to validate JSX nesting at compile time

GitHub

When browsers encounter invalid nesting like <p> inside <p>, they silently fix the DOM structure - causing mismatches between your JSX and the actual DOM. This ESLint plugin catches these errors in your editor as you type. It works with any framework that uses JSX.

Markup

<p>
  hello
  <p>world</p>
</p>

Browser modifies it to this:

<p>hello</p>
<p>world</p>
<p></p>

This plugin catches these errors in your editor:

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

āœ– 1 problem (1 error, 0 warnings)

Setup

Install the eslint-plugin-validate-jsx-nesting package, add it to the plugins section of your ESLint configuration file, and enable thevalidate-jsx-nesting/no-invalid-jsx-nesting rule in the rules section.

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

Related