近期要做一個類似的內容，學習了一下 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檔案的資料請關注我們其它相關文章！