Supercharging Sublime Text 3 to work with ReactJS

Sublime Text 3 is not a traditional IDE because it does not offer certain capabilities such as debugging, code suggestions, code refactoring or build compilation. However, this has not stopped it from being one of the most sought-after code editors in the game. With its unique set of API’s, you are able to accomplish all the things you would be able to with a traditional IDE, but in a more efficient and personalized way. I’m going to show you how I outfitted my development environment to help me with my day to day tasks.  

JavaScript Enhancements

The first plugin I recommend installing is called JavaScript Enhancements. It offers a lot of features that help with creating, developing and managing JavaScript projects. The first of which being its smart autocomplete feature. I think this goes without saying but writing code can be extremely tedious at times. Sure we may enjoy it but nobody truly wants to waste time making sure every tag, “(“ or “{” is closed when our programs can do that for us. Unlike native Sublime, this plugin delivers autocomplete based on the current context of our code. On top of that, the completions list will contain information about variable types and function signatures.

Secondly, this plugin has robust error detection and linting. Native Sublime does not have an error detection or linting system. With the help of Flow, we can use the CLI commands to inspect our code. To let Flow check your files, you need to add a special comment in them: “// @flow”. If you prefer flow to check all the files in your project, you need to create a “.flowconfig” file and set “all” to “true”.

Finally,  this plugin offers code refactoring, which again is not provided on Native Sublime. It may not be a feature that you use often but you never know. Like the previous featur, it uses Flow’s CLI commands to get the necessary information. The following code refactoring methods are currently supported: convert to arrow function, export, safe copy, safe move, safe delete and extract. Instructions on how to install this plugin can be found here: JavaScript Enhancements

TerminalView

The second plugin I recommend that you install is called TerminalView. As the name may suggest, it allows you to access your terminal from inside Sublime Text. Personally, I believe whether or not you get this plugin comes down to preference. Do you enjoy switching from one application/screen to the other or not? If you do like switching, TerminalView is the plugin for you. Not only does it work like a standard command line, but it also supports integrated applications and autocompletion shortcuts. Here is how it looks:

Instruction on how to install this plugin can be found here: TerminalView

A File Icon

The third plugin that I recommend that you install is called A File Icon. It is a cosmetic overhaul that provides icons to a bunch of the different languages and frameworks that are used by full-stack developers. Here is how it looks:

This plugin will do nothing to help improve your overall productivity but it may help to maintain your focus. Personally, aesthetics play a big part in a lot of things I do in my life. If I’m working in a visually pleasing and stimulating environment, that helps keep me motivated and fully engaged. Instructions on how to install this plugin can be found here: A File Icon

Colorsublime

The fourth plugin that I recommend that you install is called Colorsublime. Similar to the previous plugin, this one is purely a cosmetic overhaul in the sense that you can choose a color scheme to Sublime and that in turn will apply a different color scheme to every element in your various programming files. Here is an example of my theme:

This plugin does an excellent job to individually highlight each element in this HTML file. At times I would find myself having a hard time locating certain elements since they were not effectively separated. However, that is now a thing of the past as this plugin has completely changed the game from me. Also, just like the previous plugin, there are tons of themes to choose from so you are free to select whatever you prefer best. Instructions on how to install this plugin can be found here: Colorsublime

React ES6 Snippet

Finally, I also recommend that you install the React ES6 Snippet plugin. Essentially, this plugin allows you to invoke a handful of ReactJS snippets which will expand your desired functions. Here is an example:

The main benefit of having this plugin is that it saves you the time and energy of having to type out tedious methods and calls making you more productive. Instructions on how to install this plugin can be found here: React ES6 Snippets

These are my top five favorite Sublime Text 3 plugins that I am currently using. Using these plugins has made life as a junior developer smoother and more exciting than what I thought it would be. Discovering all these shortcuts and power-ups has put me in a better position to excel when I start exploring more advanced concepts later in my career. That being said, these aren’t the only tools out there. The Package library for Sublime Text is extensive and full of amazing resources.

In the end, it all comes down to individual preference. Also, you have to explore and find what suits you best. I felt compelled to talk about my experience in the hopes that it’ll be beneficial to at least one person out there. I’ve been using sublime text for years now but I only discovered the package library about 4 months ago. Also, this post was also intended to help up and coming ReactJS developers get acclimated but a lot of these plugins can be used interchangeably by other frameworks.