Open
Description
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?
Metadata
Metadata
Assignees
Labels
No labels
Projects
Milestone
Relationships
Development
No branches or pull requests
Participants
Activity