Incorrect default values for html-self-closing rule (inverted for html.void and html.normal)

[BrandonYeager]

Tell us about your environment

• ESLint version: 5.16.0
• eslint-plugin-vue version: 5.2.2
• Node version: 12.4.0

Please show your full configuration:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  'extends': [
    'plugin:vue/recommended',
    'eslint:recommended',
  ],
  rules: {
    'vue/html-self-closing': 'error' // Or, inherited from plugin:vue/recommended
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};

What did you do?

vue-cli-service lint --no-fix

=============

<template>
  <div>
    <p></p>
    <br />
  </div>
</template>

What did you expect to happen?
No linting errors

What actually happened?

$ vue-cli-service lint --no-fix
error: Require self-closing on HTML elements (<p>) (vue/html-self-closing) at src\NoSales.vue:3:5:
  1 | <template>
  2 |   <div>
> 3 |     <p></p>
    |     ^
  4 |     <br />
  5 |   </div>
  6 | </template>


error: Disallow self-closing on HTML void elements (<br/>) (vue/html-self-closing) at src\NoSales.vue:4:5:
  2 |   <div>
  3 |     <p></p>
> 4 |     <br />
    |     ^
  5 |   </div>
  6 | </template>
  7 | 


2 errors found.
2 errors potentially fixable with the `--fix` option.

 ERROR  Error: Process exited with code 1

Error: Process exited with code 1
    at exports.exit (C:\Users\BrandonYeager\Development\Other\test-create-eslint-rules\node_modules\@vue\cli-shared-utils\lib\exit.js:7:11)
    at lint (C:\Users\BrandonYeager\Development\Other\test-create-eslint-rules\node_modules\@vue\cli-plugin-eslint\lint.js:122:5)
    at C:\Users\BrandonYeager\Development\Other\test-create-eslint-rules\node_modules\@vue\cli-plugin-eslint\index.js:84:24
    at Service.run (C:\Users\BrandonYeager\Development\Other\test-create-eslint-rules\node_modules\@vue\cli-service\lib\Service.js:221:12)
    at Object.<anonymous> (C:\Users\BrandonYeager\Development\Other\test-create-eslint-rules\node_modules\@vue\cli-service\bin\vue-cli-service.js:36:9)
    at Module._compile (internal/modules/cjs/loader.js:774:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:837:10)

Total task duration: 1.8s

[BrandonYeager]

The documentation for the defaults is also showing the "incorrect" defaults (https://eslint.vuejs.org/rules/html-self-closing.html#rule-details):

<template>
  <!-- ✓ GOOD -->
  <div/>
  <img>
  <MyComponent/>
  <svg><path d=""/></svg>

  <!-- ✗ BAD -->
  <div></div>
  <img/>
  <MyComponent></MyComponent>
  <svg><path d=""></path></svg>
</template>

The <div> and <img> lines should be switched between the <!-- ✓ GOOD --> and <!-- ✗ BAD --> examples.

[fobiasmog]

@mysticatea
Defaults of html.void and html.normal should be vise-versa ('always' and 'never' instead of 'never' and 'always')

And, i think, that html.component should be never or any by default, because by Vue docs (https://vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended) Components with no content should be self-closing in single-file components, string templates, and JSX - but never in DOM templates.
Custom components are very often meeting into DOM

temporary fix into eslint config:

rules: {
    "vue/html-self-closing": ["error", {
      "html": {
        "void": "always",
        "normal": "never",
        "component": "any"
      }
    }]
  }

[sebiniemann]

I wouldn't argue about where components are more likely to be found, but that eslint-plug-vue is currently not distinguishing the context (DOM, SFC, ..) when applying this rule.

And recommended eslint rules should never break stuff (this is at least good practice). Either removing this rule as being recommended, or setting component to any, would therefore be a good fix for this bug.

Might also help #876

Later one, handling this rule differently in each context could be added as a feature.

[ahsandev2019]

@mysticatea
Defaults of html.void and html.normal should be vise-versa ('always' and 'never' instead of 'never' and 'always')

And, i think, that html.component should be never or any by default, because by Vue docs (https://vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended) Components with no content should be self-closing in single-file components, string templates, and JSX - but never in DOM templates.
Custom components are very often meeting into DOM

temporary fix into eslint config:

rules: {
    "vue/html-self-closing": ["error", {
      "html": {
        "void": "always",
        "normal": "never",
        "component": "any"
      }
    }]
  }

thanks worked

[alebar42]

Old but still valid today 😅

[FloEdelmann]

Everyone can change the defaults in their own ESLint config 😉

https://vuejs.org/style-guide/rules-strongly-recommended.html#self-closing-components:

Components with no content should be self-closing in Single-File Components

I read this as "normal": "always", "component": "always", so at least this is a sensible default IMO. Additionally, I'd actually also prefer "void": "always" (see #2232 (comment)).