Eslint-plugin-vue: conflict with vetur prettyhtml

[francoisromain]

Tell us about your environment

• ESLint version: 5.9.0
• eslint-plugin-vue version: 5.0.0
• Node version: 11.3.0

Please show your full configuration:

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/recommended",
      "standard",
      "prettier",
      "prettier/standard"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
}

What did you expect to happen?
The problem is:

• Prettyhtml does not put space before />:
• eslint-plugin-vue wants a space before /> and actually have a autofix for it
• They cannot agree on a format.

please see this issue: https://github.com/vuejs/vetur/issues/994#issuecomment-442745593

thank you

[ota-meshi]

Thank you for this issue.
It seems to put space in the playground of prettier.
What does the prettier version use?
(I tried the playground as version 1.15.3.)

You can also use eslint-config-prettier.

{
  "extends": [
    "prettier/vue"
  ]
}

[RiFi2k]

I decided to share my fully working configs which took me months of trial and error, these are the base of a few live sites which get worked on by multiple people on multiple environments daily.
https://github.com/RiFi2k/vscode-vue-vetur-eslint-prettier-airbnb

The problem is if you don't set it up just perfectly multiple extensions and configs are fighting with each other.

[ota-meshi]

I got confused with Prettyhtml andprettier.

If you want to use eslint's autofix, I think you need to change the following settings to settings.json.

"editor.formatOnSave": false,
"eslint.autoFixOnSave": true,

If you want to use Prettyhtml you need to add the following settings to .eslintrc.

    "rules": {
        "prettier/prettier": "off",
        "vue/html-closing-bracket-spacing": [
            "error",
            {
                "selfClosingTag": "never"
            }
        ]
    }

[francoisromain]

@ota-meshi I tried to follow your intructions above. Then it removed white space before /> and printed warnings: warning: Expected a space before '/>', but not found (vue/html-closing-bracket-spacing) at src/components/my-compononet.vue

[RiFi2k]

Do you have both these rules in your settings.json for vscode

  "prettier.disableLanguages": [
    "vue"
  ],
  "vetur.validation.template": false,

[francoisromain]

Here is my full config:

Vs Code settings:

{
  "editor.formatOnPaste": true,
  "editor.formatOnType": false,
  "editor.formatOnSave": true,
  "prettier.eslintIntegration": true,
  "eslint.autoFixOnSave": true,
  "eslint.enable": true,
  "eslint.validate": [
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "vue-html",
      "autoFix": true
    }
  ]
}

package.json:

"eslintConfig": {
    "root": true,
    "env": {
      "node": true,
      "jest": true
    },
    "extends": [
      "plugin:vue/recommended",
      "standard",
      "prettier",
      "prettier/standard"
    ],
    "rules": {
      "no-console": 0
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "prettier": {
    "semi": false,
    "singleQuote": true,
    "arrowParens": "avoid",
    "proseWrap": "never",
    "bracketSpacing": true
  }

The problem is:

• Prettyhtml does not put space before />
• eslint-plugin-vue wants a space before /> and actually have a autofix for it
• They cannot agree on a format.

to make it work I have to prevent vetur's prettyHtml by adding this line to vscode settings: "vetur.format.defaultFormatter.html": "none" as explained here: https://github.com/vuejs/vetur/issues/994#issuecomment-442742315

Is there a way to keep the same config with prettyHtml working?
thank you

[RiFi2k]

@francoisromain I think your issue might be here.

    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "vue-html",
      "autoFix": true
    }

Lose the vue-html

Also ESLint eslint-plugin-vue does a much better job formatting the HTML in vue files than prettyhtml, with no conficts.

The repo in my account has a full config working 100% today with all the latest updates if you wanna take a look.

[francoisromain]

@RiFi2k thank you. If I remove vue-html then eslint doesn't fix it anymore and it makes errors. I checked your config, but I prefer to use standardjs than aribnb.

[michalsnik]

I guess the issue is solved now. It's all about configuration and it's something not too easy to get all tools setup properly. I would love to see prettier having option to ignore Vue templates though. Just like you @RiFi2k I prefer how this plugin formats HTML rather than what Prettier does with it.

If I missed something in this discussion that should be addressed by us, please feel free to reopen :)

[jongio]

@francoisromain - I spent a ton of time researching why this is happening. It turns out that Prettyhtml removes all whitespace and doesn't have a way to turn it off.

Prettier always wraps attributes and doesn't have a way to turn that off.

I ended up going with js-beautify-html for now. I would like to use Prettyhtml, but I need that whitespace sometimes.

I blogged and created a video on my experience trying to get everything to play nice together:
https://blog.jongallant.com/2019/02/vuejs-vetur-vscode-format-eslint-issues/

https://youtu.be/z3u6LYRKHWE

[Bulletninja]

Thank you for this issue.
It seems to put space in the playground of prettier.
What does the prettier version use?
(I tried the playground as version 1.15.3.)

You can also use eslint-config-prettier.

{
  "extends": [
    "prettier/vue"
  ]
}

This worked for me: I installed eslint-config-prettier, and then added 1 entry to extends (in the .eslintrc.js file): 'prettier/vue'. And it stopped complaining.