Mark JSX components differently from standard HTML tags

[mjbvz]

From @tannerlinsley on January 18, 2017 19:14

This is no so in Atom (which is honestly the last thing keeping me from moving all the way to vscode):

It doesn't seem to be fixed by using any theme, or installing the https://github.com/dzannotti/vscode-babel extension.

Any ideas?

Copied from original issue: microsoft/vscode#18752

[mjbvz]

The request here would be to mark custom component tags differently from html tags. Right now, both are scoped the same, for example:

entity.name.tag.js
meta.tag.js
meta.jsx.children.tsx
meta.tag.without-attributes.js
meta.var.expr.js
source.js

When I mentioned this to @mhegazy, I believe he suggested that this could be as simple as seeing if the first letter of the tag is capitalized.

[tannerlinsley]

I agree. First letter being capitalized would be a pretty dead giveaway along with tags that contain object dot notation:
<components.myComponent attr={...} />

[mjbvz]

I tried this in atom with the babel plugin.

For the jsx <div />, div is:

• source.js.jsx
• meta.tag.jsx
• entity.name.tag.open.jsx

For the jsx <Div />, Div is:

• source.js.jsx
• meta.tag.jsx
• entity.name.tag.open.jsx
• support.class.component.open.jsx

[tannerlinsley]

So it might only have to do with the syntax highlighting then, if it's already making the distinction.

[mjbvz]

Yes, I suspect so. This means that the highlighting won't be right all the time, but it should work in common cases fairly well.

Here's what I believe is the implementation of this in the babel grammar: https://github.com/gandm/language-babel/blob/dbb88f69aaf09bf30e517d6dc1c8144467743299/grammars/Babel%20Language.json#L2183

and here's where I think we would need to update the Typescript react grammar : https://github.com/Microsoft/TypeScript-TmLanguage/blob/master/TypeScriptReact.YAML-tmLanguage#L163

[tannerlinsley]

I'm not sure why this is closed. I just tried to move to VSCode again from Atom and this still isn't fixed. @waderyan any insights here? For someone using JSX and React, this is very sad experience :(

[waderyan]

@tannerlinsley can you take a screenshot of what you are seeing? Also please confirm you are on the latest version of VS Code.

[tannerlinsley]

Confirmed latest version. The screenshots above are still representative of what I am seeing

…

On Thu, Jun 8, 2017 at 4:25 PM Wade Anderson ***@***.***> wrote: @tannerlinsley <https://github.com/tannerlinsley> can you take a screenshot of what you are seeing? Also please confirm you are on the latest version of VS Code. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#415 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFUmCcEBGNlQdz43VZnLnhU-4Zko3l5Sks5sCHTYgaJpZM4L4zqA> .

[waderyan]

@mjbvz this seems to have shown up again.

[mjbvz]

@tannerlinsley Are you using VSCode 1.13?

[tannerlinsley]

Yes I am 😊

…

On Thu, Jun 8, 2017 at 7:16 PM Matt Bierner ***@***.***> wrote: @tannerlinsley <https://github.com/tannerlinsley> Are you using VSCode 1.13? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#415 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFUmCZfK5DXMAp3SL3ceYqNALQzHApXNks5sCJzmgaJpZM4L4zqA> .

[mjbvz]

@tannerlinsley What theme are you using?

[mjbvz]

Closing as this has been fixed for the included vs code themes

[mwmcode]

This feature is missing from November version (1.18)!?