Skip to content

vue/html-self-closing rule check incorrect on tag <span> and <i> #329

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
maple-leaf opened this issue Jan 6, 2018 · 4 comments
Closed

vue/html-self-closing rule check incorrect on tag <span> and <i> #329

maple-leaf opened this issue Jan 6, 2018 · 4 comments
Labels
question

Comments

@maple-leaf
Copy link

Tell us about your environment

  • ESLint Version: 4.14.0
  • eslint-plugin-vue Version: 4.0.1
  • Node Version: 8.9.0

Please show your full configuration:

module.exports = {
    root: true,
    parser: "vue-eslint-parser",
    parserOptions: {
        "parser": "babel-eslint",
        "ecmaVersion": 2017,
        "sourceType": "module"
    },
    env: {
        browser: true,
    },
    extends: [
        'airbnb-base',
        "plugin:vue/recommended"
    ],
    // check if imports actually resolve
    'settings': {
        'import/resolver': {
            'webpack': {
                'config': 'build/webpack.base.conf.js'
            }
        }
    },
};

What did you do? Please include the actual source code causing the issue.

<template>
    <div>
        <span></span>
        <i></i>
    </div>
</template>

What did you expect to happen?

The template should be valid

What actually happened? Please include the actual, raw output from ESLint.

  • vue/html-self-closing: Require self-closing on HTML elements ().
  • vue/html-self-closing: Require self-closing on HTML elements ().

According to w3 validator, tag and are not void element, and should not be self-closing.

Source for w3 validator

<!doctype html>
<html>
<head><title>is span/i void</title></head>
<body>
<span/>
<i/>
</body>
</html>

image
@mysticatea
Copy link
Member

Thank you for this issue.

Vue.js template has some differences to HTML spec. Supporting of self-closing tags is one of them (related to #29).
If you don't want to use self-closing in well-known HTML tags, you can use the html.normal's "never" option: https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-self-closing.md#rule-details

@maple-leaf
Copy link
Author

ok. Got it. Thanks ;)

@revolter
Copy link

I don't know why people very accustomed to something don't give out a full solution for newcomers, even though it would be very easy for them, but here it is:

.eslintrc.js:

module.exports = {
  // ...
  rules: {
    "vue/html-self-closing": [
      "error", {
        "html": {
          "normal": "never"
        }
      }
    ]
  }
}

@ilyaDegtyarenko
Copy link

Add rule to eslint config

"vue/html-self-closing": "off"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@mysticatea @maple-leaf @revolter @ilyaDegtyarenko