single file .vue formatting no longer works correctly

[frudman]

Info

• Platform: Mac (el capitan)
• Vetur version: 0.18.1 (2019-04-04)
• VS Code version: 1.33.0 (updated 4/4/2019)

Problem

After update of either Vetur (updated 4/4) or VS Code (also updated/restarted 4/4), the formatting of single-file .vue code is no longer correct (was fine until then).

I attached a snapshot of current display. Unfortunately I do not have an earlier snapshot of the correct formatting (since it was working!).

Reproducible Case

Not sure how you can reproduce it. I've closed down VSCode, restarted it. Closed code tab, reopened it. Still same [new] result.

Formatting is incorrect. Incorrect formatting is same after close/reopen. Starts right at icon closing tag (white), through closing h4 tag, through start of form below. Then seems ok/not-ok for rest of template.

Ditto for actual code (script) where color coding fails and most of the code is just white text.

All else is working fine, code is compiling/executing correctly. No other issues other than annoying (and now hard to use) formatting.

Formatting of STYLE is fine (using stylus on this file, in case that's relevant).

template issue

script issue

[sgehrman]

I just updated VSCode and now it says View Language Server crashed every time I save.

[hushiking]

you could try to install vetur 0.18.0 version. It can work well.

[prinzt]

Rollback to 0.18.0 fixes the issue for me.

[sgehrman]

Me too

…

On Sun, Apr 7, 2019, 11:18 PM prinzt ***@***.***> wrote: Rollback to 0.18.0 fixes the issue for me. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1189 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AARhoXZq3fR9FY4F6da-G9k1niDniKg0ks5vet8sgaJpZM4cgyxe> .

[octref]

Can you give one full file on which I can fully repro this issue?

[frudman]

yes i'm happy to private-send you a file (but i don't want it published on forums). u can email me your email. not sure how to do private messages on github. (ps: still have problem today after full restart of everything).

[octref]

@frudman I sent you an email.

[frudman]

sorry, already sent to your email. did you get it? (it was your gm email, coming from my personal gm email)

[octref]

@frudman I got it.

Syntax highlighting is broken because you need to use quotes around interpolations. In line 18, something like this would do:

<h4><icon v-if="foo" bar :hover="bar" /></h4>

The quoteless HTML attribute usage would cause problems. This has never been working:

<h4><icon v-if=foo bar :hover=bar /></h4>

As for formatting, what's your config for vetur.format.defaultFormatter.html?

[frudman]

thanks for looking into this. a couple of points:

1. html/5 does not require quotes around simple attr values, afaik. perhaps vue or vetur does? (or is this a newer req?) (or newly enforced req?)
2. this was never an issue in the past. all our components are coded like that. And none had this problem before.

I don't see a vetur config file in my project (or home directory). I'm on a mac. Is it kept somewhere else? Either that, or I'm using it with standard options.

[octref]

html/5 does not require quotes around simple attr values

That's right, but Vue interpolations are not simple attribute values. That code itself wouldn't even be valid HTML5:

https://mathiasbynens.be/notes/unquoted-attribute-values

You can read https://code.visualstudio.com/docs/getstarted/settings to better understand VS Code settings. By default Vetur uses https://prettyhtml.netlify.com/ for template formatting. If that doesn't work for you, you can either disable it with vetur.format.defaultFormatter.html: "none" or use another formatter: https://vuejs.github.io/vetur/formatting.html#formatters.

[frudman]

agreed about the [classic] foo bar example: we do use quotes when attr vals contain spaces, '=', or other such char (which for us is rare, but for which you can see an example of this in code i sent).

so, bottom line, for us to use vetur, quotes are required always, is that correct? (else no vetur?)

(out of curiosity, why was this not an issue until recently (at least not for us/our code)? or even last update? was it vetur update or vscode update? just curious)

[octref]

There's no spec that says you can or cannot use unquoted attributes. But currently the Textmate grammar of Vetur doesn't support unquoted values very well.

why was this not an issue until recently

For which version of Vetur / VS Code does this work? I tested on 1.18.0 but syntax highlighting still didn't work.

[frudman]

ok.

