Sublime Forum

Syntax highlighting with ST3 on functional react App


I am using ST3 Pro-Version, and I have just payed some 2 Month ago.

This is a good reason to no longer use the ST3 Editor :

The syntax highlighting on sublime Text 3 is not working correctly on my functional react component within several js6 Functions inside of the JSX code.

Attempt: A- Naomi package should be able to handle it, but it does not.
Attempt: B- Java​Script​Next - ES6 Syntax package should be able but it is neither
Attempt: C- Babel JavaScript package

I ended up with the package attempt B , but there still are errors.

Screenshot 2:

Screenshot 1:



I don’t know if it is what you are looking for, but have you tried JSCustom?

1 Like


I am still searching for a way to work with sublime text 3 on my react App.

I have no intention to define my own syntax-highlighting.

I am searching for an approach to solve the issues as displayed above and below in screenshots.
Different sublime-packages do yield dfferent results.

But none of the highlighting of the syntax is entirely correct.



I use Naomi and the highlighting seems fine. The issue you indicate in the Naomi screenshot could be the result of the color scheme you’re using.

Typing up a portion of the sample you posted in your screenshot I get this:



I agree It must come from the color sceme :

but where does the issue itself actually come from ?

I am not the only one facing severe Issues with the Syntax Highlighting in Sublime Text 3 it seems ( StackOverflow ).

I found many others having similar issues, but I found no solution yet .

If anybody can provide me with a better approach to access this issue an efficient way, let me know.

This is the JS-Code causing the issues:

It happens within all of the four Syntax Highlighters I mentioned above.

Different issues, but none of the packages manages to display the result just correctly in its entirerty.

See JS Code example file



You may be confusing syntax highlighting with color scheme. Some syntax highlighters are problematic, but I have been using Naomi for a couple years and it doesn’t seem to have problems with the syntaxes used in React applications (though, I have not tried it with Typescript).

Once you’ve selected the syntax highlighter, then you need to find a color scheme that gives you the keyword differentiation that you’re looking for. Both of the following screenshots are taken using the Javascript (Naomi) syntax, but with different color schemes:


Material Theme:

Looking at syntaxes (both of the following using the Material Theme color scheme)

Javascript (Babel):

Javascript (Naomi):



Hi Normally,

in my case, the syntax highlighting is not consistent over the entire page.

That means while the highlighting is fine within the first, upper, half of the js-page, the lower part of the code is highlighted mistakenly.

My above screenshot does highlight that kind of errror quiet clearly.

I did test naomi already. I faced issues with Naomi as well. The issues I faced with Naomi can be viewed on my second screenshot within my first post on this very Sublime HQ Ticket.

Therefore - even though you may be correct , and I might indeed have been confused when I applied the terms “color sceme” versus “syntax highlighting”, I still think Naomi is not the solution to my issue. Also others seem to encounter similar issues with ST 3. Was your suggestion to apply Naomi?

I am more than grateful for your support!

I really need to find a solution to this issue.

It is almost impossible to use ST3 due to the mistaken highlighting



yet another screenshot taken today:



You can use JSCustom for this. Generate a new Javascript syntax with JSX extensions enabled and you should be good to go.

Note that ST4 will have a built-in Typescript syntax with JSX extensions.



I did use JSCustom as advised. Now the MAP Method is no longer highlighted , see screenshot



this theme will not interfere, will it?



This is the setting I applied to JSCustom , did I apply that correctly?

the above three messages are new



JS Custom and Monokai.sublime-color-scheme


JS Custom and Mariana.sublime-color-scheme


I don’t see any highlighting issues.

It just appears your color scheme doesn’t distinguish variable.function and variable.other.



I never intended to individually define settings, only to help Sublime Text recognize a Method as such, and highlight it accordingly.

So how will I manage to individually tell my designated “color scheme” to distinguish between a variable.function and a variable.other ?



You can either edit the color scheme or use a different one.



I tried several different Color Scemes, but none of the Color scemes changed the syntax highlighting. The syntax highlighting remained totally unchecged. That means; the .Method .MAP is not highlighted as a method call (for example, there is more Mal-Highlighting going on) .

The only influece I was able to apply to the highlighting of the .method call within the JSX Part of my code was to switch the syntax (going to VIEW --> Syntax ) - but as documented above, none of the 5 extensions I used where ale to deal with my code. I added the code and other users told me the code is fine in their ST Browsers. So it IS a ST3 issue in my editor about the highlighting. .

Just one month ago, I invested 80 USD on ST3 , and I must say, I just want my money back.

Neither the support, nor any of the 5 packages, nor any of the 8 hrs of time I invested helped to solve the issue.

And it is impossible to work with the Sublime Text 3 Editor IF it displays the code so badly highlighted when it comes to the syntax.

What am I to do now? Can I get my money back? When will ST4 be out? Can anybody support me in a way that finally tackeles my issue?



Only one package was mentioned, which is JSCustom.

It does solve the issue. Just use the Monokai or Mariana color scheme (run “UI: Select Color Scheme” from the command palette).



@stefanibus I just tried out the One Material color scheme and I can confirm the issue you describe is with that color scheme, not the syntax highlighter. As others have suggested, select a different color scheme that provides the color differentiations you are looking for.



You can get a refund within 30 days, but it sounds like you’re outside of that range now.

ST4 has no officially announced release date, but as a licensed user you can use it right now by downloading it from the Discord server, which is linked from the pinned forum topic about resources and bug tracking.