Eslint-plugin-vue: x-invalid-end-tag with iviewui component

[edjayks]

Tell us about your environment
vue: 2.5.2
iview: 2.9.2

• ESLint Version:
  babel-eslint: 8.2.1
  eslint: 4.15.0

• eslint-plugin-vue Version:
  eslint-plugin-vue: 4.0.0

• Node Version:
  node: 8.9.4

Please show your full configuration:

vs code 1.20.1
Vetur plugin enabled 0.11.7
ESLint plugin enabled 1.4.7

What did you do? Please include the actual source code causing the issue.

What did you expect to happen?
No eslint error

What actually happened? Please include the actual, raw output from ESLint.
[vue/no-parsing-error] Parsing error: x-invalid-end-tag.

[michalsnik]

It looks like a problem in vue-eslint-parser - Reproduction

It works well if you use kebab-casing, but with UpperCamelCasing it not only has problems with invalid end tag, but results in error regarding root element being text instead of element/component. It's probably an AST related issue that causes these problems.

cc @mysticatea

[AnikaErceg]

The issue happens on native elements as well. Is there a way of removing this error without messing with eslint config?

[agriffis]

@AnikaErceg In the example you provided, I think the plugin is doing its job correctly. HTML <input> tag shouldn't be closed. So the easy way of removing the error is to remove </input>

[snowshoes]

Solution:

"vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]

see view issue

[mysticatea]

Hi. I apologize for the delay.

Indeed, this is a bug.
The <menuitem> element was a void element before, but it was removed in https://github.com/whatwg/html/pull/907.
The vue-eslint-parser has to follow the spec change.

[mysticatea]

I'm surprised that a certain commit can close the issue in other repositories.

[yzStrive]

@snowshoes
set follow configuration in .eslintrc.js rules

"vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]

can't work
relevant version:

"eslint": "^5.4.0",
"eslint-plugin-vue": "^5.0.0-beta.3",

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/strongly-recommended', '@vue/prettier'],
  plugins: ['vue', 'prettier'],
  rules: {
    'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'prettier/prettier': 'error',
    semi: ['error', 'never']
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

i need anything else to configure?

[yzStrive]

[yzStrive]

https://github.com/iview/iview/issues/2828#issuecomment-369109160 can work