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

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

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

2. eslint config package.json

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

3. .eslintrc.js

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

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

4. vscode settings.json

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

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

refs

https://stackoverflow.com/questions/64867504/vue-3-the-template-root-requires-exactly-one-element-eslint-plugin-vue

https://github.com/vuejs/vetur/issues/2299#issuecomment-696015374

https://vuejs.github.io/vetur/guide/setup.html#advanced

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载