Vue

2022.05.24

解決用 Vue3 開發時,eslint 出現 no-multiple-template-root 的錯誤


錯誤源起

以往用 Vue-cli 或 Nuxt.js 開發專案時,eslint 會直接包在設定檔中,不用另外處理。不過今天練習用 Vite + Vue3 開發新專案,所以要另外設定 eslint。

設定後才剛開始要寫程式,就出現了 no-multiple-template-root 的錯誤

原因是在 Vue2 裡,template 裡面不允許多行元素,所以要先包一個 <div>,再把所有元素寫在 <div> 裡面。但 Vue3 不需要多包一層 <div> 了,但檢測的規則還是舊版的,所以就報錯了。

隱藏舊版規則

原本搜尋的一些解法,都是說要把在 vscode 安裝的 vetur 的某些設定關閉,但我沒有安裝 vetur XDD,所以只好從 eslint 本身下手。

我是直接從 .eslintrc.js 新增 rules 的設定:

module.exports = {
  rules: {
    'vue/no-multiple-template-root': 0
  }
}
Line 2 ~ 4: 新增 rules 設定,不要執行該規則

存檔後再回頭看 vue,就會發現報錯消失了。

如果報錯還是存在,可以試著在 .eslintrc.js 加入這行設定:

  extends: [
    'eslint:recommended',
  ]

歡迎給我點鼓勵,讓我知道你來過 :)

1
guest
0 則留言
Inline Feedbacks
View all comments
Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.