Vue 3源码深度解析之：`Vue`的`eslint`：`ESLint`插件如何检查`Vue`单文件组件。

各位观众老爷，大家好！今天咱们来聊聊Vue 3源码里一个挺有意思的零件——Vue的ESLint插件，看看它到底是怎么“揪”出你写的Vue单文件组件里的那些“小辫子”。

开场白：ESLint和Vue单文件组件的爱恨情仇

ESLint，大家都熟，代码界的“找茬”大师，专门负责检查你的JavaScript代码有没有不规范的地方，比如你写了个没用的变量，少了个分号，或者缩进不对劲，它都会毫不留情地指出来。

Vue单文件组件（SFC），就是那些以.vue结尾的文件，里面包含了<template>、<script>和<style>三个部分，把HTML、JavaScript和CSS“打包”在一起，方便管理和维护。

问题来了：ESLint本身是JavaScript代码的“监工”，它怎么能看懂.vue文件里的HTML和CSS呢？这就需要Vue的ESLint插件来帮忙了，它就像一个“翻译官”，把.vue文件里的内容“翻译”成ESLint能理解的格式，然后ESLint才能进行检查。

第一幕：eslint-plugin-vue的“前世今生”

负责“翻译”这个工作的，就是eslint-plugin-vue这个插件。它并非Vue核心团队直接维护，而是一个社区维护的开源项目，但它在Vue生态中扮演着非常重要的角色。它提供了大量的规则，可以检查Vue单文件组件里的各种问题，比如：

• vue/no-unused-vars： 检查<template>里有没有没用到的变量。
• vue/require-prop-types： 检查props有没有定义类型。
• vue/html-self-closing： 检查HTML标签是否自闭合。
• vue/attribute-hyphenation： 检查HTML属性是否使用连字符命名。
• vue/v-on-event-hyphenation： 检查v-on事件名是否使用连字符命名。

等等等等，规则多到可以写本书了。

第二幕：eslint-plugin-vue的核心机制

eslint-plugin-vue的核心机制可以概括为以下几个步骤：

1. 解析.vue文件： 使用专门的解析器（比如vue-eslint-parser）把.vue文件分解成不同的部分，也就是<template>、<script>和<style>。
2. 提取JavaScript代码： 从<script>标签里提取JavaScript代码，这部分代码可以直接交给ESLint进行检查。
3. “虚拟化”<template>和<style>： 把<template>和<style>里的内容转换成ESLint能理解的AST（Abstract Syntax Tree，抽象语法树）。
4. 使用自定义规则进行检查： eslint-plugin-vue提供了大量的自定义规则，这些规则会根据AST来检查<template>和<style>里的代码是否符合规范。
5. 报告错误： 如果发现有不符合规范的地方，eslint-plugin-vue会向ESLint报告错误，ESLint再把这些错误显示给你看。

第三幕：vue-eslint-parser的“妙手回春”

vue-eslint-parser是eslint-plugin-vue的“左膀右臂”，它的主要作用是把.vue文件解析成ESLint能理解的AST。它比普通的JavaScript解析器更聪明，因为它知道.vue文件里有HTML、CSS和JavaScript，所以它可以把这些内容分别解析成不同的AST。

简单来说，vue-eslint-parser做了以下几件事：

1. 识别<template>、<script>和<style>： 它能准确地找到这三个标签，并把它们的内容提取出来。
2. 解析<template>： 它使用HTML解析器（比如htmlparser2）把<template>里的HTML代码解析成AST。
3. 解析<script>： 它使用JavaScript解析器（比如espree）把<script>里的JavaScript代码解析成AST。
4. 处理指令和表达式： 它能识别Vue的指令（比如v-if、v-for）和表达式（比如{{ message }}），并把它们转换成AST节点。
5. 生成最终的AST： 它把HTML、CSS和JavaScript的AST合并成一个大的AST，这个AST包含了.vue文件的所有信息。

第四幕：自定义规则的“火眼金睛”

eslint-plugin-vue的核心是它提供的各种自定义规则。这些规则定义了哪些代码是不符合规范的，以及如何修复这些问题。

一个自定义规则通常包含以下几个部分：

• meta： 描述规则的信息，比如规则的名称、描述、类型（problem或suggestion）和是否可修复。
• create： 一个函数，接收一个context对象作为参数，context对象包含了当前代码的信息和ESLint提供的各种API。
• create函数返回一个对象，这个对象定义了各种AST节点的访问器函数。 当ESLint遍历AST时，如果遇到某个AST节点，就会调用相应的访问器函数。

