[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 | /* eslint-env node */ |
基本配置說明
extends
第一項 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
第二項 eslint:recommended 是 ESlint 的推薦設定,可以在 官方文件 檢視詳細說明。
最後一項 @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:額外撰寫 prettier 的設定檔,設定檔的名稱非常多種,可以參考 官方文件。
方法 2:直接在 eslint 設定檔加入規則,要注意的是,有些 prettier 相關 extension 只會讀 prettier 的設定檔,寫在 eslint 就無效。
1
2
3rules: {
'prettier/prettier': ['error', { singleQuote: true }],
},
支援 commonJS
許多套件的設定檔是使用 commonJS 格式撰寫(例如:tailwindcss),需要增加 node 環境,ESlint 才不會跳出錯誤。1
2
3env: {
node: true;
}加入 airbnb 風格
目前 @vue/eslint-config-airbnb 只適用於 @vue/cli (webpack based),Vite 環境不能使用
,如果還是有這個需求,可以參考 台部落 - Vite Vue3 項目 eslint 配置遇到的問題 這篇文章來自己修改。