How to Prevent ESLint from Marking Custom Directives As Unused?

Let's say I have a directive called

directive

directive

directive

directive, which is returned from some kind of function. I know that I can augment my TypeScript types so that

directive

directive

directive

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

@typescript-eslint/no-unused-vars

@typescript-eslint/no-unused-vars

@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>
  );
}

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>
  );
}

How to Prevent ESLint from Marking Custom Directives As Unused?

Similar Threads

Similar Threads

Similar Threads