Self-closing tags error

[alexsasharegan]

• Platform: Mac OS X El Capitan 10.11.6
• Vetur version: 0.8.2
• VSCode version: 1.13.1

Error: Self-Closing Tags

While self-closing tags are not valid for in-dom templates, the vue-loader that parses .vue files into render functions can handle self-closing tags in v2. See this comment in the vue issues: vuejs/vue#1036 (comment)

Expected

I think a nice aesthetic around this environment specific error is to make it a configuration option. Another option would be to ignore this error in .vue files.

[SharpSeeEr]

I am also getting the error on valid self closing tags like <img /> and <br />.

[octref]

We are incorporating https://github.com/vuejs/eslint-plugin-vue now and this comes from its rule:

https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-no-self-closing.md

So create a .eslintrc to disable it.
I'll add vetur.validation.template in the next version to disable html validation totally.

[alexsasharegan]

Took me a few tries to figure out how to write the rule, so for posterity, this worked for me:

{
    "plugins": [
        "vue"
    ],
    "rules": {
        "vue/html-no-self-closing": 0
    }
}

[alexsasharegan]

Hmm... on second thought, it does eventually trigger an error. Any tips @octref ?
I'm using the .json config variety if that's relevant.

[octref]

Yeah, but now you have fine-control over all the rules that eslint-plugin-vue@beta provides!

[alexsasharegan]

Maybe this is an issue between my local packages and my vscode extension deps?

[octref]

it does eventually trigger an error

So VSCode still shows an error?

[alexsasharegan]

Correct. It just took a while to parse through and highlight things. The local project has this dep: "eslint-plugin-vue": "^2.1.0",

[alexsasharegan]

Maybe I need to set up a global .eslintrc? I'm a little new to using linting, and I've only got it set up for this repo right now.

Update: I upgraded the local project to eslint-plugin-vue@beta, and reloaded the editor, but still getting highlighting. Anyone else get this running yet? @SharpSeeEr ?

Update: I've also tried adding a global .eslintrc.json via vscode settings:

{
    "eslint.options": {
        "configFile": "~/.eslintrc.json"
    }
}

[octref]

Currently we have the template checking on by default using eslint-plugin-vue > 3.0. But it's unconfigurable. I'll add an option to disable it.

Meanwhile with VSCode's ESLint plugin and dependency / eslintrc correctly setup, you should also be able to template linting and have fine control over the rules with .eslintrc.

[alexsasharegan]

Cool—the usual css-esque config cascade. Do you see anything wrong with what I'm doing then? I'm not entirely sure why I can't tap into the suite of vue lint rules.

[alexsasharegan]

Two possibly useful threads:

• html-no-self-closing: Ignore components option eslint-plugin-vue#31 (comment)
• Self closing elements break v-if rules eslint-plugin-vue#29

[alexsasharegan]

This is still not fixed for me.

[octref]

Because we haven't released the new change yet?

[alexsasharegan]

I'm not really sure. I've tried quite a few configurations, and tried to hunt down some info, but I'm running out of ideas.

[octref]

Upgrade to 0.8.3 and set "vetur.validation.template": false in VSCode setting.

[alexsasharegan]

Awesome! This works. 👍 I'm still confused why I can't get the vue eslint rule working.

[CalebKester]

Thanks for adding that template false. I'm with @alexsasharegan that I'd like to get the vue eslint rules working too but until I can customize them I'll just live with disabling all of them.

[octref]

You can customize them: https://octref.github.io/vetur/linting-error.html