【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](https://v3-migration.vuejs.org/new/fragments.html#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](https://github.com/vuejs/vetur/issues/2299)

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

実際、この時の私のVSCodeワークスペースは下記な感じでした。
```
app
├── project01
│   ├── .eslintrc.js
│   ├── src
│   │   └── App.vue
│   └── ...
├── project02
│   └── ...
├── project03
└── project04
```

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

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

上述のイシューにも記載されている方法です。
[【Vetur公式リファレンス】Linting / Error Checking](https://vuejs.github.io/vetur/guide/linting-error.html#linting) からも、「プロジェクトの`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に移行した！](https://qiita.com/the_red/items/028567f73ae26527ce29)
- [【ics.media】2022年の最新標準！Vue 3の新しい開発体験に触れよう](https://ics.media/entry/220120/)
- [【Zenn】Vue3 + TypeScript + Tailwindの環境構築](https://zenn.dev/ymgn____/articles/e7709e88948446)

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

1. まず、現在有効となっている`Vetur`を無効化して、VSCodeを再読み込みしておいてください。
2. 次に、VSCodeに`Volar`をインストールしてください。
   - [【Github】johnsoncodehk/volar](https://github.com/johnsoncodehk/volar)
3. VSCodeの`settings.json`に、下記を追記してください。
```settings.json
{
  "//": "volar による *.vue に対する型チェックを強化する。",
  "volar.takeOverMode.enabled": true
}
```

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