對Vue項目來說,Vue 官方通過 eslint-plugin-vue
提供了多個規則集(Rule Sets),適用于不同嚴格度和 Vue 版本。以下是主要的規則集及其對應的 ESLint 插件和用途:
1. Vue 2.x 規則集
適用于 Vue 2 項目,規則集名稱以 plugin:vue/
開頭:
規則集名稱 | 嚴格度 | 說明 |
---|---|---|
plugin:vue/base | 最低 | 僅包含 Vue 2 必要的語法解析規則(不檢查代碼質量)。 |
plugin:vue/essential | 基礎 | 避免 Vue 2 錯誤的必要規則(如 v-for 需要 key )。 |
plugin:vue/recommended | 推薦 | 在 essential 基礎上增加代碼風格和最佳實踐(更嚴格)。 |
plugin:vue/strongly-recommended | 強推薦 | 在 recommended 基礎上進一步強化代碼一致性(如屬性換行、組件命名)。 |
2. Vue 3.x 規則集
適用于 Vue 3 項目,規則集名稱以 plugin:vue/vue3-
開頭:
規則集名稱 | 嚴格度 | 說明 |
---|---|---|
plugin:vue/vue3-base | 最低 | Vue 3 必要的語法解析規則(不檢查代碼質量)。 |
plugin:vue/vue3-essential | 基礎 | 避免 Vue 3 錯誤的必要規則(如 Composition API 的 setup 檢查)。 |
plugin:vue/vue3-recommended | 推薦 | 擴展 essential ,增加 Vue 3 風格和最佳實踐。 |
plugin:vue/vue3-strongly-recommended | 強推薦 | 更嚴格的代碼格式要求(如模板縮進、屬性順序)。 |
3. 其他規則集
規則集名稱 | 說明 |
---|---|
plugin:vue/all | 啟用所有 Vue 2 規則(包括實驗性規則,可能過于嚴格)。 |
plugin:vue/vue3-all | 啟用所有 Vue 3 規則(適合追求極致一致性的團隊)。 |
對應的 ESLint 插件
所有 Vue 規則集均通過 eslint-plugin-vue 插件提供:
- 安裝命令:
npm install eslint-plugin-vue --save-dev
- 依賴的解析器:
Vue 單文件組件(.vue
)需要配合vue-eslint-parser
(內置在插件中),同時需指定 JavaScript 解析器(如@babel/eslint-parser
):"parserOptions": {"parser": "@babel/eslint-parser" }
注意事項
- 避免混合使用 Vue 2 和 Vue 3 的規則集。
- 通常來說,根據 Vue 版本最常用的規則集是:
Vue 2 → plugin:vue/recommended
Vue 3 → plugin:vue/vue3-recommended - 可通過
rules
字段覆蓋或擴展默認規則:"rules": {"vue/multi-word-component-names": "off" // 關閉組件名必須多單詞的規則 }