如何替 Vue Cli 加入 ESLint

前言

實際開發專案時我們為了確保程式碼的品質，通常都會加入程式碼風格管理器，也就是 ESLint，但在 Vue Cli 中該如何正確加入呢？

Vue Cli 加入方式

其實在官方文件中就有提供一個正確加入的方式，你只需要在該 Vue Cli 專案輸入以下指令

1

vue add eslint

或是第二種指令輸入方式

1

vue add @vue/cli-plugin-eslint

這邊舉例來講我在開發時都是使用 Airbnb 的風格來撰寫(若你對於 JavaScript 還沒有很熟悉我會建議你選擇 Standard，挫折感比較不會那麼重)

通常在「Pick additional lint features」我會兩個都選，你可以只選第一個就好。

ESLint 加入差異

接下來讓我們看一下使用官方所提供的 vue add eslint 跟一般常見的 eslint --init 差別在哪裡吧

首先先講講 vue add eslint 的差異，在 ESLint 的撰寫規則中你可以看到 extends 底下有這兩行

1
2
3
4

extends: [
  'plugin:vue/essential',
  '@vue/airbnb',
],

plugin:vue/essentia 這一行我們等等再講，先來講講第二行。

我們可以看到 airbnb 前面有一個 @vue，其主要原因在於這是針對 Vue 所客製化的 ESLint，若你不是透過 vue add eslint 加入而是使用 eslint --init 的話，通常來講你會看到的形式是這樣子

1
2
3
4

extends: [
  'plugin:vue/essential',
  'airbnb-base',
],

你會發現第二行會不太一樣，那這兩者差異會在哪裡？簡單來講就是「規則不同」，因此若你是使用 eslint --init 加入 ESLint 的話，你會發現不管你怎麼修正錯誤永遠都似乎無法修正一樣，最明顯的錯誤就是 Unable to resolve path to module，而這個錯誤是因為使用 eslint --init 加入 ESLint 之後他並沒有針對 Vue Cli 客製化一些規則，因此你會有修不完的錯誤。

因此在這邊會強烈建議你若要對 Vue Cli 加入 ESLint 規範，請一定要透過 vue add eslint 加入唷。

plugin 的 essential

這一段 plugin:vue/essential 其實是 Vue 官方所推出的風格規則，主要有分為四種

• base - 基礎規範
• essential - 預設規範
• strongly-recommended - 推薦規範
• recommended - 最嚴謹的規範

若你想要修改風格規則的話，只需要調整 vue/ 之後英文即可，例如修改成 plugin:vue/strongly-recommended。

但是在這邊我會建議你使用預設規範即可，因為使用 essential 風格你就可以達到良好的程式碼品質，所以並不建議你調整成其他的。

詳細的細節規範你可以看官方文件、風格指南 官方都有一些相當好的範例可以看。

參考文獻

• eslint-plugin-vue
• 風格指南