Formatting self closing slash incorrectly in .vue files

vscode: 1.29.1

vscode plugins

Prettier - Code formatter: 1.7.2 Eslint: 1.7.0

package.json

Prettier: 1.15.2 eslint-config-prettier: 3.3.0 eslint-plugin-prettier: 3.0.0 eslint: 5.9.0

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es6: true,
    jest: true,
    node: true
  },
  extends: ['plugin:vue/essential', 'standard', 'prettier'],
  globals: {},
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 2017,
    sourceType: 'module'
  },
  plugins: ['vue', 'standard', 'prettier'],
  root: true,
  rules: {
    'prettier/prettier': 'error'
  }
}

.prettierrc

{
  "bracketSpacing": true,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

Description

I’m setting up eslint, prettier and vscode for a vue js project. In visual studio code I have enabled format on save.

If I use vue js cli to create a starter project and edit and save .js files they are correctly formatted. When I save and lint .vue files they clash with respect to the spacing before a self closing tag.

For example if I have:

<template>
  <div class="VueToNuxtLogo">
    <div class="Triangle Triangle--two" />
    <div class="Triangle Triangle--one" />
    <div class="Triangle Triangle--three" />
    <div class="Triangle Triangle--four" />
  </div>
</template>

When I save the file it transforms the self closing tags to:

<div class="Triangle Triangle--two"/>

This causes eslint to highlight that there is an error that violates the prettier/prettier rule in my eslint.rc file.

If I run prettier from the command line it correctly formats the tag again as:

<div class="Triangle Triangle--two" />

I even edited my settings.json file with:

"eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ]

[jvik]

@Applicafroguy Not sure if you have the same problem as me, but Vetur in vscode was set to using incorrect formatter. Changing HTML formatter to prettier in vetur settings solved it for me.

[mutefiRe]

@Applicafroguy Not sure if you have the same problem as me, but Vetur in vscode was set to using incorrect formatter. Changing HTML formatter to prettier in vetur settings solved it for me.

that solved it for me, thank you 👍

Changed it to "vetur.format.defaultFormatter.html": "prettier" and "vetur.format.defaultFormatter.js": "prettier-eslint" According to their documentation, the default for html is prettyhtml and for js it is prettier, instead of prettier-eslint