【vue系列】 vue2.0 專案配置 ESLint

尤小小發表於2020-01-08
VueEsLint

協同開發過程中，不同的編碼習慣寫出的程式碼，差異很大。日常維護程式碼或者修復bug的時候時候，看各種風格的程式碼，影響效率不說，還有可能改出低階問題。目前我們的專案還沒有程式碼規範，我決定要做點改變，於是考慮使用 ESlint 來做程式碼規範檢查。

考察了ESlint的官方網站和一些技術貼，決定先給我們其中的一個 Vue2.0 專案配置 ESLint。在配置 ESLint 過程中走了一些彎路，把配置過程記錄下來，方便日後檢視。

預測獲得的收益：

  • 專案編碼風格統一，師出一人；
  • 開發過程中修復語法錯誤，減少潛在 bug；
  • 規定規範編碼，減少程式碼冗餘，提高程式碼質量；

預期風險：

擔心整個專案新增了 ESLint，其他同事冒火，因為是多頁面應用，在專案根目錄下做了配置，新需求可以使用新配置，老專案可以自行選擇要不要改一輪eslint的報告提示，這次給我們的 Vue2.0 專案配置了 ESLint 也給團隊做點貢獻。

配置ESLint

咳咳，配置流程來了。

1. 安裝 eslint

既然要用 ESLint ，就要安裝它，通過命令： cnpm I eslint -D 安裝。

2. 初始配置 eslint

eslint 安裝好之後，執行 eslint —init命令做些簡單配置，我們可以選擇我們需要的檢測的環境、檔案型別等等。這步完成，在專案根目錄下會生成一個 eslintrc.js 檔案。

3. 安裝 eslint-loader

我們的專案需要webpack來編譯，需要對應的loader，安裝 eslint-loader，執行命令 cnpm I eslint-loader -D。

如果有 command not found: eslint 的報錯提示，可以執行 ./node_modules/.bin/eslint --init 來進行eslint配置化安裝

4. 配置 webpack

開啟 webpack 的 config 配置檔案配置：

obj.module = {
    rules: [
        // ...
        { 
            test: /\.(js|vue)$/,
            loader: 'eslint-loader',
            enforce: 'pre',
            include: [ path.resolve(commonDir, '../index.js'), resolve('./pages'), resolve('./components')], // 
            options: {
                formatter: require('eslint-friendly-formatter')
            }
        }
    ]
};
複製程式碼

5. 安裝 eslint-friendly-formatter

eslint-friendly-formatter 這個模組是為了方便本地規範檢查程式碼。記得執行 cnpm i eslint-friendly-formatter -D 安裝上。

6. 安裝 babel-eslint

操作到這裡關於 eslint 的基本配置就完成了，把專案跑起來，咿竟然有 parset 的報錯，說最新的eslint解析有問題。查詢資料是說需要 babel-eslint，按依賴安裝的方式安裝上。

7. 安裝 eslint-plugin-vue

Vue.js 的官方 ESLint 外掛： eslint-plugin-vue ，這個外掛允許 我們使用 ESLint 檢測 .vue 檔案的 <template> 和 <script>，有助於實時檢測程式碼。 把這個外掛安裝上，最終的 .eslintrc.js:

module.exports = {
    "root": true,
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "parser": 'babel-eslint',
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};
複製程式碼

配置引數：

  • root 為true根配置檔案，否則會按照目錄樹向上搜尋
  • env 執行環境
  • extends 對基礎配置進行擴充套件，可以配置共享配置包 eslint-config-airbnb等。配置包需要安裝。
  • globals 指定全域性變數，無視 no-undef 規則
  • parserOptions 語法解析器選項
  • plugins 外掛 ，外掛命名規範是 eslint-plugin- 為字首
  • rules 校驗規則

8. 配置小結

  • 需要安裝的依賴有
cnpm i eslint eslint-loader eslint-friendly-formatter babel-eslint  eslint-plugin-vue  -D
複製程式碼
  • webpack 配置
  • .eslintrc.js 配置

