https://github.com/manantank/eslint-plugin-validate-jsx-nesting

ESLint Plugin to Validate JSX Nestings
https://github.com/manantank/eslint-plugin-validate-jsx-nesting

eslint eslint-plugin jsx react validation

Last synced: about 1 month ago
JSON representation

ESLint Plugin to Validate JSX Nestings

• Host: GitHub
• URL: https://github.com/manantank/eslint-plugin-validate-jsx-nesting
• Owner: MananTank
• License: mit
• Created: 2022-07-08T18:04:31.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-23T07:54:57.000Z (over 1 year ago)
• Last Synced: 2024-10-28T14:24:44.992Z (about 2 months ago)
• Topics: eslint, eslint-plugin, jsx, react, validation
• Language: TypeScript
• Homepage:
• Size: 457 KB
• Stars: 59
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://github.com/MananTank/validate-html-nesting) library for validating HTML element nesting




### Framework agnostic

This ESLint plugin works with any framework that uses JSX




## Install

```bash

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.

```json

{

	"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

```json

"rules": {

	"validate-jsx-nesting/no-invalid-jsx-nesting": "error"

}

```




## Testing Suite

The core validation logic is in [validate-html-nesting](https://github.com/MananTank/validate-html-nesting) library and you can checkout the testing suite [here](https://github.com/MananTank/validate-html-nesting/blob/main/tests/validation.test.js).







## See also: Related Libraries

- [babel-plugin-validate-jsx-nesting](https://github.com/MananTank/validate-jsx-nesting)

- [validate-html-nesting](https://github.com/MananTank/validate-html-nesting)