Eslint-plugin-vue: Unrecognized <Col> tags

Created on 12 Oct 2018 · 8Comments · Source: vuejs/eslint-plugin-vue

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 (). (vue/html-self-closing)
[vue/no-parsing-error] Parsing error: x-invalid-end-tag.

Source

xxssww0258

Most helpful comment

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:

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

armano2 on 13 Oct 2018

👍2 👎1

All 8 comments

@xxssww0258 https://mysticatea.github.io/vue-eslint-demo

warning 7:17    Parsing error: x-invalid-end-tag. (vue/no-parsing-error)
warning 7:29    Parsing error: invalid-first-character-of-tag-name. (vue/no-parsing-error)
warning 7:63    Parsing error: x-invalid-end-tag. (vue/no-parsing-error)
warning 9:26    Parsing error: x-invalid-end-tag. (vue/no-parsing-error)

issue is with < and this html code is not valid you should consider using < if you want it to be printed as char

https://validator.w3.org/check

Line 6, Column 59: NET-enabling start-tag requires SHORTTAG YES
           <Col></Col>  // <= 被识别成了无内容的<col> 然后分别被fix成<Col/>和 </Col>

Line 8, Column 23: NET-enabling start-tag requires SHORTTAG YES
           // => <Col /> </Col>

For the current document, the validator interprets strings like <FOO /> according to legacy rules that break the expectations of most authors and thus cause confusing warnings and error messages from the validator. This interpretation is triggered by HTML 4 documents or other SGML-based HTML documents. To avoid the messages, simply remove the "/" character in such contexts. NB: If you expect <FOO /> to be interpreted as an XML-compatible "self-closing" tag, then you need to use XHTML or HTML5.

This warning and related errors may also be caused by an unquoted attribute value containing one or more "/". Example: <a href=http://w3c.org>W3C</a>. In such cases, the solution is to put quotation marks around the value.



md5-06619089ba028c878fac7ff89352564d



  <Col></Col>
  <col>
    <Col/>
  </Col>
  <Col />
</Col>

armano2 on 13 Oct 2018

From what i understand you want to comment some parts of code but // is not how you comment code in html/xhtml/mathml/xml/svg, if you want to comment something in template you have to use valid comment html syntax 

and make it something like this https://mysticatea.github.io/vue-eslint-demo

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

additionality i think you have one more issue there, <Form> is not correctly closed

armano2 on 13 Oct 2018

👍1

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

ref:

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

armano2 on 13 Oct 2018

👍2 👎1

@armano2 thank you for the explanation!

Yes, <col> is an HTML tag and it's a void element.
We recommend multi-word component names in our style guide (https://vuejs.org/v2/style-guide/index.html#Multi-word-component-names-essential) to avoid confliction with HTML tags.

Thank you.