Skip to content
GitLab

Add eslint-plugin-html to lint JS in HTML files

Merged Julien Déramond requested to merge main-jd-eslint-plugin-html into main

Linked to https://github.com/twbs/bootstrap/pull/36915

Description

This PR introduces the use of eslint-plugin-html to lint JavaScript within HTML files in <script>s.

It seemed to be the best and recommended tool to do it. Feel free to double check if this choice is valid :)

Some extra info:

  • Only the matching rules from /site/.eslintrc.json have been reused (thanks @GeoSot for pointing out these rules)
  • "no-console": "off" has been added since it is useful for debugging these standalone pages that never will be in production

I wasn't a big fan of --ext .html,.js as I'd prefer to target only the HTML files we want to parse but it seems that there's no other way to do it:

By default, when executing the eslint command on a directory, only .js files will be linted. You will have to specify extra extensions with the --ext option. Example: eslint --ext .html,.js src will lint both .html and .js files in the src directory.

Source: https://www.npmjs.com/package/eslint-plugin-html#troubleshooting