Show HN: I Created ESLint Plugin That Finds Invalid HTML Nestings in JSX

• eslint-plugin-validate-jsx-nesting

  4 58 1.7 TypeScript

  ESLint Plugin to Validate JSX Nestings

• validate-html-nesting

  2 29 2.4 JavaScript

  Validate parent-child nesting for HTML elements

Invalid HTML Nestings such as a

inside a

is invalid and browser automatically fixes it by putting the

outside the parent

and so the DOM ends up rendering different structure than JSX. There are a lot of such invalid nestings. See [this](https://github.com/MananTank/validate-html-nesting/blob/main...) For Example.

This is problematic and creates all sorts of bugs in Frameworks. Most Frameworks that use JSX (such as React, SolidJS, Preact) checks for invalid HTML Nestings at runtime and logs an error. ( Though this runtime checks are not very comprehensive - React has decent list of checks but is still missing quite a few )

Until now there was no way to check for such invalid Nestings without running the code. So I've created this ESLint Plugin to do just that.

This does not mean that we get rid of runtime invalid nesting checking, because This ESLint plugin can not predict what your component's top level element will be - because that would require running the code. So consider this as a tool to catch 99% of the invalid nestings without running the code.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

Suggest a related project