search

michaelgmcd / vscode-language-babel

VSCode syntax highlighting for today's JavaScript
https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel
MIT License
130 stars 17 forks source link

Template literal syntax highlighting not working in ES6 files #34

Open getninjaN opened 5 years ago

getninjaN commented 5 years ago

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?

michaelgmcd commented 5 years ago

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.

getninjaN commented 5 years ago

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

michaelgmcd commented 5 years ago

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 commented 5 years ago

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

esocode commented 5 years ago

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 commented 5 years ago

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.

michaelgmcd commented 5 years ago

@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