eslint规则，获取vue文件中的使用到的自定义组件

为了让 ESLint 规则能够配置过滤的行为，你可以为规则添加参数，以便使用者可以选择是否过滤原生 HTML 标签和/或 Element-UI 组件。以下是示例代码，展示了如何实现这一功能：

1. 安装 ESLint 和 Vue 插件：
   确保你已经安装了 ESLint 和相关的 Vue 插件。如果没有安装，可以使用以下命令安装：

   npm install eslint eslint-plugin-vue --save-dev
   

2. 创建自定义规则：
   创建一个新的文件，例如 eslint-plugin-custom/vue-component-scanner.js，并在其中编写你的自定义规则。

3. 编写规则代码：
   规则代码将解析 Vue 文件，并根据配置参数来决定是否过滤原生 HTML 标签和 Element-UI 组件。下面是示例代码：

   module.exports = {
     meta: {
       type: "suggestion", // 规则类型，可以是 "problem", "suggestion" 或 "layout"
       docs: {
         description: "Find all custom components in Vue files with configurable filtering",
         category: "Best Practices",
         recommended: false
       },
       schema: [
         {
           type: "object",
           properties: {
             filterHtmlTags: {
               type: "boolean",
               default: true
             },
             filterElementUIComponents: {
               type: "boolean",
               default: true
             },
             excludedComponents: {
               type: "array",
               items: {
                 type: "string"
               },
               default: []
             }
           },
           additionalProperties: false
         }
       ] // 规则选项
     },
     create(context) {
       const options = context.options[0] || {};
       const filterHtmlTags = options.filterHtmlTags !== false;
       const filterElementUIComponents = options.filterElementUIComponents !== false;
       const excludedComponents = new Set(options.excludedComponents || []);
   
       const htmlTags = new Set([
         'html', 'body', 'base', 'head', 'link', 'meta', 'style', 'title', 'address', 'article', 
         'aside', 'footer', 'header', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'nav', 'section', 
         'div', 'dd', 'dl', 'dt', 'figcaption', 'figure', 'picture', 'hr', 'img', 'li', 'main', 
         'ol', 'p', 'pre', 'ul', 'a', 'b', 'abbr', 'bdi', 'bdo', 'br', 'cite', 'code', 'data', 
         'dfn', 'em', 'i', 'kbd', 'mark', 'q', 'rp', 'rt', 'rtc', 'ruby', 's', 'samp', 'small', 
         'span', 'strong', 'sub', 'sup', 'time', 'u', 'var', 'wbr', 'area', 'audio', 'map', 'track', 
         'video', 'embed', 'object', 'param', 'source', 'canvas', 'script', 'noscript', 'del', 
         'ins', 'caption', 'col', 'colgroup', 'table', 'thead', 'tbody', 'td', 'th', 'tr', 'button', 
         'datalist', 'fieldset', 'form', 'input', 'label', 'legend', 'meter', 'optgroup', 'option', 
         'output', 'progress', 'select', 'textarea', 'details', 'dialog', 'menu', 'menuitem', 'summary', 
         'content', 'element', 'shadow', 'template', 'blockquote', 'iframe', 'tfoot'
       ]);
   
       return {
         'VElement'(node) {
           const tagName = node.name;
           const isHtmlTag = htmlTags.has(tagName.toLowerCase());
           const isElementUIComponent = tagName.startsWith('el-') || excludedComponents.has(tagName);
   
           if ((filterHtmlTags && isHtmlTag) || (filterElementUIComponents && isElementUIComponent)) {
             return;
           }
   
           context.report({
             node,
             message: `Found custom component: <${tagName}>`
           });
         }
       };
     }
   };
   

4. 配置 ESLint：
   在你的 ESLint 配置文件（例如 .eslintrc.js）中添加自定义规则的配置，并明确指定过滤选项：

   module.exports = {
     extends: [
       'plugin:vue/recommended' // 使用 Vue 的推荐配置
     ],
     plugins: [
       'vue',
       'custom' // 你的自定义插件名
     ],
     rules: {
       'custom/vue-component-scanner': ['warn', {
         filterHtmlTags: true, // 是否过滤原生 HTML 标签
         filterElementUIComponents: true, // 是否过滤 Element-UI 组件
         excludedComponents: [
           'ElButton',
           'ElTable',
           // 你可以在这里添加更多需要排除的 element-ui 组件
         ]
       }]
     }
   };
   

5. 运行 ESLint：
   现在你可以运行 ESLint 来扫描你的 Vue 文件，并根据配置报告所有使用的自定义组件标签：

   npx eslint --ext .js,.vue src
   

示例解释

假设你有以下 .vue 文件：

<template>
  <div>
    <header>
      <MyComponent />
    </header>
    <section>
      <AnotherComponent />
      <el-button>Click me</el-button>
      <ElTable />
      <EleButton /> <!-- 自定义的 Vue 组件 -->
    </section>
    <footer>
      <p>Some text</p>
    </footer>
  </div>
</template>

<script>
export default {
  components: {
    MyComponent: require('./MyComponent.vue').default,
    AnotherComponent: require('./AnotherComponent.vue').default,
    EleButton: require('./EleButton.vue').default // 自定义的 Vue 组件
  }
}
</script>

在这个示例中，规则会根据配置参数匹配并报告以下自定义组件标签：

• <MyComponent />
• <AnotherComponent />
• <EleButton />

而不会报告以下标签：

• 原生 HTML 标签（例如 <div>, <header>, <section>, <footer>, <p>）如果 filterHtmlTags 为 true
• element-ui 组件（例如 <el-button>, <ElTable>）如果 filterElementUIComponents 为 true

通过这种方式，你的 ESLint 规则可以扫描 Vue 文件中的所有标签，并根据配置参数选择性地排除原生 HTML 标签和/或 element-ui 组件，同时仍能识别和报告用户自定义的 Vue 组件。