Syntax highlighting for JSX not working for React-Native (when JavaScript Atom Grammar is installed)

[agm1984]

• VSCode Version: V 1.16.1
• OS Version: Win 10 Pro

Steps to Reproduce:

1. Open React-Native project in VS Code
2. Type JSX

Reproduces without extensions: No

I just ran code --disable-extensions and my colours came back. I found the extension that was causing it: JavaScript Atom Grammar: https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-atom-grammar

Here is a screenshot of a few minutes ago before it was working; only the primitive works.

Therefore, this issue is now simply an alert to let you know that this is real and probably happens to others. I am happy to send any other specs as requested.

Here are my user settings:

{
    "atomKeymap.promptV3Features": true,
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.formatOnPaste": true,
    "editor.snippetSuggestions": "top",
    "editor.tabSize": 4,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "files.associations": {
        "*.js": "javascriptreact"
    },
    "git.enableSmartCommit": true,
    "workbench.iconTheme": "material-icon-theme",
    "workbench.startupEditor": "newUntitledFile"
}

I'm pretty sure that extension was sprinkling syntax highlighting issues elsewhere in my experience also. I highly recommend taking a look at it with respect to its propensity to create such issues. Thanks!

[agm1984]

P.S. I also really want word highlighting to work in the minimap when I double click words (ie: highlight all instances of that word). Please increase the tally by 1 for that feature.

This extension works amazing, but I want this to carry into the minimap also: https://marketplace.visualstudio.com/items?itemName=rsbondi.highlight-words

I know others are requesting it also, and I see you are the syntax wizard mjbvz. :) Please relay our concerns to the mothership.

[mjbvz]

Hey @aeschli, this looks like an issue with the atom language extension. Can you please take a look. Also, any reason why the repo for that extension is private?

---

@agm1984 I believe that is tracked by #21404 Please open a new issue / feature request if #21404 does not cover what you are looking for

[aeschli]

I updated the grammar to the latest and made the repo public.
The Atom grammar we publish in that extension doesn't handle JSX, Atom has a different grammar for that. But the extension contributes the grammar for languageId javascript, so JavaScript React should not be affected. So there's a bug there.

The problem is that javascript and javascript react both use source.js as root scope name. The textmate engine uses that scope name as grammar identifier.
@mjbvz Matt I think it would be good to use source.jsx for JavaScript react.

[mjbvz]

Thanks @aeschli! Yes we should be able to do that since we already have separate scopes for ts and tsx. I'll look into it for this month

[aeschli]

Thanks @mjbvz! In order to keep JavaScript specific rules in themes working, 'source.js.jsx' might be a good choice.

[amackintosh]

Nice forensic work, thanks