配置完事，專案跑起來一堆的報錯，來來來，?開始自我折磨吧。經歷磨練才能寫出更優雅更規範的程式碼。看著頁面不多，花了幾個小時來處理 ESLint 的警告和報錯。?

配置問題

Use the latest vue-eslint-parser

在eslint-plugin-vue官網看到關於這個問題的解釋和解決方案:

eslint-plugin-vue 裡的大多數規則都需要 vue-eslint-parser 來解析 template 的AST， 然而 babel-eslint 和 vue-eslint-parser 在解析上有衝突，解決辦法是把 "parser": "babel-eslint", 移入到 parserOptions 內。

【vue系列】 vue2.0 專案配置 ESLint

- "parser": "babel-eslint",
+ "parser": "vue-eslint-parser",
  "parserOptions": {
+     "parser": "babel-eslint",
      "sourceType": "module"
  }
複製程式碼

疑問

這次配置ESLint，留下了一些疑惑，得空扒原始碼吧。

  • eslint 是如何檢查程式碼的？
  • eslint-loader 都處理了什麼？
  • 為什麼需要 eslint-friendly-formatter？
  • 為什麼用 babel-eslint，它是怎樣工作的？
  • 為什麼需要 eslint-plugin-vue？

1. ESLint 是如何檢查程式碼的

出於對這個問題的疑惑，去查了一些資料，瞭解了 JS Linter 進化史。ESLint 的核心訴求是將程式碼解析與程式碼檢查邏輯分開，支援自定義規則，每個規則是一個外掛，超強的開發能力讓ESLint變的更好用。

引用JS Linter 進化史的一段話：

ESLint 核心部分專注於配置生成、規則管理、上下文維護、遍歷 AST、報告產出等主流程。目前 ESLint 支援自定義的解析器、規則外掛、預編譯外掛、結果報告，它更像是一個平臺，對核心的流程設定約束，並開放各方面的能力，從而適應複雜多變的實際場景。

2. 為什麼需要 eslint-loader

eslint-loader 的作用是讓 webpack 可以處理eslint。

3. 為什麼需要 eslint-friendly-formatter

看 eslint-friendly-formatter介紹的時候，該外掛的作者說了下面這段話：

【vue系列】 vue2.0 專案配置 ESLint

大概是講，他使用eslint的時候，發現eslint的報告提示在命令列中不友好，他不能在命令列中直接點選跳轉到報錯的程式碼處，沒有記錄報錯的行列，對應的報錯提示相關文件也不方便直接檢視。於是他寫了這個外掛來處理以上問題。

現在這個外掛被 eslint 官方推薦了。

4. 為什麼用 babel-eslint，它是怎樣工作的

通常情況下 eslint 使用預設的解析器 babel。但是 eslint 本身不能檢測實驗階段的語法，ESNext 的很多實驗階段的語法瀏覽器廠商支援了，開發者也在用。剛好 eslint 允許使用自定義解析器，所以就有了 babel-eslint 外掛來處理這個事。

babel-eslint 匯出了 eslint 可以使用的AST。

AST 是 Abstract Syntax Tree（抽象語法樹）

5. 為什麼需要 eslint-plugin-vue

Vue 單檔案元件不是普通的 Javascript，不能使用預設的解析器。所以不得不有了 eslint-plugin-vue 用於對 template 和 <script> 進行解析生成特定的增強的 AST。

可以對比著 vue風格指南看。目前我們使用的 優先順序A：必要的 的規範，即 plugin:vue/essential 。plugin:vue/essential 的具體規則可以訪問eslint-plugin-vue官網。

參考

JS Linter 進化史

最後

很多學習 Vue 的小夥伴知識碎片化嚴重，我想整理出系統化的一套關於Vue的學習系列部落格。在自我成長的道路上，也希望能夠幫助更多人進步。

不看後悔，Vue進階系列

都看到這裡了，趕緊關注 MiaoMiao、點贊、評論留言啦～

相關文章