I spent way too much time this weekend debugging Vue.js - Vetur - Prettyhtml - Prettier - Beautify - Eslint issues.
Here’s what I discovered:
By default, Vetur (The VS Code Vue.js Extension) uses Prettyhtml as the default html formatter. Which wraps Prettier and adds a bunch of formatting on top of it. Vetur uses Prettyhtml, which wraps Prettier. I chose ES Lint + Prettier when I created my project…given all that I went through to get this right, you might want to try to use the ESLint + Standard settings instead.
Here’s a video that I created to walk you through all of this:
Scroll down to the bottom of this post for the VS Code and ES Lint settings I ended up using.
Here are the issues with Prettyhtml, Prettier and VS Code.
- Prettyhtml removes all whitespace, even the whitespace you need, and there’s no way to disable it (from what I could find).
- Prettier always wraps attributes and there’s no way to disable it.
- Prettyhtml allows you to disable the wrap attributes, but removes all whitespace.
So, when open a .vue file in VS Code and Format Document with Vetur, it uses Prettyhtml by default, which violates prettier ES Lint rules.
When you open App.vue, you get this…notice the space after
router-view and the space after
Then you format the doc and get this:
As you can see, those spaces are removed after
This is bad for me. I need the first space for proper formatting and I prefer the whitespace before the self-closing bracket.
Then when you run
yarn serve you get this warning.
I searched for many hours and could not find a way to tell Prettyhtml to preserve those spaces. I could tell ES Lint to ignore those rules, but I want those spaces.
So, I had to abandon Prettyhtml.
I tried to go with Prettier directly using this VS Code setting:
(VS Code will tell you it is not a valid setting, but it actually runs Prettier)
But Prettier always wraps attributes and there’s no way to tell it to not do that.
For example, Prettier, will turn this:
Which, to me, is not desirable. I have a huge monitor and don’t want to wrap every single attribute.
From what I could find, there’s no way to tell Prettier to not wrap.
So, I had to abandon Prettier as well.
Here’s where I’m at at this point:
- Prettyhtml is out because it strips all whitespace - without a way to disable.
- Prettier is out because it always wraps attributes - without a way to disable it. Prettyhtml can disable the attribute wrap, but it removes all whitespace.
I decided that I want to continue to use Vetur (The VS Code Extension) and the the only remaining option is
js-beautify-html instead of Prettyhtml or Prettier.
I added this setting:
Did a format…and whitespace was retained in my .vue files, but attributes were still being wrapped, so I dug and found the
wrap_attributes settings and added this:
And that setting disables wrap_attributes.
So, I’m golden with Formatting…now onto ES Lint issues.
Then I run
yarn serve and get this:
The issue is that ES Lint is configured to use Prettier, which wants attributes on new lines.
I could have disabled that setting, but I’m now using es-beautifer, so I better switch to the ES Lint rules for that.
I found the ES Lint beautifier plugin here: https://github.com/dai-shi/es-beautifier#usage-eslint-plugin
And I installed it:
yarn add eslint eslint-plugin-es-beautifier
And then opened
.eslintrc.js and added that plugin:
And got this error:
It’s looking for a dangling comman, which I don’t want to add to my code, so I disable it with this:
yarn serve and get this:
It is checking for consistent linebreaks. At this point, I don’t really care, so I just disable that rule with this:
As I went about creating more sophisticated TypeScript, the default Prettier formatter didn’t work for me there either, so I swapped that out with this:
I now finally have .vue files being formatted correctly (at least the way I want them to be) and ES Lint passing successfully.
Now, time to get to the fun part. Actually coding the app.
I REALLY hope this post saves you some time.
Here are the files:
VS Code User Settings