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 +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
vue递归实现树形组件
Jul 15 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
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
php处理斐波那契数列非递归方法
2012/02/04 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
PHP模块memcached使用指南
2014/12/08 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
selenium+python实现自动化登录的方法
2018/09/04 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
python实现磁盘日志清理的示例
2020/11/05 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
华为慧通笔试题
2016/04/22 面试题
Jdbc数据访问技术面试题
2012/03/30 面试题
幼儿园安全责任书
2014/04/14 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
端午节寄语2015
2015/03/23 职场文书
贷款担保书范本
2015/09/22 职场文书
党员公开承诺书2016
2016/03/24 职场文书
详解jQuery的核心函数和事件处理
2022/02/18 jQuery