Vetur: Syntax highlighting is broken

[chasebank]

• Platform: Windows
• Vetur version: 0.11.6
• VS Code version: 1.19.2

Problem

Syntax highlighting isn't working across the board. I had this extension installed through Sarah Drasner's Vue VS Code Extension Pack, and this morning highlighting suddenly stopped. I believe I've narrowed it down to this extension, as I've confirmed this issue with all other extensions disabled.

Proper highlighting was restored with the "vue" extension by liuji-jim, so I don't think this is a VS Code issue.

[octref]

Can you post screenshots and list of Vue related extensions you have?

[chasebank]

Thanks for the quick reply. It was zero syntax highlighting. I just got all my extensions re-enabled/installed so unfortunately can't screenshot it.

This was the case with the default VS Code theme and no extensions enabled except Vetur. Also tried with Material theme enabled but that didn't work either.

The only Vue related extensions I have installed (but were disabled), are the ones in the extension pack I previously mentioned.

Vetur
Vue Snippets
Prettier
Bracket Pair Colorizer
Bookmarks
Jumpy
NPM Intellisense
ES6 Snippets
Copy Relative Path

[octref]

No, I mean just get a screenshot of how your VS Code window looks like.

Also, do you have any files.associations setting? In the lowerright is it showing Vue as filetype?

[wadecoding]

• [x] I have searched through existing issues
• [x] I have read FAQ
  

  - [ ] I have read through docs

Hey, I just met the same problem. But when I uninstall and reinstall the plugin and it's OK. Before I uninstalled it I tried to unable all the plugins except this one, it did't work.

Well, I've actually met this situation once before, and that time I just unintall and reinstall like this time and it's done. But I don't know why it's these things happen. In the lowerright it is showing Vue as a typefile and i don't have files.associations settting at all.

Plugins I use are:

• Auto-Open Markdown Preview
• Beautify
• Color Picker
• HTML CSS Support
• Material Icon Theme
• Open in Browser
• Python
• Sublime Text Keymap
• Vetur

[cannap]

have the same

https://gyazo.com/ff9a8cefdb69314b06612d298bc7d118

/C:/Program Files/Microsoft VS Code/resources/app/out/vs/workbench/workbench.main.js:249 [Extension Host] Fehler beim Aktivieren der Extension "octref.vetur": Cannot find module 'vscode-languageclient'.

Failed to activate octref.vetur

Windows 10

//e config https://gist.github.com/cannap/ce71c64b07df1ea47419c6387836f04c

[octref]

@wadecoding I'm guessing you upgraded either VS Code / Vetur, and the dependencies are not correctly updated. This has happened many times for others: https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#vetur-crash

@cannap This is concerning...So you are having an init problem, but that's affecting the syntax highlighting too? Does reinstall help?

[cannap]

@octref ok reinstalled fixed

[Winston-Guess]

I'm still having this but only on the Insiders version of VS Code. I've tried reinstalling Vetur. Disabling it brings back default Vue syntax highlighting.

[jarrettv]

When i switched from ia32 to x64 vue file syntax highlighting stopped working. Reinstall did not work for me. I needed to delete the %USERPROFILE%\.vscode\extensions.vscode\extensions folder to fix it.

[Winston-Guess]

@jarrettv That worked perfectly, thank you! I had basically given up on using the Insiders build.

[octref]

@Winston-Guess Hey I'm looking into this issue from VS Code perspective too. Did you also switch from ia32 to x64?

[dennist12]

Run as admin and reinstall. work for me.

[octref]

@dennist12 Did you switch from 32 bit to 64 bit on Windows?

[NiloCK]

Should this issue be closed while non-elevated installation of vetur doesn't work on Windows, and this fact is undocumented? I spent a fair bit of time just now hunting for this fix (reinstalling with elevated permissions).

[octref]

Hey @NiloCK, sorry for that. Can you check if you have this file?

%USERPROFILE%\.vscode\extensions\octref.vetur-0.11.7\syntaxes\vue-generated.json?

My doubt is Windows Defender or something deleted some files when the extension was being installed. All the reports I got was on Windows.

[imjack]

I also had this issue. To resolve it I uninstalled vetur and deleted its folder and ran as administrator
Version 1.20.1 of Vscode

[chasebank]

I'm the OP... I forgot about this issue since another extension satisfied my highlighting needs. But recent issues with that other extension just forced me to return to Vetur.

And yet again, no syntax highlighting.

Uninstalling, an then reinstalling with elevated permissions (as admin) did indeed fix the issue.

This is the only extension I've seen with this unexpected requirement. So this is either a bug/flaw/conflict, and this issue should be re-opened for further investigation, or the need for elevated permissions on Windows should be clearly documented.

[octref]

@chasebank There are bugs in VS Code with

• https://github.com/Microsoft/vscode/issues/43813 Incomplete install of extensions
• https://github.com/Microsoft/vscode/issues/43993 Permission issues

There is little I can do. I can put this information in the Vetur FAQ, though.

[agm1984]

I have been having issues with my extension for auto-close-tags and an array of other things not working.

I took the hints in this thread and (on Windows 10):

1. Uninstalled Vetur and hit reload button
2. Closed VS Code
3. Right click VS Code icon in taskbar
4. Run as administrator
5. Reinstall Vetur and hit reload button

Now everything works!! yaay :)

If anyone wanders into this, I wrote an article about getting ES Lint working with Vue, and the steps I took to get where I am now are listed in there. There are a few user settings and various little nuggets that may be helpful for others:

https://medium.com/@agm1984/how-to-set-up-es-lint-for-airbnb-vue-js-and-vs-code-a5ef5ac671e8

[BetimShala]

I have been having issues with my extension for auto-close-tags and an array of other things not working.

I took the hints in this thread and (on Windows 10):

1. Uninstalled Vetur and hit reload button
2. Closed VS Code
3. Right click VS Code icon in taskbar
4. Run as administrator
5. Reinstall Vetur and hit reload button

Now everything works!! yaay :)

If anyone wanders into this, I wrote an article about getting ES Lint working with Vue, and the steps I took to get where I am now are listed in there. There are a few user settings and various little nuggets that may be helpful for others:

https://medium.com/@agm1984/how-to-set-up-es-lint-for-airbnb-vue-js-and-vs-code-a5ef5ac671e8

This one worked for me

[Farkal]

When i switched from ia32 to x64 vue file syntax highlighting stopped working. Reinstall did not work for me. I needed to delete the %USERPROFILE%\.vscode\extensions.vscode\extensions folder to fix it.

Don't need to delete all your extensions juste the octref.vetur-x.x.x folder

1. Uninstalled Vetur and hit reload button
2. Closed VS Code
3. rm -Rf ~/.vscode/extensions/octref.vetur-x.x.x
4. Reopen VS Code
5. Install Vetur

[octref]

Just fyi, there's also a command called "Developer: Reinstall Extension" that forces reinstall instead of using the cached version in ~/.vscode/extension

[mnicic]

Installing with Administrator role solved the problem on my side.

[octref]

@mnicic Can you let me know what you meant by "Installing with Administrator role"? Was it 1) Opening VS Code with admin privilege 2) Install extension from the extension viewlet?

I can add that to FAQ.

[mnicic]

@octref Yes, that's right.