为什么之前文章eslint-plugin-custom/vue-component-scanner.js中使用的是node.name,而上一篇文章中使用的是node.rawName来获取标签名？

在 ESLint 插件开发中，特别是在处理 Vue 文件时，使用 node.name 和 node.rawName 来获取标签名之间有一些细微的区别。这主要与使用的 AST（抽象语法树）解析器和节点类型有关。

node.name

• 适用场景：通常在使用 eslint-plugin-vue 或其他通用的 ESLint AST 解析器时，node.name 用于获取节点的名称。
• 节点类型：node.name 通常是一个标识符（identifier），适用于解析器生成的标准 AST 节点。
• 示例：如果你在 .js 文件中解析一个函数声明的节点，使用 node.name 会返回函数的名称。

node.rawName

• 适用场景：在处理 Vue 文件中的 <template> 块时，特别是使用 eslint-plugin-vue 提供的模板解析器时，node.rawName 是用于获取原始的标签名。
• 节点类型：node.rawName 通常用于特定于模板解析的节点类型，例如 Vue 的 VElement 节点，表示模板中的标签。
• 示例：在 .vue 文件中的 <template> 块中解析一个标签节点，使用 node.rawName 会返回标签的名称（包括原始的 HTML 标签或自定义组件标签）。

实际应用中的区别

• node.name：在一般的 JavaScript 解析场景下，node.name 是常用的属性，用于获取标识符或变量名。
• node.rawName：在特定于 Vue 模板解析的场景下，node.rawName 更加准确，因为 Vue 的模板解析器会生成特定的模板节点，其中包含 rawName 属性来表示标签名。

具体示例

• Vue 组件标签解析（使用 eslint-plugin-vue）：

  // 假设我们在 Vue 文件的 <template> 中解析组件标签
  module.exports = {
    create(context) {
      return {
        VElement(node) {
          const tagName = node.rawName;
          if (!isKebabCase(tagName) && !isPascalCase(tagName)) {
            context.report({
              node,
              loc: node.loc,
              message: 'Tag "{{tagName}}" is not in kebab-case or PascalCase.',
              data: {
                tagName
              }
            });
          }
        }
      };
    }
  };
  

• JavaScript 标识符解析（常规 ESLint 规则）：

  // 假设我们在 JavaScript 文件中解析函数声明
  module.exports = {
    create(context) {
      return {
        FunctionDeclaration(node) {
          const functionName = node.id.name;
          if (!isCamelCase(functionName)) {
            context.report({
              node: node.id,
              message: 'Function name "{{functionName}}" should be in camelCase.',
              data: {
                functionName
              }
            });
          }
        }
      };
    }
  };
  

结论

在开发 ESLint 规则时，需要根据上下文选择合适的节点属性。node.name 适用于一般的 JavaScript 解析场景，而在处理 Vue 模板时，使用 eslint-plugin-vue 提供的 node.rawName 更为准确。这确保了你的规则能够正确解析和报告标签名的格式问题。