Rule proposal: `html-tag-spacing`

[michalsnik]

As pointed in #199 html-self-closing rule fix end tags, but doesn't care about proper spacing before end tags. It is an intended behaviour as one rule should do just one thing.

However currently we don't have a rule that would make it possible to check and fix wrong spacing in HTML tags.

I propose to add a similar rule to: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md

Possible settings:

{
  "closingSlash": "never | always",
  "beforeSelfClosing": "never | always",
  "afterOpening": "never | always",
  "beforeClosingOpening": "never | always"
}

Incorrect

<!-- closingSlash: "never" -->
<input/ >
<div>< /div>

<!-- beforeSelfClosing: "always" -->
<input/>

<!-- afterOpening: "never" -->
< input />

<!-- beforeClosingOpening: "never" -->
<div ></div>

Correct

<!-- closingSlash: "never" -->
<input/>
<div></div>

<!-- beforeSelfClosing: "always" -->
<input />

<!-- afterOpening: "never" -->
<input />

<!-- beforeClosingOpening: "never" -->
<div></div>

[mysticatea]

I think that afterOpening and closingSlash is not necessary.

• < div> is just a text rather than a tag. Here, <div is one token and HTML disallows a space at between the < and the div. The no-parsing-error rule reports it as invalid-first-character-of-tag-name` error.
• < /div> is same as above. </div is one token which cannot be separated.
• <input/ > is an opening tag and the / is ignored. The no-parsing-error rule reports it as unexpected-solidus-in-tag error.

Those are the reason that I wrote vue/space-before-tag-closing in #199 (comment).

[michalsnik]

Okay, so your proposition was to add vue/space-before-tag-closing rule with the following settings:

"vue/space-before-tag-closing": ["error", {
    "normal": {
        "afterTagName": "always"/"never",
        "afterAttributeName": "always"/"never",
        "afterEqual": "always"/"never",
        "afterAttributeValue": "always"/"never",
    },
    "selfClosing": {
        "afterTagName": "always"/"never",
        "afterAttributeName": "always"/"never",
        "afterEqual": "always"/"never",
        "afterAttributeValue": "always"/"never",
    }
}]

I think we could simplify this and keep two settings only.

• normal: always/never (default never)

<the-component></the-component>
<the-component foo></the-component>
<the-component foo="bar"></the-component>

• selfClosing: always/never (default always)

<the-component />
<the-component foo />
<the-component foo="bar" />

[mysticatea]

I'm OK with the simple version.
I thought that somebody wants to use <the-component/> and <the-component foo="bar" /> at that time.