近期要做一個(gè)類似的內(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)代碼庫

用于 .vue 文件的 eslint 代碼庫有兩個(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 部分對應(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 的開關(guān)設(shè)置不同，我們不需要關(guān)心。這里我們主要看 base 配置中的 parser 部分：

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

processors

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

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

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

vue-eslint-parser

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

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

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

總體流程

最后是總體的流程：

以上就是ESLint 是如何檢查 .vue 文件的的詳細(xì)內(nèi)容，更多關(guān)于ESLint 檢測.vue文件的資料請關(guān)注腳本之家其它相關(guān)文章！