Vue 3.x disable ESlint error All In One

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. eslintConfig package.json

/* ignore */
{
"eslintConfig": {
    "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

Configuring ESLint

.eslintrc
.eslintrc.js
.eslintrc.json

???

https://eslint.org/docs/user-guide/configuring/

4. vscode settings.json ✅

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

{
  "files.exclude": {
    "**/vendor/": true,
    // hiiden angular 1.x packages
    "**/.git": true,
    "**/.DS_Store": true,
    "**/jspm_packages": true,
    "**/node_modules": true,
    "**/.zip": true,
    "**/.sh": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true
  },
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/*/**": true
  },
  "editor.formatOnSave": false,
  "editor.formatOnPaste": false,
  "editor.renderWhitespace": "all",
  "editor.fontSize": 16,
  "editor.tabSize": 2,
  "editor.multiCursorModifier": "alt",
  "editor.wordWrap": "on",
  "editor.insertSpaces": true,
  "files.encoding": "utf8",
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
  "[typescript]": {
    "editor.formatOnSave": false,
    "editor.formatOnPaste": false
  },
  "[javascript]": {
    "editor.formatOnSave": false,
    "editor.formatOnPaste": false,
    "editor.renderWhitespace": "all",
    "editor.foldingStrategy": "indentation",
    // "editor.foldingStrategy": "auto"
    // "editor.getOutliningSpans": ""
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false,
    "editor.formatOnPaste": false,
    "editor.renderWhitespace": "all",
    "editor.foldingStrategy": "indentation"
  },
  "[markdown]": {
    "editor.formatOnSave": true,
    "editor.renderWhitespace": "all",
    "editor.acceptSuggestionOnEnter": "off"
  },
  "[html]": {
    "editor.formatOnSave": false,
    "editor.formatOnPaste": false,
    "editor.renderWhitespace": "all",
    "editor.acceptSuggestionOnEnter": "off"
  },
  "files.associations": {
    "*.jsx": "javascriptreact",
    "*.js": "javascriptreact"
  },
  "editor.snippetSuggestions": "top",
  // When enabled, typing /** triggers documentation automatically.
  "docthis.automaticForBlockComments": true,
  // When enabled, type information is added to comment tags.
  "docthis.includeTypes": true,
  // When enabled, memberOf information is added to comment tags on class members.
  "docthis.includeMemberOfOnClassMembers": true,
  // When enabled, memberOf information is added to comment tags on interface members.
  "docthis.includeMemberOfOnInterfaceMembers": true,
  // When enabled, JSDoc comments for functions and methods will include @description.
  "docthis.includeDescriptionTag": true,
  // When enabled, hungarian notation will be used as a type hint.
  "docthis.enableHungarianNotationEvaluation": true,
  // When enabled, will use names of params & methods as type hints.
  "docthis.inferTypesFromNames": true,
  // When enabled, will add the @author tag.
  "docthis.includeAuthorTag": true,
  // When docthis.includeAuthorTag is enabled, will add @author tag with this value.
  "docthis.authorName": "xgqfrms",
  // HTML & overwrite User settings.json
  "html.format.extraLiners": "",
  "html.format.enable": false,
  "html.format.contentUnformatted": "body, div, section, script, pre,code,textarea",
  "vetur.validation.template": 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, 禁止转载 🈲️，侵权必究⚠️！

---