vscode-language-babel icon indicating copy to clipboard operation
vscode-language-babel copied to clipboard

Published 20 hours ago • verified publisher icon michaelgmcd

Template literal syntax highlighting not working in ES6 files

Open getninjaN opened this issue 7 years ago • 7 comments

Hi! I seem to have a problem with syntax highlighting in my ES6 files, not sure if I'm missing something or not. I would love for this to work since I moved from Atom to Code, and this worked great in Atom.

image

Code says the language mode is Babel JavaScript.

Any ideas what could be wrong?

getninjaN avatar Aug 28 '18 11:08 getninjaN

The atom package looks for template key in objects and highlights them as mustache templates. Based on https://github.com/michaelgmcd/vscode-language-babel/issues/23, it didn't seem like this had much usage so I removed it, or else any object with a template key would have incorrect highlighting.

michaelgmcd avatar Aug 28 '18 14:08 michaelgmcd

Hmm... Ok. So how do I get syntax highlighting? :) Could there be a setting for this?

getninjaN avatar Aug 28 '18 14:08 getninjaN

I could probably support the syntax highlighting with a comment, similar to /* CSS */ for some inline css. I'd love a PR as well :)

michaelgmcd avatar Aug 28 '18 15:08 michaelgmcd

In order to support this setting, I need vscode to support adding and removing grammars at runtime: https://github.com/Microsoft/vscode/issues/61962

michaelgmcd avatar Oct 27 '18 21:10 michaelgmcd

I just installed vscode-language-babel and encountered the same problem. But then I noticed that the CoffeeScript formatting formats templates correctly, so it seems to be possible to achieve this with the current vscode version.

esocode avatar Dec 04 '18 09:12 esocode

Addition: I had noticed the problem of templates not beeing styled with .js files, not .es6. And I just discovered that after installing the JavaScript Atom Grammar template literals are now styled correctly with your plugin.

This grammar is provided by Microsoft and contains the following Note: Since the latest update, the JavaScript grammar shipped with VS Code now also supports colorizing of varable and function references and aims to be feature equivalent to the Atom grammar. The VS Code team therefore recommends to use the built-in JavaScript grammar. The "feature equivalency" obviously isn't as complete as advertised.

esocode avatar Dec 04 '18 12:12 esocode

@esocode please look at https://github.com/michaelgmcd/vscode-language-babel/issues/34#issuecomment-416606321. Other highlighting plugins have explicit checks for "template" and highlight them as mustache. I would be interesting in adding custom highlighting like this in a comment but would need VSCode support

michaelgmcd avatar Jun 05 '19 17:06 michaelgmcd