[Vue3] Vite + Vue3 的 ESlint 和 Prettier 基礎配置

Vite + Vue 的環境建置快速方便,執行 npm init vue@next 指令之後,可以選擇加入 ESlint 和 Prettier 來優化程式碼,這兩個優化套件是許多開發者的標配,對於已經熟悉配置設定的老手沒有什麼問題,但對於新手來說,不知道自動建立的 ESlint 設定檔配置了什麼,也不知道怎麼修改,這篇就來簡單了解一下究竟 Vite 幫我們做了什麼設定。


系統環境

  • Node: v16
  • Vue: 3.2.33
  • Vite: 2.9.6
  • ESlint: 8.5.0
  • Prettier: 2.5.1

ESlint 配置檔

建立好的專案目錄中有一個 .eslintrc.cjs 檔案,初始配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
root: true,
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-prettier',
],
env: {
'vue/setup-compiler-macros': true,
},
};

基本配置說明

extends

  1. 第一項 plugin:vue/vue3-essential 是 Vue 官方的撰寫風格 eslint-plugin-vue,規範嚴格程度由 base(最低)到 recommended(最高),可以用 recommended 套用所有規範:

    • plugin:vue/base

    • plugin:vue/vue3-essential

    • plugin:vue/vue3-strongly-recommended

    • plugin:vue/vue3-recommended

  2. 第二項 eslint:recommended 是 ESlint 的推薦設定,可以在 官方文件 檢視詳細說明。

  3. 最後一項 @vue/eslint-config-prettier 用來關閉 ESlint 會跟 Prettier 衝突的規則,名稱前方加上 @vue 是專為 @vue-cli 和 create-vue setups 設計的版本,使用時需要照以下格式引用:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 這行需要放在最上面,引用此來源可以減少安裝許多 dependencies
    require('@rushstack/eslint-patch/modern-module-resolution');

    module.exports = {
    extends: [
    // 這個設定務必放在陣列的最後一項,確保不會被其他的設定覆蓋
    '@vue/eslint-config-prettier',
    ],
    };

env

  • vue/setup-compiler-macros 用來支援 Vue3 的 script setup。

額外配置

  1. 使用單引號

    • 方法 1:額外撰寫 prettier 的設定檔,設定檔的名稱非常多種,可以參考 官方文件

    • 方法 2:直接在 eslint 設定檔加入規則,要注意的是,有些 prettier 相關 extension 只會讀 prettier 的設定檔,寫在 eslint 就無效。

      1
      2
      3
      rules: {
      'prettier/prettier': ['error', { singleQuote: true }],
      },
  2. 支援 commonJS
    許多套件的設定檔是使用 commonJS 格式撰寫(例如:tailwindcss),需要增加 node 環境,ESlint 才不會跳出錯誤。

    1
    2
    3
    env: {
    node: true;
    }
  3. 加入 airbnb 風格
    目前 @vue/eslint-config-airbnb 只適用於 @vue/cli (webpack based),Vite 環境不能使用,如果還是有這個需求,可以參考 台部落 - Vite Vue3 項目 eslint 配置遇到的問題 這篇文章來自己修改。