Adding React code highligher to Sublime 3

When I started using sublime 3 for react, code highlighter was not working properly. File was recognised as JavaScript but due to JSX syntax colour highlighter got screwed up as you can see in below screenshot. Anything coming after first closing JSX tag is not recognised properly as ‘/’ is not escape character.

I tried to find about plugins but information available was very user freindly. Please follow following steps to add syntax highliter

Step#1
Got to Package control and copy requited python code.
For sublime 3 copy following code

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)  

Step#2
Go to View–> Show Console and it will open console in sublime text window.
Alternatively you can press Ctr+~ to open same window.
Now paste code copied in above step and hit enter.

Step#3
Go to Preference–>Package Control
OR press Ctr+Shift+P
and Select Package Control:Install Package

Step#4
This step will open a pop up window. Please type required package name in the window. e.g. I wanted to install ‘babel-sublime’ as this handles react code highligter as well.

Step#5
You are not done yet.
Now go to View–>Syntax–>Open all current extensions as..–>Babel–>JavaScript(babel)

And here is the result.

If you compare this with first screenshot, you can see JSX code is highlighted properly after installing and activating ‘Babel-Sublime’

Please do let me know if you run into any issues.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.