typescript - Vue 3 Malrot krever nøyaktig ett element. eslint-plugin-vue

Etter å ha satt opp et Vue 3-prosjekt, la jeg merke til en feil i App.vue.

A functional component that renders the matched component for the given path. Components rendered in can also contain its own , which will render components for nested paths.

API Reference

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

Jeg prøvde å sette

"vue/no-multiple-template-root": 0

i min .eslintrc.js

Men feilen forblir. Hvordan kan jeg bli kvitt feilen? Siden i Vue 3 trenger du ikke å ha nøyaktig ett element i en mal.

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended",
        "@vue/prettier",
        "@vue/prettier/@typescript-eslint"
    ],
    parserOptions: {
        ecmaVersion: 2020
    },
    rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
        "vue/no-multiple-template-root": 0
    }
};

Svar #1

Jeg endte opp med å slå av Vetur-linting. Vetur tror at det er et Vue 2-prosjekt fordi det er i et VS Code-arbeidsområde.

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

Du kan løse dette ved å gjøre

F1>Preferences:Open Settings (JSON)

lim

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

Svar #2

Feilen oppstod hos meg, fordi jeg ikke hadde åpnet prosjektsroten i VS Code, men overordnet mappe, og Vetur så dermed etter package.json der.

Svar #3

Hvis du jobber på et monorepo og derfor ikke har package.json i arbeidsområdetets rot, vil Vetur som standard ikke kunne finne package.json, og dermed kunne den ikke finne ut hvilken Vue-versjon som brukes.

I så fall må vi fortelle Vetur plasseringen av package.json

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

Svar #4

Her jobbet jeg med dette:

i .eslintrc.js

i stedet for:

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

prøv :

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

Svar #5

Deaktiver Vetur og bruk Volar i stedet. Det er nå den offisielle anbefalingen for Vue 3-prosjekter.

Fra den offisielle migrasjonsguiden: