refactor: apply suggest

rzzf · rzzf · commit 5d4734d9594d · 2025-12-11T22:27:43.000+08:00
diff --git a/docs/rules/no-undef-directives.md b/docs/rules/no-undef-directives.md
@@ -64,16 +64,16 @@ export default {
 ```json
 {
   "vue/no-undef-directives": ["error", {
-    "ignorePatterns": ["foo"]
+    "ignore": ["foo"]
   }]
 }
 ```
 
-- `ignorePatterns` (`string[]`) ... An array of regex pattern strings to ignore.
+- `ignore` (`string[]`) An array of tags or regular expression patterns (e.g. `"/^custom-/"`) that ignore these rules. This option will check both kebab-case and PascalCase versions of the given tag names. Default is empty.
 
-### `"ignorePatterns": ["foo"]`
+### `"ignore": ["foo"]`
 
-<eslint-code-block :rules="{'vue/no-undef-directives': ['error', {ignorePatterns: ['foo']}]}">
+<eslint-code-block :rules="{'vue/no-undef-directives': ['error', {ignore: ['foo']}]}">
 
 ```vue
 <template>
diff --git a/lib/rules/no-undef-directives.js b/lib/rules/no-undef-directives.js
@@ -6,6 +6,7 @@
 
 const utils = require('../utils')
 const casing = require('../utils/casing')
+const regexp = require('../utils/regexp')
 
 /**
  * @param {string} str
@@ -44,69 +45,37 @@ function getRegisteredDirectives(componentObject) {
     .filter((res) => !!res)
 }
 
-class DefinedInSetupDirectives {
-  constructor() {
-    /**
-     * Directive names
-     * @type {Set<string>}
-     */
-    this.names = new Set()
-  }
-
-  /**
-   * @param {string} name
-   */
-  addName(name) {
-    this.names.add(name)
-  }
-
-  /**
-   * @param {string} rawName
-   */
-  isDefinedDirective(rawName) {
-    const camelName = camelize(rawName)
-    const variableName = `v${casing.capitalize(camelName)}`
-    return this.names.has(variableName)
-  }
+/**
+ * @param {string} rawName
+ * @param {Set<string>} definedNames
+ */
+function isDefinedInSetup(rawName, definedNames) {
+  const camelName = camelize(rawName)
+  const variableName = `v${casing.capitalize(camelName)}`
+  return definedNames.has(variableName)
 }
 
-class DefinedInOptionDirectives {
-  constructor() {
-    /**
-     * Directive names
-     * @type {Set<string>}
-     */
-    this.names = new Set()
-  }
-
-  /**
-   * @param {string} name
-   */
-  addName(name) {
-    this.names.add(name)
+/**
+ * @param {string} rawName
+ * @param {Set<string>} definedNames
+ */
+function isDefinedInOptions(rawName, definedNames) {
+  const camelName = camelize(rawName)
+  if (definedNames.has(rawName) || definedNames.has(camelName)) {
+    return true
   }
 
-  /**
-   * @param {string} rawName
-   */
-  isDefinedDirective(rawName) {
-    const camelName = camelize(rawName)
-    if (this.names.has(rawName) || this.names.has(camelName)) {
+  // allow case-insensitive only when the directive name itself contains capitalized letters
+  for (const name of definedNames) {
+    if (
+      name.toLowerCase() === camelName.toLowerCase() &&
+      name !== name.toLowerCase()
+    ) {
       return true
     }
-
-    // allow case-insensitive ONLY when the directive name itself contains capitalized letters
-    for (const name of this.names) {
-      if (
-        name.toLowerCase() === camelName.toLowerCase() &&
-        name !== name.toLowerCase()
-      ) {
-        return true
-      }
-    }
-
-    return false
   }
+
+  return false
 }
 
 module.exports = {
@@ -122,11 +91,9 @@ module.exports = {
       {
         type: 'object',
         properties: {
-          ignorePatterns: {
+          ignore: {
             type: 'array',
-            items: {
-              type: 'string'
-            },
+            items: { type: 'string' },
             uniqueItems: true
           }
         },
@@ -140,8 +107,8 @@ module.exports = {
   /** @param {RuleContext} context */
   create(context) {
     const options = context.options[0] || {}
-    /** @type {string[]} */
-    const ignorePatterns = options.ignorePatterns || []
+    const { ignore = [] } = options
+    const isAnyIgnored = regexp.toRegExpGroupMatcher(ignore)
 
     /**
      * Check whether the given directive name is a verify target or not.
@@ -150,107 +117,101 @@ module.exports = {
      * @returns {boolean}
      */
     function isVerifyTargetDirective(rawName) {
-      if (utils.isBuiltInDirectiveName(rawName)) {
+      const kebabName = casing.kebabCase(rawName)
+      if (
+        utils.isBuiltInDirectiveName(rawName) ||
+        isAnyIgnored(rawName, kebabName)
+      ) {
         return false
       }
-
-      const ignored = ignorePatterns.some((pattern) =>
-        new RegExp(pattern).test(rawName)
-      )
-      return !ignored
+      return true
     }
 
-    /** @type { (rawName:string, reportNode: ASTNode) => void } */
-    let verifyName
-    /** @type {RuleListener} */
-    let scriptVisitor = {}
-    /** @type {TemplateListener} */
-    const templateBodyVisitor = {
-      /** @param {VDirective} node */
-      'VAttribute[directive=true]'(node) {
-        const name = node.key.name.name
-        if (utils.isBuiltInDirectiveName(name)) {
-          return
+    /**
+     * @param {(rawName: string) => boolean} isDefined
+     * @returns {TemplateListener}
+     */
+    function createTemplateBodyVisitor(isDefined) {
+      return {
+        /** @param {VDirective} node */
+        'VAttribute[directive=true]'(node) {
+          const name = node.key.name.name
+          if (utils.isBuiltInDirectiveName(name)) {
+            return
+          }
+          const rawName = node.key.name.rawName || name
+          if (isVerifyTargetDirective(rawName) && !isDefined(rawName)) {
+            context.report({
+              node: node.key,
+              messageId: 'undef',
+              data: {
+                name: rawName
+              }
+            })
+          }
         }
-        verifyName(node.key.name.rawName || name, node.key)
       }
     }
 
     if (utils.isScriptSetup(context)) {
       // For <script setup>
-      const definedInSetupDirectives = new DefinedInSetupDirectives()
-      const definedInOptionDirectives = new DefinedInOptionDirectives()
+      /** @type {Set<string>} */
+      const definedInSetupDirectives = new Set()
+      /** @type {Set<string>} */
+      const definedInOptionDirectives = new Set()
 
       const globalScope = context.sourceCode.scopeManager.globalScope
       if (globalScope) {
         for (const variable of globalScope.variables) {
-          definedInSetupDirectives.addName(variable.name)
+          definedInSetupDirectives.add(variable.name)
         }
         const moduleScope = globalScope.childScopes.find(
           (scope) => scope.type === 'module'
         )
         for (const variable of (moduleScope && moduleScope.variables) || []) {
-          definedInSetupDirectives.addName(variable.name)
+          definedInSetupDirectives.add(variable.name)
         }
       }
 
-      scriptVisitor = utils.defineVueVisitor(context, {
+      const scriptVisitor = utils.defineVueVisitor(context, {
         onVueObjectEnter(node) {
           for (const directive of getRegisteredDirectives(node)) {
-            definedInOptionDirectives.addName(directive.name)
+            definedInOptionDirectives.add(directive.name)
           }
         }
       })
 
-      verifyName = (rawName, reportNode) => {
-        if (
-          !isVerifyTargetDirective(rawName) ||
-          definedInSetupDirectives.isDefinedDirective(rawName) ||
-          definedInOptionDirectives.isDefinedDirective(rawName)
-        ) {
-          return
-        }
+      const templateBodyVisitor = createTemplateBodyVisitor(
+        (rawName) =>
+          isDefinedInSetup(rawName, definedInSetupDirectives) ||
+          isDefinedInOptions(rawName, definedInOptionDirectives)
+      )
 
-        context.report({
-          node: reportNode,
-          messageId: 'undef',
-          data: {
-            name: rawName
-          }
-        })
-      }
+      return utils.defineTemplateBodyVisitor(
+        context,
+        templateBodyVisitor,
+        scriptVisitor
+      )
     } else {
       // For Options API
-      const definedInOptionDirectives = new DefinedInOptionDirectives()
+      /** @type {Set<string>} */
+      const definedInOptionDirectives = new Set()
 
-      scriptVisitor = utils.executeOnVue(context, (obj) => {
+      const scriptVisitor = utils.executeOnVue(context, (obj) => {
         for (const directive of getRegisteredDirectives(obj)) {
-          definedInOptionDirectives.addName(directive.name)
+          definedInOptionDirectives.add(directive.name)
         }
       })
 
-      verifyName = (rawName, reportNode) => {
-        if (
-          !isVerifyTargetDirective(rawName) ||
-          definedInOptionDirectives.isDefinedDirective(rawName)
-        ) {
-          return
-        }
+      const templateBodyVisitor = createTemplateBodyVisitor((rawName) =>
+        isDefinedInOptions(rawName, definedInOptionDirectives)
+      )
 
-        context.report({
-          node: reportNode,
-          messageId: 'undef',
-          data: {
-            name: rawName
-          }
-        })
-      }
+      return utils.defineTemplateBodyVisitor(
+        context,
+        templateBodyVisitor,
+        scriptVisitor
+      )
     }
-
-    return utils.defineTemplateBodyVisitor(
-      context,
-      templateBodyVisitor,
-      scriptVisitor
-    )
   }
 }
diff --git a/tests/lib/rules/no-undef-directives.js b/tests/lib/rules/no-undef-directives.js
@@ -228,7 +228,7 @@ tester.run('no-undef-directives', rule, {
         <div v-barfoobaz></div>
       </template>
       `,
-      options: [{ ignorePatterns: ['foo'] }]
+      options: [{ ignore: ['/foo/'] }]
     },
     {
       filename: 'test.vue',
@@ -238,7 +238,7 @@ tester.run('no-undef-directives', rule, {
         <div v-foo-bar></div>
       </template>
       `,
-      options: [{ ignorePatterns: ['foo-bar'] }]
+      options: [{ ignore: ['foo-bar'] }]
     }
   ],
   invalid: [
@@ -467,7 +467,7 @@ tester.run('no-undef-directives', rule, {
         <div v-foo-bar></div>
       </template>
       `,
-      options: [{ ignorePatterns: ['baz'] }],
+      options: [{ ignore: ['baz'] }],
       errors: [
         {
           message: "The 'v-foo-bar' directive has been used, but not defined.",
@@ -477,6 +477,44 @@ tester.run('no-undef-directives', rule, {
           endColumn: 23
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-foo-bar></div>
+      </template>
+      `,
+      options: [{ ignore: ['/^bar/'] }],
+      errors: [
+        {
+          message: "The 'v-foo-bar' directive has been used, but not defined.",
+          line: 3,
+          column: 14,
+          endLine: 3,
+          endColumn: 23
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-foo></div>
+        <div v-barfoobaz></div>
+      </template>
+      `,
+      options: [{ ignore: ['foo'] }],
+      errors: [
+        {
+          message:
+            "The 'v-barfoobaz' directive has been used, but not defined.",
+          line: 4,
+          column: 14,
+          endLine: 4,
+          endColumn: 25
+        }
+      ]
     }
   ]
 })
