Find Invalid HTML Nesting in JSX, like this:
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 <p>
inside <p>
) 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
This ESLint plugin works with any framework that uses JSX
npm i -D eslint-plugin-validate-jsx-nesting
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.
{
"plugins": ["validate-jsx-nesting"]
}
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
"rules": {
"validate-jsx-nesting/no-invalid-jsx-nesting": "error"
}
The core validation logic is in validate-html-nesting library and you can checkout the testing suite here.