Issue: It generates an extra closing bracket when formatting vue templates.

[maogongzi]

Tell us about your environment

• ESLint version: 5.12.1
• eslint-plugin-vue version: 5.1.0
• Node version: 8.11.3

Please show your full configuration:

{
  root: true,

  "parserOptions": {
    // 使用 babel 引擎解析 es6 语法
    "parser": "babel-eslint",
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": false,
      "modules": true
    }
  },

  env: {
    es6: true,
    node: true,
    browser: true
  },

  extends: [
    "eslint:recommended",
    "plugin:prettier/recommended",
    "plugin:vue/recommended"
  ],

  rules: {
    // TODO: 是否支持 mustache 左右空格？(试行：需要)

    // 必须使用全等于
    eqeqeq: "error",

    // 标签需要自闭合
    "vue/html-self-closing": ["error", {
      "html": {
        // 类似 img 使用 />
        "void": "always",
        // 常规html元素绝不自闭合，比如 <p> 不能写成 <p />
        "normal": "never",
        "component": "never"
      },
      "svg": "never",
      "math": "never"
    }],

    // props 使用驼峰
    'vue/attribute-hyphenation': [2, 'never', {
      // 例外： custom-prop: 自定义的非 props 属性, 例如 abc-def="777"
      'ignore': ['data-', 'aria-', 'slot-scope', 'custom-prop']
    }],

    // 组件 name 属性必须小写连字符形式
    "vue/name-property-casing": ["error", "kebab-case"]
  },

  // 添加例外规则
  overrides: [


    // nodejs 脚本，可以使用 console
    {
      files: [
        "arch/**/*.js",
        "apps/szrp/utils/**/*.js"
      ],
      rules: {
        "no-console": 0
      }
    },

    // mocha 单元测试脚本，全局变量
    {
      files: [
        "apps/szrp/test/**/*.spec.js"
      ],
      globals: {
        // 忽略 mocha 全局函数
        describe: true,
        before: true,
        after: true,
        beforeEach: true,
        afterEach: true,
        it: true
      }
    }
  ]
}

What did you do?

<template>
  <div :style="{width: '100%', height: `${trendsHeight}px`}"
    class="trends-diagram">
    <div :style="{width: '100%', height: `${trendsHeight}px`}"
      class="trends-diagram__stack">
    </div>
  </div>
</template>

What did you expect to happen?
It should not generate extra closing bracket in templates.

What actually happened?

<template>
  <div
    :style="{ width: '100%', height: `${trendsHeight}px` }"
    class="trends-diagram"
  >
    <div
      :style="{ width: '100%', height: `${trendsHeight}px` }"
      class="trends-diagram__stack"
    >
      >
    </div>
  </div>
</template>

As it's shows above, an extra > is generated right above the second closing </div> after running yarn eslint --ext .vue components/TrendsDiagram.vue --fix, I'm not pasting the <script> and <style> section here since they went out all ok to me.

[mysticatea]

Thank you for this issue.

I'm suspecting a bug of eslint-plugin-prettier, it can apply a part of fixes. Would you reproduce it in our online demo? https://mysticatea.github.io/vue-eslint-demo/

[oswaldofreitas]

see prettier/prettier#5377