{"id":19972,"library":"eslint-plugin-validate-jsx-nesting","title":"eslint-plugin-validate-jsx-nesting","description":"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.","status":"active","version":"0.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/MananTank/eslint-plugin-validate-jsx-nesting","tags":["javascript","eslint","typescript","jsx","html validation","jsx validation","jsx nesting validation"],"install":[{"cmd":"npm install eslint-plugin-validate-jsx-nesting","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-validate-jsx-nesting","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-validate-jsx-nesting","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency: plugin runs as an ESLint rule","package":"eslint","optional":false},{"reason":"core dependency for HTML nesting validation logic","package":"validate-html-nesting","optional":false}],"imports":[{"note":"ESLint config plugins key accepts the short name (omit 'eslint-plugin-')","wrong":"plugins: ['eslint-plugin-validate-jsx-nesting']","symbol":"plugin","correct":"plugins: ['validate-jsx-nesting']"},{"note":"Must prefix with plugin name when using ESLint <9 flat config; in flat config use plugin object directly.","wrong":"rules: { 'no-invalid-jsx-nesting': 'error' }","symbol":"no-invalid-jsx-nesting","correct":"rules: { 'validate-jsx-nesting/no-invalid-jsx-nesting': 'error' }"},{"note":"Common mistake: omitting the plugin declaration","wrong":"module.exports = { rules: { 'no-invalid-jsx-nesting': 'error' } }","symbol":"legacy config object","correct":"use module.exports = { plugins: ['validate-jsx-nesting'], rules: { 'validate-jsx-nesting/no-invalid-jsx-nesting': 'error' } }"}],"quickstart":{"code":"// Install: npm i -D eslint-plugin-validate-jsx-nesting\n// .eslintrc.js\nmodule.exports = {\n  plugins: ['validate-jsx-nesting'],\n  rules: {\n    'validate-jsx-nesting/no-invalid-jsx-nesting': 'error'\n  }\n};\n\n// In any JSX file:\nconst Bad = () => <p><p>Nested p</p></p>; // ESLint error","lang":"javascript","description":"Shows how to install, configure the plugin, and trigger a violation with nested <p> elements."},"warnings":[{"fix":"Use 'validate-jsx-nesting/no-invalid-jsx-nesting' not just 'no-invalid-jsx-nesting'.","message":"Rule requires the plugin name prefix in legacy ESLint configs (before flat config).","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use in combination with linters for other template systems if needed.","message":"Plugin only checks JSX; does not validate runtime mutations or non-JSX templates.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"","message":"No known deprecated features.","severity":"deprecated","affected_versions":""}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install validate-html-nesting --save-dev' or reinstall the plugin.","cause":"Missing dependency 'validate-html-nesting' (should be auto-installed as a dependency, but if not, npm install may have failed).","error":"ESLint: Error while loading rule 'validate-jsx-nesting/no-invalid-jsx-nesting': Cannot find module 'validate-html-nesting'"},{"fix":"Change rule name to 'validate-jsx-nesting/no-invalid-jsx-nesting'.","cause":"Rule name missing the plugin prefix in legacy config.","error":"ESLint: Definition for rule 'no-invalid-jsx-nesting' was not found"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}