eslint-plugin-validate-jsx-nesting

Find Invalid HTML Nesting in JSX, like this:

Why this validation is important?

Without such validation, When JSX is converted to HTML and rendered in the DOM, the browser will try to fix the invalid nestings ( such as

inside

) and thus the rendered DOM will have a different structure than the JSX structure.

This is a big issue for frameworks that rely on JSX rendering the exact same elements in DOM. This can lead to unexpected behaviors.

This plugin uses the validate-html-nesting library for validating HTML element nesting

$3

This ESLint plugin works with any framework that uses JSX

Install

``bash
npm i -D eslint-plugin-validate-jsx-nesting
`

Usage

$3

Add "eslint-plugin-validate-jsx-nesting" to the plugins section of your ESLint configuration file. You can omit the "eslint-plugin-" prefix if you want.

`json
{
"plugins": ["validate-jsx-nesting"]
}
`

$3

This plugin only has one rule "no-invalid-jsx-nesting".

Add the "validate-jsx-nesting/no-invalid-jsx-nesting" rule in your ESLint config file as shown below

`json
"rules": {
"validate-jsx-nesting/no-invalid-jsx-nesting": "error"
}
``

Testing Suite

The core validation logic is in validate-html-nesting library and you can checkout the testing suite here.

See also: Related Libraries

- babel-plugin-validate-jsx-nesting
- validate-html-nesting