錯誤源起

以往用 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
  }
}

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

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

  extends: [
    'eslint:recommended',
  ]

1

2

發生錯誤。