标签：vue optional disable json Vue ESlint template root vetur

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, 禁止转载

标签：vue,optional,disable,json,Vue,ESlint,template,root,vetur
来源： https://www.cnblogs.com/xgqfrms/p/16168183.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。