【vue.js】VSCodeで vue/no-multiple-template-root エラーの原因と対策

tl;dr

vscode 拡張機能の Vetur が邪魔してるので Lint 機能だけオフにしてあげればいい
or
Vetur をクビにして Volar を入れる

対象者

• vue.js 利用者(特に vue.js 3)
• VSCode 利用者
• VSCodeに拡張機能 vetur 入れてる人
• プロジェクトにESLint設定してるのに上手く動かない人

現象

vue.js 3 プロジェクト で下記のエラー発生。

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Welcome to Your Vue.js App" />
</template>
...

<HelloWorld>に対して、下記エラー発生

[vue/no-multiple-template-root]
The template root requires exactly one element.eslint-plugin-vue

「テンプレート直下に複数のルートノード入れんなや」って怒られてる。
たしかに Vue 2 では禁止事項だったけど、Vue 3 からは許されてるはず。

• 参考: 【Vue 3 Miglation Guide】fragments#overview

下記はエラー発生時の.eslintrc.js。
勿論Vue 3仕様で設定してる。(つもり)

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    // `eslint-plugin-vue v7.0.0` からは `vue/no-multiple-template-root` じゃなくて`vue/valid-template-root` っていう
    // 「templateは複数ルート要素持ってもいいよ」なルールに変わってる。
    // https://qiita.com/ota-meshi/items/ff0d70ef326657249727
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    parser: "@babel/eslint-parser",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    'vue/no-multiple-template-root': 'off'    // これでこの余計なチェック機能をおっふに出来る筈なのに、エラーは解消されず。
  }
};

原因

vetur のイシューに挙がってました。

• Throws error about multiple root elements in template. (Vue 3 + TypeScript) #2299

VSCodeのワークスペース内に複数のプロジェクトが存在すると発生する 事象とのこと。
この辺はまだ vetur がサポートし切れていない様です。

実際、この時の私のVSCodeワークスペースは下記な感じでした。

app
├── project01
│   ├── .eslintrc.js
│   ├── src
│   │   └── App.vue
│   └── ...
├── project02
│   └── ...
├── project03
└── project04

これを project01 を指定してワークスペース開いてみると、今回のエラーは(一応)解消されました。
とはいえ、ワークスペースには複数プロジェクト展開したい時もあると思います。
...ありますよね？

対策1: Vetur のLint機能をオフにする

上述のイシューにも記載されている方法です。
【Vetur公式リファレンス】Linting / Error Checking からも、「プロジェクトのESLintの機能を有効にしたい際の正式なやり方」であることも確認出来ます。

VSCodeのconfigファイルに下記を記載しましょう。

settings.json

{
  "//": "VeturによるLint機能をおっふ",
  "vetur.validation.template": false
}

これで Vetur のLint機能をオフにして、プロジェクトのESLint設定を反映させることが出来ます。

対策2: Vetur をクビにして Volar を導入する。

基本的に、VeturのVue 3へのサポート状況は結構微妙っぽいです。
色々調べてると、「Vue 3使うんだったらVolarやろ！！」って意見が散見されました。

• 【Qiita】Veturでは.vueのRename Symbolができないので、Volarに移行した！
• 【ics.media】2022年の最新標準！Vue 3の新しい開発体験に触れよう
• 【Zenn】Vue3 + TypeScript + Tailwindの環境構築

手順は簡単です。多分言うまでも無いことばかりなので、画像とかは面倒なので載せません。

1. まず、現在有効となっているVeturを無効化して、VSCodeを再読み込みしておいてください。
2. 次に、VSCodeにVolarをインストールしてください。
   • 【Github】johnsoncodehk/volar
3. VSCodeのsettings.jsonに、下記を追記してください。

settings.json

{
  "//": "volar による *.vue に対する型チェックを強化する。",
  "volar.takeOverMode.enabled": true
}

以上です。
これでエラーが消えてるかと思います。