ESLint 是如何检查 .vue 文件的

站长资源 2024/12/24 佚名

64 1538 64

DDR爱好者之家 Design By 杰米

近期要做一个类似的内容，学习了一下 Vue 是如何做的。

ESLint 中的扩展机制

首先需要了解一下如何才能扩展 ESLint 的功能。ESLint 扩展机制主要有 Rules、Plugins、Formatters、Parsers，Formatters 目前不需要用到，因此着重看一下其他三种方式。

Parser

用于自定义的解析文件内容，返回 AST 给后续步骤使用。

Rules

用于定义校验规则。

Plugins

plugin 是多种功能的一个集合，可以定义以下内容：

Rules：校验规则。
Environments：环境变量。
Processors：处理文件前后的钩子函数。preprocess、postprocess。
Configs：一些预置的配置，可以让用户指定使用。

Vue 相关代码库

用于 .vue 文件的 eslint 代码库有两个：eslint-plugin-vue 和 vue-eslint-parser。

eslint-plugin-vue 用于提供 Rules。

vue-eslint-parser 用于解析 .vue 文件，尤其是 template 部分。

eslint-plugin-vue

入口文件为 lib/index.js，其中设置了三部分内容，rules、configs 和 processors。

rules

rules 部分对应着非常多的校验规则，放在 rules 目录下。rules 中关于 template 部分的校验，处理的是 vue-eslint-parser 中生成的 AST，这个 AST 的格式定义可以在这里查看：https://github.com/vuejs/vue-eslint-parser/blob/master/docs/ast.md

configs

configs 部分预置了很多配置选项，不同选项的区别主要在于 rules 的开关设置不同，我们不需要关心。这里我们主要看 base 配置中的 parser 部分：

parser 制定为了 vue-eslint-parser，这就是为什么我们不用手动装 vue-eslint-parser，而只需要安装 eslint-plugin-vue 的原因。

processors

最后一部分是 processors，他是一个对象：

其中 preprocess 没有做任何事情，直接将 code 返回了。

有时文件中会有一些注释来开启关闭某些 rules，而 postprocess 所做的内容是根据这些注释对 messages 做一个过滤。

vue-eslint-parser

vue-eslint-parser 的入口文件是 src/index.ts，该文件暴露出了 parseForESLint 和 parse 方法，这两个方法做的事情是一样的：输入原始代码，返回解析后的 AST。

由于配置 parser 后，所有文件都会经过 vue-eslint-parser，因此需要判断是否是 .vue 文件，如果不是的话，使用 espree (ESLint 默认的 JS 解析器) 或用户自定义的其他 parser 来处理 js 文件内容。

如果判断是 vue 文件，那么会对 HTMLParser 来解析 .vue 文件内容，获取到 script 和 template 部分。script 部分使用 espree 或用户自定义的其他 parser 来处理 js 内容，template 部分则已经由 HTMLParser 解析过了，直接使用即可。

总体流程

最后是总体的流程：

以上就是ESLint 是如何检查 .vue 文件的的详细内容，更多关于ESLint 检测.vue文件的资料请关注其它相关文章！

检查.vue文件,ESLint,检查.vue文件

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“ESLint 是如何检查 .vue 文件的”

暂无评论...

ESLint 是如何检查 .vue 文件的

详解Vue 的异常处理机制

JavaScript实现商品评价五星好评

评论“ESLint 是如何检查 .vue 文件的”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接