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开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
vue特效之翻牌动画
Apr 20 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
PHP实现文件安全下载
2006/10/09 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
PHP错误机制知识汇总
2016/03/24 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
javascript 主动派发事件总结
2011/08/09 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
python 字符串和整数的转换方法
2018/06/25 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
用python读取xlsx文件
2020/12/17 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
军训鉴定表自我鉴定
2014/02/13 职场文书
PHP基本语法
2021/03/31 PHP
python实现图片批量压缩
2021/04/24 Python
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript