eslint-plugin-validate-jsx-nesting

0.1.1 verified Sat Apr 25 auth: no javascript

ESLint plugin (v0.1.1) that detects invalid HTML nesting in JSX, such as <p> inside <p> or <a> inside <a>. It uses the validate-html-nesting library to check nesting rules according to the HTML spec. This plugin is framework-agnostic (works with React, Preact, Solid, etc.) and helps prevent DOM structure mismatches when JSX is rendered. Useful for any JSX-based project. Only one rule: no-invalid-jsx-nesting. Requires eslint >=4.0.0. No known issues with Node.js or browser use.

Common errors

error ESLint: Error while loading rule 'validate-jsx-nesting/no-invalid-jsx-nesting': Cannot find module 'validate-html-nesting' ↓

cause Missing dependency 'validate-html-nesting' (should be auto-installed as a dependency, but if not, npm install may have failed).

fix

Run 'npm install validate-html-nesting --save-dev' or reinstall the plugin.

error ESLint: Definition for rule 'no-invalid-jsx-nesting' was not found ↓

cause Rule name missing the plugin prefix in legacy config.

fix

Change rule name to 'validate-jsx-nesting/no-invalid-jsx-nesting'.

Warnings

gotcha Rule requires the plugin name prefix in legacy ESLint configs (before flat config). ↓

fix Use 'validate-jsx-nesting/no-invalid-jsx-nesting' not just 'no-invalid-jsx-nesting'.

gotcha Plugin only checks JSX; does not validate runtime mutations or non-JSX templates. ↓

fix Use in combination with linters for other template systems if needed.

deprecated No known deprecated features.

Install

npm install eslint-plugin-validate-jsx-nesting

yarn add eslint-plugin-validate-jsx-nesting

pnpm add eslint-plugin-validate-jsx-nesting

Imports

plugin
wrong
```
plugins: ['eslint-plugin-validate-jsx-nesting']
```
correct
```
plugins: ['validate-jsx-nesting']
```
ESLint config plugins key accepts the short name (omit 'eslint-plugin-')
no-invalid-jsx-nesting
wrong
```
rules: { 'no-invalid-jsx-nesting': 'error' }
```
correct
```
rules: { 'validate-jsx-nesting/no-invalid-jsx-nesting': 'error' }
```
Must prefix with plugin name when using ESLint <9 flat config; in flat config use plugin object directly.

legacy config object

wrong

module.exports = { rules: { 'no-invalid-jsx-nesting': 'error' } }

correct

use module.exports = { plugins: ['validate-jsx-nesting'], rules: { 'validate-jsx-nesting/no-invalid-jsx-nesting': 'error' } }

Common mistake: omitting the plugin declaration

Quickstart

Shows how to install, configure the plugin, and trigger a violation with nested <p> elements.

// Install: npm i -D eslint-plugin-validate-jsx-nesting
// .eslintrc.js
module.exports = {
  plugins: ['validate-jsx-nesting'],
  rules: {
    'validate-jsx-nesting/no-invalid-jsx-nesting': 'error'
  }
};

// In any JSX file:
const Bad = () => <p><p>Nested p</p></p>; // ESLint error