{"id":20979696,"url":"https://github.com/manantank/eslint-plugin-validate-jsx-nesting","last_synced_at":"2025-05-14T15:30:28.519Z","repository":{"id":44170400,"uuid":"511985024","full_name":"MananTank/eslint-plugin-validate-jsx-nesting","owner":"MananTank","description":"ESLint Plugin to Validate JSX Nestings","archived":false,"fork":false,"pushed_at":"2023-04-23T07:54:57.000Z","size":468,"stargazers_count":64,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-03T08:00:04.916Z","etag":null,"topics":["eslint","eslint-plugin","jsx","react","validation"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MananTank.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-08T18:04:31.000Z","updated_at":"2025-03-21T04:00:57.000Z","dependencies_parsed_at":"2024-06-18T20:03:21.965Z","dependency_job_id":"c60b17a4-744b-4aae-9846-655c51e32ad6","html_url":"https://github.com/MananTank/eslint-plugin-validate-jsx-nesting","commit_stats":{"total_commits":19,"total_committers":2,"mean_commits":9.5,"dds":"0.10526315789473684","last_synced_commit":"455fe00455605a346df2353578a5f651288a7f41"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MananTank%2Feslint-plugin-validate-jsx-nesting","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MananTank%2Feslint-plugin-validate-jsx-nesting/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MananTank%2Feslint-plugin-validate-jsx-nesting/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MananTank%2Feslint-plugin-validate-jsx-nesting/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MananTank","download_url":"https://codeload.github.com/MananTank/eslint-plugin-validate-jsx-nesting/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254171518,"owners_count":22026456,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["eslint","eslint-plugin","jsx","react","validation"],"created_at":"2024-11-19T05:14:11.221Z","updated_at":"2025-05-14T15:30:26.907Z","avatar_url":"https://github.com/MananTank.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# eslint-plugin-validate-jsx-nesting\n\nFind Invalid HTML Nesting in JSX, like this:\n\n\u003cimg src=\"assets/demo.png\"  /\u003e\n\n## Why this validation is important?\n\nWithout such validation, When JSX is converted to HTML and rendered in the DOM, the browser will try to fix the invalid nestings ( such as `\u003cp\u003e` inside `\u003cp\u003e` ) and thus the rendered DOM will have a different structure than the JSX structure.\n\nThis is a big issue for frameworks that rely on JSX rendering the exact same elements in DOM. This can lead to unexpected behaviors.\n\nThis plugin uses the [validate-html-nesting](https://github.com/MananTank/validate-html-nesting) library for validating HTML element nesting\n\n\u003cbr/\u003e\n\n### Framework agnostic\n\nThis ESLint plugin works with any framework that uses JSX\n\n\u003cbr/\u003e\n\n## Install\n\n```bash\nnpm i -D eslint-plugin-validate-jsx-nesting\n```\n\n## Usage\n\n### Step 1: Add the plugin in ESLint Config\n\nAdd `\"eslint-plugin-validate-jsx-nesting\"` to the plugins section of your ESLint configuration file. You can omit the `\"eslint-plugin-\"` prefix if you want.\n\n```json\n{\n\t\"plugins\": [\"validate-jsx-nesting\"]\n}\n```\n\n### Step 2: Add the Plugin's rule\n\nThis plugin only has one rule `\"no-invalid-jsx-nesting\"`.\n\nAdd the `\"validate-jsx-nesting/no-invalid-jsx-nesting\"` rule in your ESLint config file as shown below\n\n```json\n\"rules\": {\n\t\"validate-jsx-nesting/no-invalid-jsx-nesting\": \"error\"\n}\n```\n\n\u003cbr /\u003e\n\n## Testing Suite\n\nThe 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).\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## See also: Related Libraries\n\n- [babel-plugin-validate-jsx-nesting](https://github.com/MananTank/validate-jsx-nesting)\n- [validate-html-nesting](https://github.com/MananTank/validate-html-nesting)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanantank%2Feslint-plugin-validate-jsx-nesting","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanantank%2Feslint-plugin-validate-jsx-nesting","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanantank%2Feslint-plugin-validate-jsx-nesting/lists"}