pixelfairy pixelfairy - 2 years ago 90
React JSX Question

How can I get react code to display with the proper syntax highlighting in Sublime?

The obvious answer to this question seems to be that I should install the Babel package. However, I'm unable to find the Babel package via Package Control.

Is there a way that I can make package control find it or install in manually?
Any idea, why isn't package control finding it?

Maybe I don't know how to use Package Control properly?

I'm using the most recent update of Sublime 3 (Build 3126).

Answer Source

The package that you want is probably the Babel package, which is in package control already. In order to install it, you can open the command palette and select the Package Control: Install Package command, then select Babel from the list of packages that is presented. You can also select Preferences > Package Control to open the command palette with the list of commands for package Control displayed (under MacOS, the Preferences menu is under Sublime Text in the menu).

If this isn't the package that you want to use, and the package is not in Package Control but IS available via GitHub or BitBucket, you can still install the package with Packge Control by selecting Package Control: Add Repository from the command palette (same list as above) and providing the repository URL. This will make the package available as an installable package as if it is was natively in Package Control.

As an aside, in general Sublime selects the syntax to use for a file based on its extension, which means that for packages like Babel that provide syntax definitions for file extensions that Sublime already supports (in this case JavaScript), you may need to take extra steps.

In particular if you use a file extension like js, Sublime will treat it as JavaScript. You can swap the syntax to a different one by selecting it from the View > Syntax menu, clicking on name of the current syntax in the status line (if it's visible) or selecting the appropriate Set Syntax: command from the command palette.

This can be a drag if you mostly work with the alternate format file; in this case you can use View > Syntax > Open all with current extension as... from the menu while you have a JavaScript file open and select the appropriate syntax to change the default.

This flips your problem around so that you now need to manually select the JavaScript extension, however. Depending on which syntax you use most often this may or may not be a big deal. You can also perform the same step to change the default back.

As an alternate solution to this problem, if you use sublime-project files you can use the Project Specific Syntax Settings package to automatically select the appropriate syntax based on the current needs of your project.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download