ESLint 是如何检查 .vue 文件的


Posted in Vue.js onNovember 30, 2020

近期要做一个类似的内容,学习了一下 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 部分:

ESLint 是如何检查 .vue 文件的

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

processors

最后一部分是 processors,他是一个对象:

ESLint 是如何检查 .vue 文件的

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

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

vue-eslint-parser

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

ESLint 是如何检查 .vue 文件的

由于配置 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 文件的的详细内容,更多关于ESLint 检测.vue文件的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue 的 v-model用法实例
Nov 23 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
vuex的数据渲染与修改浅析
Nov 26 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
基于vuex实现购物车功能
Jan 10 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
Vue用mixin合并重复代码的实现
Nov 27 #Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 #Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 #Vue.js
vuex的数据渲染与修改浅析
Nov 26 #Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 #Vue.js
vue单元格多列合并的实现
Nov 26 #Vue.js
VUE项目实现主题切换的多种方法
Nov 26 #Vue.js
You might like
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
php的常量和变量实例详解
2017/06/27 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
Javascript 获取LI里的内容
2008/12/17 Javascript
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
详解Vue之事件处理
2020/07/10 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
python读取文件名并改名字的实例
2019/01/07 Python
PyTorch中的Variable变量详解
2020/01/07 Python
python进行参数传递的方法
2020/05/12 Python
存储过程和函数的区别
2013/05/28 面试题
营销人才自我鉴定范文
2013/12/25 职场文书
家佳咖啡店创业计划书
2013/12/27 职场文书
商场周年庆活动方案
2014/08/19 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
爱国主题班会教案
2015/08/14 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
基于Python实现射击小游戏的制作
2022/04/06 Python