[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 配置遇到的問題 這篇文章來自己修改。