S
SolidJS•2mo ago
XxX_MLG Noob_XxX

How to Prevent ESLint from Marking Custom Directives As Unused?

Let's say I have a directive called directive, which is returned from some kind of function. I know that I can augment my TypeScript types so that directive can be used in the JSX. However, ESLint doesn't understand that this function is being used, and it throws a @typescript-eslint/no-unused-vars error. Is there a proper way to resolve this? Example: 
function MyComponent() {
  // ESLint Error Here
  const directive = makeDirective();
  return (
    <div use:directive>
      {/* ... */}
    </div>
  );
}
function MyComponent() {
  // ESLint Error Here
  const directive = makeDirective();
  return (
    <div use:directive>
      {/* ... */}
    </div>
  );
}
1 Reply
XxX_MLG Noob_XxX
XxX_MLG Noob_XxXOP•2mo ago
The answer is to use eslint-plugin-solid. You can use the full set of recommended rules, or you can enable solid/jsx-uses-vars directly. If you do, you should probably also enable solid/jsx-no-undef at a minimum.

Did you find this page helpful?