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实现下载文件流完整前后端代码
Nov 17 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 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语法(4)
2006/10/09 PHP
PHP children()函数讲解
2019/02/03 PHP
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
python中常用检测字符串相关函数汇总
2015/04/15 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
Python运算符+与+=的方法实例
2021/02/18 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
高中生自我评语大全
2014/01/19 职场文书
岗位职责风险点
2014/03/12 职场文书
三好生演讲稿
2014/09/12 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
第二次离婚起诉书
2015/05/18 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
60句有关成长的名言
2019/09/04 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技
windows server2008 开启端口的实现方法
2022/06/25 Servers