Syntax highlighting with ST3 on functional react App

[stefanibus]

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:

and
Screenshot 1:

[Jackeroo]

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

[stefanibus]

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.

[normally]

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:

[stefanibus]

color scheme

I agree It must come from the color sceme :
https://www.sublimetext.com/docs/3/color_schemes.html

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

flamboyant-lovelace-czdre - CodeSandbox

[normally]

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:

Blackboard:

Material Theme:

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

Javascript (Babel):

Javascript (Naomi):

[stefanibus]

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?

PS:
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

[stefanibus]

yet another screenshot taken today:

[rwols]

You can use JSCustom for this. Generate a new Javascript syntax with JSX extensions enabled and you should be good to go. https://packagecontrol.io/packages/JSCustom

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

[stefanibus]

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

[stefanibus]

this theme will not interfere, will it?

[stefanibus]

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

the above three messages are new

[deathaxe]

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.

[stefanibus]

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 ?

[bschaaf]

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

[stefanibus]

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?

[rwols]

5 extensions I used where ale to deal with my code.

Only one package was mentioned, which is JSCustom.

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

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

[normally]

@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.

[OdatNurd]

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?

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.

[stefanibus]

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

Indeed! Your advide indeed solved my syntax highlighting issue. That is a big relief! Magnificent! I am glad that issue is resolved.

And I thank you all for your ongoing support on this matter. Thank you!

PS: I applied some different color scemes previously , and I have no idea why those did not solve the issue, but for now, things finally work. The result looks fine. Finally!

I was already beginning to prepare the migration from ST3 to Visual Studio Code, due to the ongoing issue. Glad I can stay with ST3. I got addicted to ST-workspaces and the shortcuts : )

Again, thank you for your support.