html-no-self-closing: Ignore components option

[Akryum]

I think it is pretty common in Vue templates (for example inside .vue files, not in HTML page) to write self-closing component, for example: <ui-dropdown :options="options" />. It also don't cause any potential issue since the component will be rendered in HTML even before being put in the DOM thanks to the template compiler.

It would be nice if the recommended config had an option set to the html-no-self-closing rule to ignore non-HTML tags.

This should then be reported:

<div />
<ui-dropdown />

This shouldn't be reported:

<div></div>
<ui-dropdown />

[mysticatea]

Thank you for this issue.

Sounds good to me.

Note: in beta, eslint-plugin-vue cannot handle self-closing as correct for Vue.js because it's pretty different to HTML. See also #29.

[michalsnik]

@mysticatea are we good to fix this now with the new parser?

[mysticatea]

Yes, we can go ahead.

As my comment before, I think a rule which has the option like below:

{
    "vue/html-self-closing": ["error", {
        "html": {
            "normal": "never",      // HTML elements. E.g. <div></div>
            "void": "never",        // HTML void elements. E.g. <img>
            "components": "always", // Vue.js components.
        },
        "svg": "always",
        "math": "always",
    }]
}

• "always" ... Elements which don't have their content should be self-closing always.
  GOOD: <div/>
  BAD: <div></div>
• "never" ... Elements should not be self-closing.
  GOOD: <div></div>
  BAD: <div/>
• "any" ... no check.

[armano2]

schema for this options

[
  {
    type: 'object',
    properties: {
      html: {
        type: 'object',
        properties: {
          normal: { // HTML elements. E.g. <div></div>
            enum: ['always', 'never', 'any'] // never
          },
          void: { // HTML void elements. E.g. <img>
            enum: ['always', 'never', 'any'] // never
          },
          components: { // Vue.js components.
            enum: ['always', 'never', 'any'] // always
          }
        },
        additionalProperties: false
      },
      svg: {
        enum: ['always', 'never', 'any'] // always
      },
      math: {
        enum: ['always', 'never', 'any'] // always
      }
    },
    additionalProperties: false
  }
]

[armano2]

@mysticatea are you planing to work on this or should i do that?

i seen: vuejs/vue-eslint-parser@50814b3 - this is going to simplified this rule a lot 👍

[mysticatea]

@armano2 Yeah, I'm working on this. I'm sorry that I didn't commented.

[molerat619]

I generally like <div></div> over </div> so I would like to use the rule accordingly. How can I turn that check off for certain tags like <img .../>, <br /> or <input ... />?