Sublime Forum

React Syntax highlighting

#1

Hi
Is there a general purpose syntax for JS , that supports React ? Apart from Syntax highlighting , I would really appreciate the fact if it supported ctrl+r option to show me a list of methods that I can quickly navigate to. I have currently installed Javascript(babel) but ctrl+r does not work for that plugin.

Please suggest.

Thanks and Regards
Gagan

0 Likes

#2

The default JavaScript syntax will work for pretty much any vanilla JS project, and supports both Goto Symbol and Goto Symbol in Project. If you are using JSX or Flow, check out https://packagecontrol.io/packages/JSCustom.

2 Likes

#3

I have just realized that the problem with JSCustom is that LSP does not work with it . :frowning:

0 Likes

#4

Can you enumerate in which way(s) it doesn’t work? Generally I would expect LSP to not require a specific syntax, as having a language layer above and beyond the syntax is the whole point.

0 Likes

#5

Sorry that was my bad.

When I am using babel js highlighter , I can see that the autocomplete from LSP is working. But when I am using JSCustom I can see that autocomplete is not working.

Please let me know if this what you were seeking .

Thanks

0 Likes

#6

In the LSP default settings, it looks like the javascript-typescript-langserver language server is hard-coded to look for the scopes source.js and source.jsx. By default, JS Custom syntaxes use scopes like source.js.react. (This is so that syntaxes embedding source.js will embed the core syntax. Otherwise, you would have infinite recursion with custom template tags that used the HTML syntax.)

If this is the cause of the problem, then you could get around it by either adding "scope": "source.js" to the React configuration in your JS Custom settings, or by changing your LSP settings so that javascript-typescript-langserver will look for source.js.react. (I feel like LSP should consider source.js.react to match source.js, but I’m not very familiar with its internals.)

Several other LSP client default settings also hard-code source.js. Some even hard-code Packages/Babel/JavaScript (Babel).sublime-syntax.

1 Like

#7

LSP should be using View.match_selector instead of string comparison for exactly this reason. I don’t know what it’s currently doing, but it seems like the latter.

3 Likes