# eslint-plugin-validate-jsx-nesting

> ESLint Plugin for Validating JSX Nesting

Latest version **0.1.1** (published 2023-04-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install eslint-plugin-validate-jsx-nesting
pnpm add eslint-plugin-validate-jsx-nesting
yarn add eslint-plugin-validate-jsx-nesting
bun add eslint-plugin-validate-jsx-nesting
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2023-04-23 |
| First published | 2022-07-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 158.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 68 |
| Author | Manan Tank |
| Maintainers | manantank |
| Keywords | eslint, typescript, jsx, html validation, jsx validation, jsx nesting validation |

## Links

- npm: https://www.npmjs.com/package/eslint-plugin-validate-jsx-nesting
- Repository: https://github.com/MananTank/eslint-plugin-validate-jsx-nesting
- Homepage: https://github.com/MananTank/eslint-plugin-validate-jsx-nesting#readme
- Issues: https://github.com/MananTank/eslint-plugin-validate-jsx-nesting/issues
- npm.io page: https://npm.io/package/eslint-plugin-validate-jsx-nesting

## Dependencies (1)

- [validate-html-nesting](https://npm.io/package/validate-html-nesting.md) ^1.2.2

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@inrupt/eslint-config-base](https://npm.io/package/@inrupt/eslint-config-base.md) — 4.5K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2023-04-23
- 0.1.0 — 2022-07-10
- 0.0.8 — 2022-07-10
- 0.0.7 — 2022-07-08
- 0.0.6 — 2022-07-08
- 0.0.5 — 2022-07-08
- 0.0.4 — 2022-07-08
- 0.0.3 — 2022-07-08
- 0.0.2 — 2022-07-08
- 0.0.1 — 2022-07-08

## README

# eslint-plugin-validate-jsx-nesting

Find Invalid HTML Nesting in JSX, like this:

<img src="assets/demo.png"  />

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

<br/>

### Framework agnostic

This ESLint plugin works with any framework that uses JSX

<br/>

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

<br />

## 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).

<br />
<br />

## 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)

---
_Source: https://npm.io/package/eslint-plugin-validate-jsx-nesting · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._