Awesome

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

Framework agnostic

This ESLint plugin works with any framework that uses JSX

Install

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

Usage

Step 1: Add the plugin in ESLint Config

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"]
}

Step 2: Add the Plugin's rule

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"
}

Testing Suite

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