eslint-plugin-vue icon indicating copy to clipboard operation
eslint-plugin-vue copied to clipboard

Rule proposal: `vue/no-undef-directives`

Open hoonweiting opened this issue 1 month ago • 0 comments

Please describe what the rule should do:

The rule should warn when a custom directive is used, but not imported. The rule should also accept some kind of ignore option to avoid false positives with globally-registered custom directives.

What category should the rule belong to?

  • [ ] Enforces code style (layout)
  • [x] Warns about a potential error (problem)
  • [ ] Suggests an alternate way of doing something (suggestion)
  • [ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

Should warn on:

<template>
  <input v-focus>
</template>

<script setup>
// vFocus is not imported or defined anywhere
</script>
<template>
  <a v-sref="someValue">
    <!-- anchor contents -->
  </a>
</template>

<script setup>
// vSref is not imported or defined anywhere
</script>

Should not warn on:

<template>
  <input v-focus>
</template>

<script setup>
import vFocus from '../path/to/vFocus';
</script>
<template>
  <a v-sref="someValue">
    <!-- anchor contents -->
  </a>
</template>

<script setup>
import vSref from '../path/to/vSref';
</script>

Additional context

There is a runtime warning in the browser console, but it would be cool if we can catch these issues when linting too.

[Vue warn]: Failed to resolve directive: sref

hoonweiting avatar Oct 27 '25 03:10 hoonweiting