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.