vetur: Parsing error: x-invalid-end-tag

Info

  • Platform: macOS 10.13.2
  • Vetur version: 0.11.5
  • VS Code version: 1.19.0

Problem

[eslint-plugin-vue]
[vue/no-parsing-error]
Parsing error: x-invalid-end-tag

Reproducible Case

I used iview

<template>
    <div>
        <Form>
            <FormItem>
                <Input type="text" v-model="value">
                </Input>
            </FormItem>
        </Form>
    </div>
</template>

worked fine in 0.11.3

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 18 (4 by maintainers)

Most upvoted comments

@suconghou We recommend vscode-eslint plugin.

https://github.com/vuejs/vetur/blob/master/docs/linting-error.md#linting-for-template

Turn off Vetur’s template validation with vetur.validation.template: false

yarn add -D eslint eslint-plugin-vue@next

Set ESLint rules in .eslintrc.

Install ESLint plugin, add vue to eslint.validate in VS Code config

Actually it is a feature of eslint-plugin-vue.

https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-parsing-error.md#wrench-options

Note the option x-invalid-end-tag. Input is a reserved name for void elemnt in html spec.

Please use another name or turn off vetur’s template warning.

Try this:

// .eslintrc.js
module.exports = {
//...
 rules: {
    'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }]
  }
}

Then you need to run your project again.

Info

Platform: macOS 10.13.4 Vetur version: 0.12.4 VS Code version: 1.23.1

alt

@HerringtonDarkholme The same problem in here. Maybe we can switch off the vetur.validation.template: false, but I think it is not good idea. Can we fix this one?

I’m under the same error, anyone knows how to fix this? is getting really annoying! How can I disable this? I’m creating Row and Col from iViewUI and is giving me that error on the enclosing </Col>

EDIT: Seems that it can be fixed by using <i-col> </i-col> for some ui elements, you need to add the prefix i-

Info

Platform: macOS 10.13.4 Vetur version: 0.12.4 VS Code version: 1.23.1

alt

@HerringtonDarkholme The same problem in here. Maybe we can switch off the vetur.validation.template: false, but I think it is not good idea. Can we fix this one?

MenuItem -> menu-item

Just adding my me too:

This triggers the lint error

<template>
    <p>
      <h1>
        Items
      </h1>
    </p>
</template>

Switching h1 for strong makes it go away

<template>
  <section class="container">
    <p>
      <strong>
        Items
      </strong>
    </p>
</template>

I’m seeing the parsing error as well. Using iview tag as well. Started after the recent upgrade to Visual Studio code 1.19.0 I think.

Vetur: 0.11.5 VS Code: 1.19.0 Ubuntu platform

[eslint-plugin-vue]
[vue/no-parsing-error]
Parsing error: x-invalid-end-tag.

screenshot from 2017-12-16 16-40-13

i have the same question, need your help, wu wu wu~~~

Just adding my me too:

This triggers the lint error

<template>
    <p>
      <h1>
        Items
      </h1>
    </p>
</template>

Switching h1 for strong makes it go away

<template>
  <section class="container">
    <p>
      <strong>
        Items
      </strong>
    </p>
</template>

Just had the same issue. I thought about it for a bit and realized that maybe it doesn’t make sense to put h1,h2,… inside a p tag.