Giters

kaminaly / vscode-react-pug

Syntax highlighting for pug with react (babel-plugin-transform-react-pug)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Incompatible with Babel JavaScript

ezhlobo opened this issue · comments

commented

Hey. I'm not a user of VSCode so I'm not aware of how things work there, but it looks like this plugin doesn't work when we use Babel JavaScript (mgmcdermott.vscode-language-babel) plugin.

It will be nice to make it work with commonly used plugins.

commented

@kaminaly hey, do you think you have a chance to help with this issue?

commented

@ezhlobo Sorry, I also couldn't notice this message :(
I will check this too.

commented

@ezhlobo Hi, I'm not sure but it seems a Babel JavaScript side problem.
vscode-react-pug is injecting pug highlighting pattern to the default js highlighting pattern.
It looks Babel JavaScript redefine js highlighting pattern.

There are a lot of extensions which are using injection. I think they don't work with Babel JavaScript. I checked some extensions with Babel JavaScript. they didn't work.
https://github.com/search?l=JSON&q=injectTo+source.js&type=Code

commented

@kaminaly hm, when babel re-define the pattern, is it possible to create another plugin on top of it to re-define the pattern again? For example now we rely on punctuation.definition.string.template.begin.js, maybe with Babel we should just rely on anything different? I tried to inspect the scope, and with Babel it provides punctuation.definition.quasi.begin.js.

I'm not sure but it seems a Babel JavaScript side problem.

If that's the case, do you think we can formulate the issue and share it with its maintainers?

Sorry for lots of questions, looks like Babel is so popular so I'm trying to understand if it's possible to support it :).

commented

@ezhlobo I found an extension which is the same type of Babel JavaScript.

https://github.com/Microsoft/vscode-js-atom-grammar

According to the readme, This extension replaces the JavaScript grammar in Visual Studio Code with the JavaScript grammar from the Atom editor.
But I could use vscode-react-pug with vscode-js-atom-grammar when I checked them.

I thought the reason for the problem was to replace grammar. that was wrong.
Now, I guess a pattern of the type of string(``) in Babel JavaScript is stronger than injected one.
I don't know how to fix it yet though...

commented

@kaminaly the real fix is to turn on Atom's grammar (which is used in Babel JavaScript). We can do that by installing official plugin:

https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-atom-grammar

I believe if we add this information to the README on noticeable place, it will solve the issue for people who install your package and use "Babel JavaScript" plugin.

Are you able to add this information to README? So I'll be able to point my colleagues to exact place where they will find the solution for the problem :).

commented

@ezhlobo Ok, thanks for your advice. I will add the information to the Readme.

the Readme of vscode-js-atom-grammar recommends using the built-in JavaScript grammar.
I don't know which grammar is better. However, they will choose the right grammar for them :)

commented

@kaminaly I still don't have strong knowledge in how things work there, so don't know how to comment their README.

What I understood (not 100% sure though) is that we either need to patch default grammar (that is what that plugin does) or completely override existed one (that is what babel-language does).

Don't know how they both connect with each other, but that made things work for me.

commented

@ezhlobo do you mean that vscode-react-pug works with Babel JavaScript if it's using with vscode-js-atom-grammar at same time?
if so, I couldn't understand... my poor english skills... ;(

commented

@kaminaly yep, two ways to make it work:

  1. Install vscode-react-pug
  2. Install Babel JavaScript+vscode-react-pug+vscode-js-atom-grammar

All is cool ;).