ESLint 是如何检查 .vue 文件的

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

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

processors

最后一部分是 processors，他是一个对象：

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

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

vue-eslint-parser

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

由于配置 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文件的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue项目中使用eslint+prettier规范与检查代码的方法

    1.前言   在团队协作中,为避免低级 Bug.以及团队协作时不同代码风格对彼此造成的困扰与影响,会预先制定编码规范.使用 Lint 工具和代码风格检测工具,则可以辅助编码规范执行,有效控制代码质量.EsLint 则是其中一个很好的工具. EsLint 提供以下支持: ES6 AngularJS JSX Style 检查 自定义错误和提示 EsLint 提供以下几种校验: 语法错误校验 不重要或丢失的标点符号,如分号 未被使用的参数提醒 漏掉的结束符,如} 确保样式的统一规则,如 sass 或者

  • vscode配置setting.json文件实现eslint自动格式代码

    一.ESlint+Vetur 实现ESlint代码规范 二.重点----旧版本(旧版本配置在setting.json 会出现警告) { "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", { "language": "vue", "autoFix": true }, { "language"

  • vue-cli4项目开启eslint保存时自动格式问题

    最近新建一个vue-cli4的项目,初始化的时候没开启eslint,后面想开启的时候不好配置,这里就做个开启eslint和保存时自动修复格式的总结 vscode首先安装eslint插件 配置vscode的自动保存eslint格式 Ctrl+shift+p 把下面代码复制到里面 "editor.tabSize": 2, "eslint.alwaysShowStatus": true, "eslint.autoFixOnSave": true, &q

  • Idea安装Eslint插件提示：Plugin NativeScript was not installed的问题

    Idea安装Eslint插件文档 写在前面的话,网络由于设置了代理,在你下载安装插件的时候,会提示无法连接或者不能下载插件,对此我做了以下处理,首先看看你有没有下面的提示:如果有,直接看异常安装步骤,没有的话看正常安装步骤就可以. 这是安装插件无法下载的提示 正常安装步骤流程图 嗯,当然你配置了idea的网络代理,可以无视我的这个操作,走下面的流程图 异常安装步骤流程图 首先这里需要打开idea的插件下载库https://plugins.jetbrains.com/plugin 打开插件库,输入

  • vscode代码格式化和eslint的使用

    简介 今天看着写的代码越来越多后,发现自己读起都有点吃力了,哈哈,自己看着眼睛痛,就准备整顿一下,毕竟这个项目还要维护很久的,找解决方案和测试解决方案就用了一个半小时,严重开始怀疑自己的智商了.下面的目标让代码看起来很公正 代码编辑器 vscode version:版本 1.35.1 (1.35.1) 2019-06-12T14:19:05.197Z更新的 vscode代码格式化 因为目前公司就我一个后端,项目也不大,所以就采用这种方案,简单快捷粗暴. 一.点击code->preferences

  • vue-cli3项目配置eslint代码规范的完整步骤

    前言 最近接手了一个项目,由于之前为了快速开发,没有做代码检查.为了使得代码更加规范以及更易读,所以就要eslint上场了. 安装依赖 安装依赖有两种方法: 在cmd中打上把相应的依赖加到devDependencies下,再npm install对应依赖. 在package.json文件加上相应依赖: "eslint-plugin-html": "^6.0.3", "@vue/cli-plugin-eslint": "^3.3.0&qu

  • 关于VSCode 装好ESLint 插件 import 报黄线的问题

    VS Code 装好ESLint 插件报黄线的问题,具体解决方法如下所示: ESLint is disabled since its execution has not been approved or denied yet. Use the light bulb menu to open the approval dialog.eslint 查了翻译,说是什么被禁用了,我的插件明明是开的呀. 去网上查了一圈也没有看到和我一样的问题.我英语不是很好,所以碰了不少壁. 其实这个问题解决起来很简单.

  • eslint+prettier统一代码风格的实现方法

    1.实现效果 Eslint校验代码语法,prettier统一格式化代码,按下保存自动修复eslint错误,自动格式化代码. 2.安装vscode插件 Vetur ESLint Prettier - Code formatter 3.配置vscode设置 文件–首选项–设置,打开json模式,添加以下配置: { // 控制工作台中活动栏的可见性. "workbench.activityBar.visible": true, //主题设置 "workbench.colorThem

  • vscode 配置vue+vetur+eslint+prettier自动格式化功能

    该配置用于vue开发,最终效果是保存时自动根据eslint对js.html和css代码进行格式化. vscode Vetur插件 Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和eslint会有冲突,所以没用上. vscode ESlint插件 Eslint插件用于根据工程目录的.eslintrc.js配置文件在编辑器中显示一些错误提示,后面的自定格式化根据这里的错误提示进行格式化操作. 基于vue-cli创建的项目 以下相关步骤需要注意: 创建的时候把Linter/For

  • Vue的Eslint配置文件eslintrc.js说明与规则介绍

    默认eslint规则: 代码末尾不能加分号 ; 代码中不能存在多行空行: tab键不能使用,必须换成两个空格: 代码中不能存在声明了但未使用的变量: 最简单的方法,关闭eslint检测,其实很简单,把 build/webpack.base.conf.js 配置文件中的eslint rules注释掉即可. 但不推荐这么做,eslint检测是有必要的,能保持良好的代码风格. 第二种方法就是把不符合自己习惯的规则去掉,找到配置文件,名字以.eslintrc.*为名. module.exports =

  • JS代码检查工具ESLint介绍与使用方法

    JS代码检查工具ESLint介绍与使用方法

    ESLint不但提供一些默认的规则,也提供用户自定义规则来约束所写的JavaScript代码. 发展历史 Douglas Crockford大神根据自己的理念用JavaScript写了一个JavaScript代码规范检查工具,这就是JSLint.后来非常流行,也的确帮助了广大的JavaScript程序员.但是,大神对于自己的代码规范不做丝毫的妥协,对开源社区的反馈的回应也不礼貌.于是,JSLint从一个帮助程序员规范代码,避免Bug的工具,变成了一个让代码像Crockford的工具.在最不信神的

  • 在vue中使用eslint,配合vscode的操作

    不管是多人合作还是个人项目,代码规范是很重要的.这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性.这所谓工欲善其事,必先利其器,个人推荐 eslint+vscode 来写 vue,绝对有种飞一般的感觉. 每次保存,vscode就能标红不符合eslint规则的地方,同时还会做一些简单的自我修正.安装步骤如下: 首先安装eslint插件 安装并配置完成 ESLint 后,我们继续回到 VSCode 进行扩展设置,依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件,添加

  • 使用eslint和githooks统一前端风格的技巧

    前端团队开发时,是必须要有一个统一的前端规范的,用一套统一的规范来规范开发者,可以有效的避免在提交和拉取代码时造成的代码错乱问题,这边文章主要讲下我们团队的代码规范使用,eslint结合vscode保存时自动修复不规范代码,githooks提交代码时的eslint校验和信息规范. 添加eslint vue-cli3构建一个新项目(包含eslint模块),完成后添加 .eslintrc.js 配置如下: module.exports = { root: true, parserOptions: {

随机推荐