Eslint-plugin-vue: Issue: Line break before closing bracket, but no line breaks found

[Lord-Y]

Tell us about your environment

• ESLint Version: v5.8.0
• eslint-plugin-vue Version: 4.7.1
• Node Version: 4.7.1

Please show your full configuration:

module.exports = {
    parserOptions: {
        sourceType: "module",
        "ecmaVersion": 2017,
        "parser": "babel-eslint"
    },
    "extends": "plugin:vue/strongly-recommended",
    plugins: [
        "vue"
    ],
    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 class="form-group row">
    <label
      :for="'userId'+id"
      class="col-sm-2 col-form-label">{{ $t('form.label') | translate }}</label>
  </div>
</template>

What did you expect to happen?

I expected to format my code but no matter what I do, it's not working.

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

5:38  error  Expected 1 line break before closing bracket, but no line breaks found  vue/html-closing-bracket-newline

[ota-meshi]

Thank you for this issue.

vue/html-closing-bracket-newline is categorized to Uncategorized in the version 4.7.1 you are using.
I think that it is necessary to add the setting of vue/html-closing-bracket-newline with eslintrc.

  "rules": {
    "vue/html-closing-bracket-newline": "error"
  }

https://github.com/vuejs/eslint-plugin-vue/tree/v4.7.1#uncategorized

[Lord-Y]

@ota-meshi I tried it but and I still have theissue. I don't get why this error only happen on label tag and not others html tags. For now I disabled this rule.

[ota-meshi]

Could you tell me the arguments of your eslint command, and all of your configuration?

[michalsnik]

Hey @Lord-Y! I'm not sure I get it right. But it seems to be reporting the problem as expected. If the element is multiline, this rule expects new line before closing bracket, so your component should look like this:

<template>
  <div class="form-group row">
    <label
      :for="'userId'+id"
      class="col-sm-2 col-form-label"
    >
      {{ $t('form.label') | translate }}
    </label>
  </div>
</template>

Feel free to reopen this issue after providing more information that we can work upon.
What does I expected to format my code mean in your case? Did you expect your editor to automatically format the code for you or something else?