Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

no-unused-vars errors for jsx inside html #295

Open
dmail opened this issue Nov 27, 2024 · 0 comments
Open

no-unused-vars errors for jsx inside html #295

dmail opened this issue Nov 27, 2024 · 0 comments

Comments

@dmail
Copy link

dmail commented Nov 27, 2024 •
edited
Loading

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?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@dmail