Vue 3.x disable ESlint error All In One

<template>   <!-- <>react fragment</> -->   <!-- <template>vue fragment</template> -->   <template>     <div>{{store.msg}}</div>   </template>   <template>     <pre>xxx</pre>     <span v-pre>{{ this will not be compiled }}</span>   </template> </template>

The template element is used to declare fragments of HTML that can be cloned and inserted in the document by script.

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

disable solutions

Vetur 的验证模板，取消勾选 Validate vue-html in using eslint-plugin-vue

https://marketplace.visualstudio.com/items?itemName=octref.vetur

eslint config package.json

 /* ignore */ {     rules: {       vue/no-multiple-template-root: off     } }

.eslintrc.js

{   rules: {      vue/no-multiple-template-root: off   } }

https://eslint.vuejs.org/rules/no-multiple-template-root.html

vscode settings.json

{   vetur.validation.template: false,   vetur.validation.script: false,   vetur.validation.style: false, }

vetur.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'       ]     }   ] }