Prettier-vscode: Formatting self closing slash incorrectly in .vue files

[ztolley]

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
    }
  ]

[busheezy]

I'm having an issue with this as well. I'm kinda losing my mind right now trying to sort it out. Everything was working before but somewhere along the way it died.

[ffxsam]

Prettier seems to completely disregard .eslintrc.js. As an example, I have vue/max-attributes-per-line set to enforce multiple lines for more than one attribute. When I format with Prettier, it collapses into a single line.

[mutefiRe]

same problem here, .eslintrc is being ignored.

[shijunti19]

For this reason, I can't work anymore.

[KerimG]

In my case, prettier completely removes the closing slash.

[rdunk]

Same as @ztolley here, formatting via command line fixes all warnings, but saving with VSCode reintroduces incorrect formatting.

[jvik]

Same problem

[Applicafroguy]

In my case, prettier completely removes the closing slash.

Same problem, this is annoying

[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 :+1:

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

[Eckhardt-D]

@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.

Thank you very much!

[ntotten]

Looks like this is resolved.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.