14

When working on front-end projects I always like to work with linting tools. They prevent from dumb mistakes to serious smelly code pieces. Linting tools also suggest improvements and optimisations.

Validating and linting HTML means using the W3C Validator. When working with vanilla JavaScript projects I use the grunt-html Grunt NPM module. And when working with Angular 1.x I use the grunt-html-angular-validate module, which is the same validator but adapted to Angular requirements (non standard attributes or incomplete HTML documents will not fire errors or warnings). However I have tried to find some similar tool for React JSX documents either for Grunt or Gulp but with not luck.

Does it exist W3C HTML validators for React JSX files? In case it does not, any reason for it?

NOTE: I am not interested on checking the JavaScript part of the JSX with tools like JSXHint but just the HTML part and its compliance with W3C specifications.

AxeEffect
  • 6,345
  • 4
  • 37
  • 33
  • What IDE do you use? Most of the time the IDE developers will recommend a certain linter as it works best with their IDE or is made to work with their IDE. – Raptus Apr 26 '17 at 20:18

2 Answers2

2

Does it exist W3C HTML validators for React JSX files?

No.

In case it does not, any reason for it?

Because they aren't HTML.

The closest you could come would be to execute the JavaScript to generate a DOM, then serialize that DOM to HTML (e.g. with .innerHTML), and then add a DOCTYPE declaration and validate the result.

This, of course, only gives you a snapshot of the output for a given state of the application.

Server-side rendering tools (such as Next.js) are probably helpful here.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

There are no W3C HTML validators for JSX. JSX is JS, not HTML. So you can use eslint plugins for linting jsx to avoid common problems:

Yevgeny
  • 81
  • 1
  • 3