Unrecognized <Col> tags

Tell us about your environment

• ESLint Version:^4.19.1
• eslint-plugin-vue Version:^4.7.1
• Node Version:v9.4.0

Please show your full configuration:

// eslintrc.js
module.exports = {
  "root": true,
  "env": {
    "browser": true,
    "es6": true,
    "commonjs": true,
    "node": true,
  },
  "parserOptions": {
    "parser": 'babel-eslint'
  },
  "extends": [
    "plugin:vue/recommended",
    "eslint:recommended",
    "standard"
  ],
  "plugins": [
    "vue",
  ],
  "rules": {
    "no-console": 0,
    "indent": [1, 4, {
      "SwitchCase": 1
    }],
    "key-spacing": [1, {
      "align": {}
    }],
    "max-len": [1, {
      "code": 200,
    }],
    "newline-per-chained-call": [1, {
      "ignoreChainWithDepth": 3
    }],
    "operator-linebreak": [1, "before"],
    "require-jsdoc": [1, { 
      "require": {
        "FunctionDeclaration": true,
        "MethodDefinition": true,
        "ClassDeclaration": true,
        "ArrowFunctionExpression": true,
        "FunctionExpression": false
      }
    }],
    "vue/html-self-closing": [1, {
      "html": { 
        "void": "always",
        "normal": "always",
        "component": "always"
      },
      "svg": "always",
      "math": "always"
    }],
    "vue/html-indent": [1, 4, {
      "attribute": 1,
      "closeBracket": 0,
      "alignAttributesVertically": true,
      "ignores": []
    }],
    "vue/max-attributes-per-line": [1, {
      "singleline": 7,
      "multiline": {
        "max": 7,
        "allowFirstLine": false
      }
    }],
    "vue/order-in-components":0,
    "vue/attributes-order":0,
  }
};

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

<template>
  <section>
    <div>
      <Form>
        <Row>
           //  ----- fix before -----
           <Col></Col>  // <= 被识别成了无内容的<col> 然后分别被fix成<Col/>和 </Col>
          // -------fix after ------
           // => <Col /> </Col> 
        </Row>
      <Form>
    </div>
  </section>
</template>

What did you expect to happen?

Normal typesetting What actually happened? Please include the actual, raw output from ESLint. [eslint] Require self-closing on HTML void elements (<Col>). (vue/html-self-closing) [vue/no-parsing-error] Parsing error: x-invalid-end-tag.

[Justineo]

Unfortunately it is the naming convention for a very popular component library - iView. Its users may come across such issue over and over again. 😅

[armano2]

For last issue I checked why col is not valid, because it’s void element in html5, this plugin is using list defined in https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/void-elements.json

The col element is a void element. A col element must have a start tag but must not have an end tag.

ref:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
• http://w3c.github.io/html-reference/col.html

You have to change name of component if you want to use it in this way