no-unused-vars errors for jsx inside html

Open dmail opened this issue 1 year ago • 1 comments

Description

ESLint no-unused-vars rule reports all jsx components declared in HTML as unused.

Linting the following html would report 'App' is assigned a value but never used error:

<!doctype html>
<html>
  <head>
    <title>Title</title>
    <meta charset="utf-8" />
    <link rel="icon" href="data:," />
  </head>

  <body>
    <div id="app"></div>
    <script type="module">
      import { render } from "preact";
   
      const App = () => {
        return "Hello world";
      };
      render(
        <App />,
        document.querySelector("#app"),
      );
    </script>
  </body>
</html>

Alternatives

Disable locally

How?

// eslint-disable-next-line no-unused-vars on each jsx component

Problem

Having to manually add this all the time

Disable no-unused-vars for react pattern

How?

Add "varsIgnorePattern": "React" in my ESLint config. see varsIgnorePattern

Problem

Looks like a hack. Have false positive preventing ESLint to find actually unused-vars.

Additional context

The ESLint rule "react/jsx-uses-react" should be able to mark variables as used. But it seems this rule is not applied to the js found in HTML files by this plugin.

I've tried to add .html and .js extensions eslint-plugin-react configuration

{
  "react/jsx-filename-extension": ["error",  { "extensions": [".jsx", ".html", ".js"] }],
}

But it does not work.

Any idea what's going on?

Nov 27 '24 16:11 dmail

I still have this issue today and it's really annoying I'd like to contribute to find a fix. Any guidance to help me getting started?

Oct 04 '25 06:10 dmail