Sublime doesn't syntax highlight React functions?

Question

I'm trying to inline-bind my functions using this kind of syntax:

onChange = () => {

}

However, my sublime editor isn't correctly highlighting it:

I'm using the Babel package for sublime for syntax highlighting.

Does anyone know how to make it recognize this sort of style?

Answer 1

Check this

View -> Syntax -> Open all with current extension as... -> Babel -> Javascript(Babel).

or

Ctrl - Shift - P, type "Babel" and select Set Syntax: Javascript(Babel)

Source

Answer 2

ST3 relies on language definitions for providing language features such as code folding, syntax highlighting etc. However, with JavaScript, you have many different flavors of the language - like ES5, ES6, JSX etc. To correctly understand and parse each one of them is not easy given ST3's design (using a language definition file which is mostly regex matching).

So depending on what you're looking for, you may want to install Java​Script​Next - ES6 Syntax which helps ST3 better understand the language and its syntax. There are few others like these on marketplace if I'm not mistaken.

Then comes the notion of syntax highlighting - again, without the core editor natively understanding what's JS and what's JS-like out, these plugins are dependent on how good the language definitions are and so, have one or more shortcomings. There are a few options that you can try and see what suits best:

• naomi - Enhanced syntax definitions for Sublime Text 3. Supports stage-0 features

• babel-sublime - Syntax definitions for ES6 JavaScript with React JSX extensions. But has some issues with arrow functions, see #301

• sublime-react - It's actually deprecated in favor of babel-sublime but you may want to check it out.

Whatever you choose, you need to do some due diligence. Check with their issue lists, see if anything stands out to you. Relying on transpilers can only go so far.

As a long time ST3 user, I've constantly found one or more issues. And depending on whether you're working on pure JS, or React, you may have to keep switching or accept some compromises.

Ultimately, I switched to VSCode (tried Atom too) which understand the language and it's flavors natively and provides extensions API that authors can build upon. Consequently, the syntax understanding and highlighting capabilities are far greater than what you can get out of ST3 + Extensions.