we use latest version of software, always. vs code & vetur (& others). only recent update was vetur (&, coincidentally) vs code on same day (4/4/2019). prior to that, all was well: i assume vetur was at 0.18.0 (but never checked) and vs code was at whichever version before 1.33 (i'm assuming 1.32.0)

it's not a big deal. we just liked using vetur. it made code nice-and-easy for us to read on screen.

no worries.

[ps: prior version of vetur did work for us, at least syntax coloring did]
[ps2: and i can confirm that adding quotes to last parm in icon tag does correct syntax coloring until next non-quoted attr, so that's definitely the issue]
[ps3: leaving now but will try to roll back vetur version tomorrow & see if that goes back to correct coloring: now I'm curious why it was working before]

[octref]

You can get old downloads here: https://code.visualstudio.com/updates/v1_32 and old Vetur releases in https://github.com/vuejs/vetur/releases. https://code.visualstudio.com/docs/editor/extension-gallery#_install-from-a-vsix is how to install them.

[frudman]

ok, i won't get a chance to spend much time on this but was able to do this earlier today:

1. load a different extension from vetur back to 0.16.2 (1-month old) and all else unchanged: prettier-code-formatter-v.1.8.1; vscode-v.1.33.0. (to install, btw, you can just go into extensions -> vetur -> load different version then select a version: i picked a month-old version to go far enough back)

2. it then says "RELOAD REQUIRED"

BUT, before reloading, it seems to reload open files on its own, and the .vue files all display correctly! (including the file I sent you yesterday).

HOWEVER, if I then explicitly reload, the files go back to bad coloring issue, although it also says version is now also back to 0.18.1 (as if it doesn't like the older version and resets to latest: I suspect I have a setting that says to auto update my extensions, somewhere; will look for that and disable it, then try again, but can't right now (sorry, deadline))

[UPDATE] Yes, I can confirm (after disabling auto-update extensions and restarting) that [at least with] 0.16.2, all syntax coloring does indeed work properly. All is well with html and javascript and css.

bottom line: with all else up-to-date (vs code, extensions), and vetur back to 0.16.2 (at least, didn't try more recent yet), the coloring syntax is working properly.

for now, we'll keep vetur at version 0.16.2 until hopefully more light can be shed on the problem.

Thanks for all your effort. Very much appreciated. :-)

IMPORTANT: I should have mentioned yesterday (sorry), the coloring issue goes past the template/html code, into the script part. If the issue is indeed a textmate (or other html-parsing) error, why would that move into the .js part of the code (a completely different parsing engine, I assume).

ps2: here's a list of extensions currently loaded on vs code (most unused from past projects):
Dart-Code.dart-code
Dart-Code.flutter
dbaeumer.vscode-eslint
esbenp.prettier-vscode
felixfbecker.php-intellisense
Gruntfuggly.todo-tree
hbenl.vscode-firefox-debug
leizongmin.node-module-intellisense
mike-lischke.vscode-antlr4
mrmlnc.vscode-json5
ms-vscode.Go
msjsdiag.debugger-for-chrome
octref.vetur
PeterJausovec.vscode-docker
ritwickdey.LiveServer
sidneys1.gitconfig
sysoev.language-stylus

[octref]

The syntax highlighting for unquoted attributes should be fixed in #1193.

[frudman]

that's great! can't wait for next version to be released!
Thanks again for all your work.

[thalysmg]

How can I install vetur 0.18.0? Or change 0.19.0 to 0.18.0. I'm using vscode.

[ConorSheehan1]

Still seeing this issue with v0.22.6, but only for large .vue files.

Reverting to v0.18.0 didn't solve the problem for large files either.

[ConorSheehan1]

Finally got it fixed, by this comment #543 (comment)

Mine is fixed.

1. Install Prettier extension.
   URL - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
2. Go to File > Preferences > Settings
3. Add below,
   "prettier.singleQuote": true,
   "prettier.semi": false,
   "prettier.eslintIntegration": true
4. Save.
5. Try Alt + Shift + F

but without "prettier.eslintIntegration", since it's deprecated now.

[andrewhood]

A workaround that worked for me:

1. copy paste the original file into the same folder
2. delete the original file
3. rename the new file to what the original file was named