[vue 3]vue/no-マルチテンプレート-rootエラー


テンプレート内のhtmlタグを使用してページを実装する場合、inputタグには常に赤い線が表示され、「vue/no-マルチテンプレート-root」に対応するエラーが表示されます.
  • https://stackoverflow.com/questions/64867504/vue-3-the-template-root-requires-exactly-one-element-eslint-plugin-vue
  • https://vuejs.github.io/vetur/guide/setup.html#advanced
    上のリンクで解決策が見つかりました.
  • package.jsonがワークスペースルートディレクトリにない場合、Vertのデフォルトはpackageです.jsonが見つからないのでvueバージョンは特定できません.
    この場合、Vertにパッケージします.jsonの位置を教えるには...

    [解決策]


    プロジェクトフォルダで否決します.config.jsファイルを生成すると、次のコードを加えると、エラー文が消えます.
    // vetur.config.js
    /** @type {import('vls').VeturConfig} */
    module.exports = {
      // **optional** default: `{}`
      // override vscode settings
      // Notice: It only affects the settings used by Vetur.
      settings: {
        "vetur.useWorkspaceDependencies": true,
        "vetur.experimental.templateInterpolationService": true
      },
      // **optional** default: `[{ root: './' }]`
      // support monorepos
      projects: [
        './packages/repo2', // Shorthand for specifying only the project root location
        {
          // **required**
          // Where is your project?
          // It is relative to `vetur.config.js`.
          root: './packages/repo1',
          // **optional** default: `'package.json'`
          // Where is `package.json` in the project?
          // We use it to determine the version of vue.
          // It is relative to root property.
          package: './package.json',
          // **optional**
          // Where is TypeScript config file in the project?
          // It is relative to root property.
          tsconfig: './tsconfig.json',
          // **optional** default: `'./.vscode/vetur/snippets'`
          // Where is vetur custom snippets folders?
          snippetFolder: './.vscode/vetur/snippets',
          // **optional** default: `[]`
          // Register globally Vue component glob.
          // If you set it, you can get completion by that components.
          // It is relative to root property.
          // Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
          globalComponents: [
            './src/components/**/*.vue'
          ]
        }
      ]
    }