vue eslint報錯error "Component name "*****" should always be multi-word"解決

2022-09-06 18:05:50

出現的問題：

在 vue-cli 建立的專案中，建立檔案並命名後，會報 “Component name "*****" should always be multi-word” 報錯；

報錯截圖範例如下：

Component name "******" should always be multi-word.eslintvue/multi-word-component-names

報錯的原因：

在元件命名的時候未按照 ESLint 的官方程式碼規範進行命名，根據 ESLint 官方程式碼風格指南，除了根元件（App.vue）以外，其他自定義元件命名要使用大駝峰命名方式或者用“-”連線單詞進行命名；

解決方案：

方案一：重新命名(親測有效)

檔案的名稱重新命名
重新命名元件名為駝峰命名方式或者用“-”連線單詞的格式

這樣問題就解決啦~~~~

範例如下：

方案二：設定 vue.config.js 檔案（網上方法，本人使用無效）

在根目錄下找到 vue.config.js 檔案（如果沒有則新建一個，按照範例中的程式碼進行新增；用 vue-cli 腳手架進行建立的專案都會有 vue.config.js 檔案），新增下面的程式碼在 vue.config.js 檔案下，加入以下程式碼
// 關閉eslint校驗
lintOnSave: false 

範例如下：

此方案只是編譯時不報錯，如果使用 VScode+eslint 會在檔案頭標紅提示，並且官方並不建議直接關閉校驗,因此在這裡並不推薦使用該方法進行解決；

設定 vue.config.js 檔案的方法（方案二）一般都不能解決問題，不建議大家使用

如果你發現並沒有解決問題，那麼不妨試試其他方案

方案三：設定 .eslintrc.js檔案（親測有效）

1、關閉命名規則
找到 .eslintrc.js 檔案在 rules 裡面加上這麼一句
// 關閉名稱校驗
'vue/multi-word-component-names': "off" 
建議使用這種方法，更加正確合理；

範例如下：

發現不報錯了，可以正常執行啦~~~

以上是關閉命名規則，將不會校驗元件名，官方建議設定是根據元件名進行忽略

2、忽略個別元件名

    // 新增元件命名忽略規則
 
    "vue/multi-word-component-names": ["error",{
       "ignores": ["Home","User"]  //在這個陣列中加入需要忽略的元件名
    }]

推薦使用方案三，極力推薦！！！

範例如下：

非常重要的注意點：（重啟專案，組態檔才生效）

在執行的專案中，修改組態檔，必須先將專案在終端兩次點選 Ctrl+C 將專案終止執行，再 npm run serve 重新執行專案，修改的組態檔才可以生效

這樣，就解決這個報錯啦~~~

總結

到此這篇關於vue eslint報錯error "Component name "*****" should always be multi-word"解決的文章就介紹到這了,更多相關vue eslint報錯error Component name內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

vue eslint報錯error "Component name "*****" should always be multi-word"解決

目錄

出現的問題：

報錯的原因：

解決方案：

方案一 ：重新命名(親測有效)

方案二 ：設定 vue.config.js 檔案（網上方法，本人使用無效）

方案三 ：設定 .eslintrc.js檔案（親測有效）

總結

熱門文章

方案一：重新命名(親測有效)

方案二：設定 vue.config.js 檔案（網上方法，本人使用無效）

方案三：設定 .eslintrc.js檔案（親測有效）