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的tree组件
Dec 03 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
vue实现登录功能
Dec 31 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
vue实现简易音乐播放器
Aug 14 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如何得到当前页和上一页的地址?
2006/11/27 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
python set内置函数的具体使用
2019/07/02 Python
Django密码系统实现过程详解
2019/07/19 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
python Tornado框架的使用示例
2020/10/19 Python
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
个人简历自我评价八例
2013/10/31 职场文书
安全资金保障制度
2014/01/23 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
股权转让协议范本
2014/12/07 职场文书
葬礼主持词
2015/07/02 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
详解python字符串驻留技术
2021/05/21 Python
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
MySQL sql模式设置引起的问题
2022/05/15 MySQL