Registry / testing / eslint-plugin-validate-jsx-nesting

eslint-plugin-validate-jsx-nesting

library0.1.1jsnpmunverified

ESLint plugin (v0.1.1) that detects invalid HTML nesting in JSX, such as inside 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.

testing web-framework serialization

npm install eslint-plugin-validate-jsx-nesting

github ↗package ↗

INSTALL

IMPORT

SIG · ESLINT-PLUGIN-VALI

eslint-plugin-validate-jsx-nesting

testingjavascriptv0.1.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

plugin

✓ plugins: ['validate-jsx-nesting']

✗ plugins: ['eslint-plugin-validate-jsx-nesting']

ESLint config plugins key accepts the short name (omit 'eslint-plugin-')

no-invalid-jsx-nesting

✓ rules: { 'validate-jsx-nesting/no-invalid-jsx-nesting': 'error' }

✗ rules: { '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

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

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

Common mistake: omitting the plugin declaration

Shows how to install, configure the plugin, and trigger a violation with nested 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 = () => Nested p; // ESLint error

Debug

Known issues

gotchaRule 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'.

affects: >=0.0.0

gotchaPlugin only checks JSX; does not validate runtime mutations or non-JSX templates.

fix

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

affects: >=0.0.0

deprecatedNo known deprecated features.

Errors

Common errors & fixes

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

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.

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

Rule name missing the plugin prefix in legacy config.

fix

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

Upgrade

Version history

0.1.1latest on npm

Audit

Dependencies

eslintrequiredpeer dependency: plugin runs as an ESLint rule

validate-html-nestingrequiredcore dependency for HTML nesting validation logic

Agent activity

5 hits · last 30 days

node

Bingbot

Resources

githubhttps://github.com/MananTank/eslint-plugin-validate-jsx-nesting ↗

packagehttps://www.npmjs.com/package/eslint-plugin-validate-jsx-nesting ↗