快捷導(dǎo)航

ESLint 是如何檢查 .vue 文件的

更新時(shí)間：2020年11月30日 09:28:39 作者：梅旭光

這篇文章主要介紹了ESLint 是如何檢查 .vue 文件的，幫助大家更好的理解和使用ESLINT，感興趣的朋友可以了解下

近期要做一個(gè)類(lèi)似的內(nèi)容，學(xué)習(xí)了一下 Vue 是如何做的。

ESLint 中的擴(kuò)展機(jī)制

首先需要了解一下如何才能擴(kuò)展 ESLint 的功能。ESLint 擴(kuò)展機(jī)制主要有 Rules、Plugins、Formatters、Parsers，F(xiàn)ormatters 目前不需要用到，因此著重看一下其他三種方式。

Parser

用于自定義的解析文件內(nèi)容，返回 AST 給后續(xù)步驟使用。

Rules

用于定義校驗(yàn)規(guī)則。

Plugins

plugin 是多種功能的一個(gè)集合，可以定義以下內(nèi)容：

Rules：校驗(yàn)規(guī)則。
Environments：環(huán)境變量。
Processors：處理文件前后的鉤子函數(shù)。preprocess、postprocess。
Configs：一些預(yù)置的配置，可以讓用戶指定使用。

Vue 相關(guān)代碼庫(kù)

用于 .vue 文件的 eslint 代碼庫(kù)有兩個(gè)：eslint-plugin-vue 和 vue-eslint-parser。

eslint-plugin-vue 用于提供 Rules。

vue-eslint-parser 用于解析 .vue 文件，尤其是 template 部分。

eslint-plugin-vue

入口文件為 lib/index.js，其中設(shè)置了三部分內(nèi)容，rules、configs 和 processors。

rules

rules 部分對(duì)應(yīng)著非常多的校驗(yàn)規(guī)則，放在 rules 目錄下。rules 中關(guān)于 template 部分的校驗(yàn)，處理的是 vue-eslint-parser 中生成的 AST，這個(gè) AST 的格式定義可以在這里查看：https://github.com/vuejs/vue-eslint-parser/blob/master/docs/ast.md

configs

configs 部分預(yù)置了很多配置選項(xiàng)，不同選項(xiàng)的區(qū)別主要在于 rules 的開(kāi)關(guān)設(shè)置不同，我們不需要關(guān)心。這里我們主要看 base 配置中的 parser 部分：

parser 制定為了 vue-eslint-parser，這就是為什么我們不用手動(dòng)裝 vue-eslint-parser，而只需要安裝 eslint-plugin-vue 的原因。

processors

最后一部分是 processors，他是一個(gè)對(duì)象：

其中 preprocess 沒(méi)有做任何事情，直接將 code 返回了。

有時(shí)文件中會(huì)有一些注釋來(lái)開(kāi)啟關(guān)閉某些 rules，而 postprocess 所做的內(nèi)容是根據(jù)這些注釋對(duì) messages 做一個(gè)過(guò)濾。

vue-eslint-parser

vue-eslint-parser 的入口文件是 src/index.ts，該文件暴露出了 parseForESLint 和 parse 方法，這兩個(gè)方法做的事情是一樣的：輸入原始代碼，返回解析后的 AST。

由于配置 parser 后，所有文件都會(huì)經(jīng)過(guò) vue-eslint-parser，因此需要判斷是否是 .vue 文件，如果不是的話，使用 espree (ESLint 默認(rèn)的 JS 解析器) 或用戶自定義的其他 parser 來(lái)處理 js 文件內(nèi)容。

如果判斷是 vue 文件，那么會(huì)對(duì) HTMLParser 來(lái)解析 .vue 文件內(nèi)容，獲取到 script 和 template 部分。script 部分使用 espree 或用戶自定義的其他 parser 來(lái)處理 js 內(nèi)容，template 部分則已經(jīng)由 HTMLParser 解析過(guò)了，直接使用即可。

總體流程

最后是總體的流程：