conflict with vetur prettyhtml

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 />: <HelloWorld msg="Welcome to Your Vue.js App"/>
• 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]

I got confused with Prettyhtml and prettier.

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

[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