Show HN: I Created ESLint Plugin That Finds Invalid HTML Nestings in JSX(github.com)

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

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

1 comments

MNNTNKvor 4 Jahren

HTML Nestings such as a <p> inside a <p> is invalid and browser automatically fixes it by putting the <p> outside the parent <p> 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.