举个例子，我们来看一个简单的自定义规则，用于检查v-for指令是否使用了key属性：

// 自定义规则：require-v-for-key.js
module.exports = {
  meta: {
    type: 'problem',
    docs: {
      description: '要求 v-for 指令使用 key 属性',
      category: '建议',
      recommended: 'warn'
    },
    fixable: null,  // 如果可以自动修复，设置为 'code'
    schema: [] // 规则的配置项
  },

  create: function (context) {
    return {
      VElement (node) {
        if (node.startTag.attributes) {
          const vForAttribute = node.startTag.attributes.find(
            attribute => attribute.key.name === 'v-for'
          );

          if (vForAttribute) {
            const keyAttribute = node.startTag.attributes.find(
              attribute => attribute.key.name === 'key'
            );

            if (!keyAttribute) {
              context.report({
                node,
                message: 'v-for 指令必须使用 key 属性'
              });
            }
          }
        }
      }
    };
  }
};

代码解释：

• meta：定义了规则的元数据，包括类型、描述、推荐级别等等。
• create：定义了规则的核心逻辑。
  • VElement：这是一个访问器函数，当ESLint遍历到VElement节点时，就会调用这个函数。VElement节点代表一个Vue元素，比如<div>或<component>。
  • node：VElement节点的AST对象。
  • node.startTag.attributes：包含了元素的所有属性。
  • vForAttribute：查找v-for属性。
  • keyAttribute：查找key属性。
  • context.report：如果找不到key属性，就向ESLint报告一个错误。

如何使用这个自定义规则？

1. 把上面的代码保存为require-v-for-key.js文件。
2. 在.eslintrc.js文件中配置ESLint：

// .eslintrc.js
module.exports = {
  // ...
  plugins: [
    'vue'
  ],
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential'
  ],
  rules: {
    // ...
    'vue/require-v-for-key': 'error', // 使用自定义规则
    'require-v-for-key': require('./require-v-for-key') // 引入本地规则
  }
};

第五幕：实战演练：一个完整的例子

假设我们有以下.vue文件：

<template>
  <ul>
    <li v-for="item in items">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    };
  }
};
</script>

<style scoped>
ul {
  list-style: none;
}
</style>

如果我们运行ESLint，就会发现v-for指令没有使用key属性，ESLint会报错。

修复方法：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    };
  }
};
</script>

<style scoped>
ul {
  list-style: none;
}
</style>

加上key属性后，ESLint就不会报错了。

第六幕：eslint-plugin-vue的源码结构“窥探”

虽然我们不能把eslint-plugin-vue的全部源码都过一遍，但我们可以大致了解一下它的目录结构：

eslint-plugin-vue/
├── lib/
│   ├── rules/            # 所有自定义规则的定义
│   │   ├── no-unused-vars.js
│   │   ├── require-prop-types.js
│   │   └── ...
│   ├── processors/       # 处理器的定义，用于处理`.vue`文件
│   │   └── template.js
│   └── index.js          # 插件的入口文件
├── tests/              # 测试用例
│   ├── rules/
│   │   ├── no-unused-vars.js
│   │   ├── require-prop-types.js
│   │   └── ...
│   └── ...
├── package.json
└── README.md

• lib/rules/：存放所有自定义规则的定义文件。每个文件导出一个规则对象，包含meta和create属性。
• lib/processors/：存放处理器的定义文件。处理器用于把.vue文件转换成ESLint能理解的格式。
• index.js：插件的入口文件，负责注册插件的规则和处理器。
• tests/：存放测试用例，用于测试规则和处理器是否正常工作。

第七幕：总结与展望

eslint-plugin-vue是Vue生态中不可或缺的一部分，它可以帮助我们编写更规范、更易于维护的Vue代码。通过了解它的核心机制和源码结构，我们可以更好地理解Vue单文件组件的解析过程，并自定义规则来满足自己的需求。

简单总结一下：

组件/模块	功能	关键技术
eslint-plugin-vue	Vue的ESLint插件，提供Vue SFC的检查规则	AST抽象语法树，自定义ESLint规则，解析器
vue-eslint-parser	.vue文件的解析器，生成AST	HTML解析器，JavaScript解析器，指令和表达式处理
自定义规则	定义代码规范，检查代码是否符合规范	AST访问器函数，context.report报告错误，meta定义规则元数据

当然，eslint-plugin-vue还有很多高级用法，比如自动修复、配置共享、与TypeScript集成等等，这些都需要我们在实际项目中不断探索和学习。

好了，今天的讲座就到这里，希望大家有所收获！下课！