VSCode prettier/vue formatting settings don't work properly

Question

I have read about 10-15 other answers now and none of the solutions (which are all the same minus 3 or 4) have worked for me. I am using Prettier and Vetur and I have the ESLint extension in VSCode installed as well. I have looked over the settings at least 10 times in the past 3 days trying to touch everything, close/open VSC and save to format, check if the problem persists, and continue doing this with each setting one-by-one trying to eliminate the suspects. I am here as a last resort out of desperation to be able to save my components without breaking my html tags and separating code into illegible BS.

My expected code formatting looks like this:

<button
    class="btn btn-success"
    @click="sellStock"
    :disabled="insufficientFunds || quantity <= 0 || !Number.isInteger(quantity)"
>{{ insufficientQuantity ? "Not enough Stocks" : "Sell" }}</button>

and my formatter is causing the " at the end of the line after "...isInteger(quantity)" to be line-broken which breaks my entire component's syntax/major linter errors appear (obviously).

<button
    class="btn btn-success"
    @click="sellStock"
    :disabled="
         insufficientFunds || quantity <= 0 || !Number.isInteger(quantity)
       "
    >
       {{ insufficientQuantity ? "Not enough Stocks" : "Sell" }}
    </button>

As you can see, even the line breaks are uneven and make ZERO sense formatter-wise...I've never seen it do this before. This is next-level annoying Vue/Vetur/Prettier/VScode formatting bugs now and I'm quite stumped as to why it's suddenly acting up this week.

I have tried changing word-wrap-length and prettier lengths and indentations, font size and appearance of the mini map...nothing seems to make this madness stop, not even turning of html formatting period. It also formats some of my other ".vue" components into multiple lines when I don't want it to, but it isn't breaking the syntax/html tags as it is here. I have made the word-wrap/line-length 200+ everywhere that it's listed as a settings and it continues to break my code.

Any ideas?

Answer 1

Only advice I can give is stop using Prettier. Trying to make it work with ESlint and Vetur was always pain. Then I found this question (and self answer) here on SO which recommends dropping Prettier and using ESlint not just for linting but also for formatting (needs version >= 6). I'm happy as clam now...

Answer 2

I've been struggling with a similar problem with VSCode's formatting. I also have Prettier, ESLint and Vetur extensions installed. But my code formatting rules were somehow different from my co-worker's (they are using WebStorm by the way).

In my case, the problem was solved by:

1. Turning off all the Vetur formatters and disabling all formatting capabilities of Vetur.
2. Enabled ESLint as the formatter.

This seems to have allowed the Prettier extension to look at .eslintrc.js, which the Prettier plugin is setup.

I suggest that you look in on the Prettier extension logs to debug your problem.

On the bottom right corner of VSCode's window, you will see the Prettier extension indicator. Click on this and you can see the logs.

Once the logs are shown, you can see where the extension is getting the Prettier configs from, or where the Prettier module is being imported from.

Answer 3

What helped me with this situation, I went into Vetur's extension settings inside VSCode Vetur > Format > Default Formatter: HTML and selected js-beautify-html.

Answer 4

I just had this problem and resolved it.

The issue I had was that my html in the .vue file was malformed (Specifically I had a closing tag which shouldn't have been there).

I was relying on it formatting on save, and when that didn't work I tried manually selecting "format document with prettier" which did nothing.

It was only when I looked in the output window (Which I should have done immediately) that I saw that it was complaining about the misplaced closing div tag.

It's a silly oversight, but easily made.