Your new ReactJS on Sublime Text 3 workspace setup

Eduardo Martínez
Apr 20, 2017 · 13 min read
Aren’t red, orange and pink such pretty colors?

You might not think that programmers are artists, but programming is an extremely creative profession. It’s logic-based creativity. — John Romero

ell, the guy that said that is a video game programmer which sounds like quite a creativity demanding job if you ask me. But seriously, you and me are both into the web development thingy (and if you’re reading this, you are probably into ReactJS as well), our job demands us to yield beautiful interfaces, compelling web apps, and unparalleled performance, so let us not think too little of ourselves, but this quote is relevant because, if anything, an artist has to be creative, and creativity can be affected by the artists environment, I don’t mean to get you a comfy chair or a nice desk with view to the city from the tallest building in town (not that I don’t want to), but rather to get you a pleasant looking & creativity inducing programming interface.

Even before starting to post tutorials, as I promised in my introduction, there was something I needed to do first, which I rarely ever saw while learning about web development; a basic setup guide, sometimes I would see the ocasional: “I recommend using A,B or C IDE/editor in combination with X, Y & Z package/plugin/library… (you call it)”. But I was never satisfied, I’m all for ‘everyone has to find their own flavor’, just the right setup that suits you, but, since my tuts are oriented for absolute beginners, I know firsthand the struggle that is trying to figure out how to get some pretty file icons in my project explorer, or how the hell is the left side column of numbers even called and how can I personalize it. In this guide I’ll try my best to give you my current Sublime Text 3 setup, as well as all the info I can so you can start adding your very own tweaks; you might be wondering, why Sublime Text? well, it’s minimal, it’s simple and gets the work done with minimum resources usage and that’s just enough for me 🎉. This guide is going to be slightly OS X oriented, but don’t worry, I’ll be providing the way to do stuff on Windows & Linux too.

Setting up Sublime Text

you’ve downloaded vanilla Sublime Text 3, now what?. Well first things first, we’re going to download a very nifty piece of software called Package Control and is just that, a package manager for Sublime Text 3 packages (that was redundant, wasn’t it?). In order to install it, go to Sublime Text and open the console by pressing (ctrl + `) (regardless if you are on Windows, Linux or OS X), or go to View > Show Console then (update: 06/07/18) go to the official installation page, and copy the Sublime Text 3 version of the code, then paste it into the Sublime Text console.

Now in order to access Package Control you hit cmd + shift + p if you are on OS X or ctrl + shift + p if you are on Windows or Linux. So once you hit those 3 keys a menu opens in your screen, this is the Package Control main menu, and from here you manage, well, all of the packages you download and the manager itself. All the Package Control actions start with the prefix Package Control: and each one is pretty self explanatory about what it does (and yes, it does just that).

First, we’ll download all the required packages to match my current setup, then we’ll customize them.

For now we’ll go to Package Control: Install Package after selecting this option, it will take a while for ST3 to establish a connection to the packages server, and then we’ll be prompted with a text field, where we can type out the package name we’re looking for. Rinse and repeat the process for the following plugins (full setup list):

Name on Package Control — GitHub — tl;dr what does it do

That’s about it, now when you download a package it is not automatically enabled, you have to do that manually, so we go to the Package Control main menu, and we browse for Package Control: Enable Package and so enable all the packages that we have downloaded one by one. Now it’s time to start customizing ST3 a bit.

Customizing Material theme

By doing this the look and feel of your ST3 should change.

First we’ll enable Material Theme by right clicking on the code editor (anywhere is fine) and then going to Material Theme > Activate :

Now we go to the configuration (Material Theme > Configuration)option just under Activate. A new menu should appear, where we get the different customization options available to us.

Material Theme — Config Menu

First we’ll change our Color Scheme so click that option and select Material-Theme-Palenight, go back and go to Theme and pick Material-Theme-Palenight.sublime-theme, hit the return button and go to Accent feel free to pick any color you feel like, now go to Panels You can play around with those settings and get the one you like the most, but the one I have is: Everything is enabled but material-theme-bright-scrollbars and material-theme-compact-panel. Once you’re done, go to Sidebar , then again play around with the settings, mine ones are:

ENABLED:

  • material_theme_big_fileicons
  • material_theme_bullet_tree_indicator
  • material_theme_compact_sidebar
  • material_theme_tree_headings

DISABLED:

  • material_theme_arrow_folders
  • material_theme_disable_fileicons
  • material_theme_disable_folder_animation
  • material_theme_disable_tree_indicator

Now we go to Tabs , my settings are:

ENABLED:

  • material_theme_small_tab
  • material_theme_tabs_separator

DISABLED:

  • material_theme_bold_tab
  • material_theme_tabs_autowidth

The Settings Preferences file

ow to the more “specific” customization, press cmd + , on OS X or head over to Preferences.sublime-settings — User (Settings, that is) if you are on Windows or Linux. A new ST3 window should come up, split in two, for now we’ll focus on the right side half, user preference settings. Here is a full list of my current settings:

{
"caret_extra_width": 2,
"caret_style": "phase",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme-Palenight.tmTheme",
"fade_fold_buttons": false,
"folder_exclude_patterns":
[
"MyReactProject/node_modules",
"CoolReactApp/node_modules"
],
"font_face": "Operator Mono",
"font_size": 21,
"highlight_line": true,
"line_padding_bottom": 6,
"line_padding_top": 6,
"material_theme_accent_pink": true,
"material_theme_accent_scrollbars": true,
"material_theme_appbar_red": true,
"material_theme_big_fileicons": true,
"material_theme_bullet_tree_indicator": true,
"material_theme_compact_sidebar": true,
"material_theme_contrast_mode": true,
"material_theme_panel_separator": true,
"material_theme_small_statusbar": true,
"material_theme_small_tab": true,
"material_theme_tabs_separator": true,
"material_theme_tree_headings": true,
"theme": "Material-Theme-Palenight.sublime-theme",
"wide_caret": true,
"word_wrap": true
}

Up next I’ll highlight the most relevant settings:

  • Folder Exclude Patterns
"folder_exclude_patterns":
[
"projectFolder/node_modules",
"projectNumber2Folder/node_modules"
]

I discovered that while working with React, sometimes I will miss click and open the node_modules folder where all the npm dependencies are stored, it would slow down my laptop, and you rarely ever go in there anyways, so what this setting does is that ignores whatever directory you type into it, in this case node_modules.

Whenever you create a new React project, just add the root folder name to this array followed by /node_modules, this would remove said folder from your ST3 explorer(think of it as a .gitignore).

  • Material Theme Appbar Color
"material_theme_appbar_red": true

I don’t know if you have noticed by now, but you can change every other color from the material theme settings menu, but not the bright top appbar, well this setting does that, in order to change the color, you literally just have to change the color after the last underscore from ‘red’ to any of the following supported colors:

"material_theme_appbar_lime": true,
"material_theme_appbar_orange": true,
"material_theme_appbar_purple": true,
"material_theme_appbar_red": true,
"material_theme_appbar_yellow": true,
"material_theme_appbar_indigo": true,
"material_theme_appbar_pink": true,
"material_theme_appbar_blue": true,
"material_theme_appbar_cyan": true,
"material_theme_appbar_charcoal": true

Operator Mono — Font

  • Font Face: Operator Mono
"font_face": "Operator Mono"
How Operator Mono looks on my ST3 setup.

his one setting is special, Operator Mono is more than an awesome looking font but a rather expensive one, there’s articles out there that go deeper into why this font is so special, tl;dr: The family’s distinctive italics make it easier to spot the names of attributes. If you’re not willing to pay as much as $150-$600 for a font, you can use Fira Code which can be downloaded here, it has some really cool looking ligatures and although ST3 does not support ligatures it is still a very good looking font (which I used before getting Operator Mono). So If you’re down for buying it follow along as I set it up for ST3 (if not, just skip until the next part of the guide).

So out of the box the italics do not work with ST3, we have to tweak the theme settings in order to get them working, this is why we installed the Package Resource Viewer package, well go to Package Control main menu ( cmd + shift + p for OS X or ctrl + shift + p for Windows & Linux) and we type browse for PackageResourceViewer: Open Resource on the new menu that will appear we look for Material Theme we select it and then go to theschemes/ directory and at last we select Material-Theme-Palenight.tmTheme. So full path to get here:

PackageResourceViewer: Open Resource > Material Theme > schemes/ > Material-Theme-Palenight.tmTheme

If you have selected another color scheme (from either Material Theme or another provider (default ST3 ones, or one that you found and installed), you have to go to that color schemes .tmTtheme file with PackageResourceViewer).

Now we scroll to the very bottom of the file and if you scroll up a bit you may see that there’s this pattern of blocks of settings being inclosed in the <dict> </dict> tags, well, we will past our own <dict> block of rules in order to get Operator Mono working, scroll to the very bottom, and after the very last </dict> closing tag you can see, paste the following:

<!--  Operator Tweaks -->
<dict>
<key>name</key>
<string>Italic HTML attribute names</string>
<key>scope</key>
<string>entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.event.html, entity.other.attribute-name.id.html, entity.other.attribute-name.class.html,
, entity.other.attribute-name.tag.jade, constant.other.symbol.ruby</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#ff9e6a</string>
<key>fontStyle</key>
<string>italic</string>
</dict>
</dict>
<!-- End Operator Tweaks -->

Be advised, if you chose to use another color scheme (wheter it’s from Material Theme or not), you have to paste this <dict></dict> block into those themes .tmTheme files in order to get Operator Mono working (Operator Mono italics will only work on the color schemes where you have pasted this snipped into its .tmTheme file).

The string with the hex <string>#ff9e6a</string> is the color of the italicized attributes, feel free to pick the one you like the most, I went with a shade of faded orange.

Customizing the Color Scheme — God Mode

ow that we’re here on the Material Theme Palenight (or whatever color scheme you’re using) theme file, we could tweak our color scheme even further, here are my current customizations [just focus on the HEX VALUES](look for the property names (inclosed in <key></key> tags) and substitute the hex values that follow them (inclosed in <string></string> tags):

Take the arrows followed by caps as a title (if you are to paste this verbatim into your file delete the arrow lines, they are not syntax).

--->LINE HIGHLIGHT<key>lineHighlight</key>
<string>#00000030</string>
--->VARIABLE<dict>
<key>name</key>
<string>Variable</string>
<key>scope</key>
<string>variable, string constant.other.placeholder</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#5FB3B3</string>
</dict>
</dict>
--->FOREGROUND (this changes the following: {}, (), [] ) <key>foreground</key>
<string>#959DCB</string>
--->LANGUAGE METHODS <dict>
<key>name</key>
<string>Language methods</string>
<key>scope</key>
<string>variable.language</string>
<key>settings</key>
<dict>
<key>fontStyle</key>
<string>italic</string>
<key>foreground</key>
<string>#FFCB6B</string>
</dict>
</dict>
--->CLASS SUPPORT
<dict>
<key>name</key>
<string>Class, Support</string>
<key>scope</key>
<string>entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#fffa6a</string>
</dict>
</dict>
--->CARET <key>caret</key>
<string>#FFCC00</string>
--->OPERATOR, MISC <dict>
<key>name</key>
<string>Operator, Misc</string>
<key>scope</key>
<string>keyword.operator, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#82d7ff</string>
</dict>
</dict>

These are the elements you could be interested the most in customizing, but feel free to peek around the other definitions and tweak them until they fit you (when you change a value and save the file, the changes are made effective right away across all ST3 even on the currently open windows and files, which makes the whole test, trial and error process much faster).

Time for some keybindings

We’ll head to the Key Bindings file, the way to go (on OS X) is Sublime Text > Preferences > Key Bindings

A new window will open, and as usual it is a split screen one, on the left side are all the current keybindings available on your ST3 setup, you can change default values from there, but we’ll focus on the right side, there’s basically only 2 custom key bindings I got defined, one is for toggling the explorer side bar and the other one (although in 4 statements) is for defining the indentation for the current file, my user defined keymap file (right side) looks like this:

[
{ "keys": ["super+k"], "command": "toggle_side_bar" },
{ "keys": ["super+ctrl+1"], "command": "set_setting", "args": {"setting": "tab_size", "value": 1} },
{ "keys": ["super+ctrl+2"], "command": "set_setting", "args": {"setting": "tab_size", "value": 2} },
{ "keys": ["super+ctrl+3"], "command": "set_setting", "args": {"setting": "tab_size", "value": 3} },
{ "keys": ["super+ctrl+4"], "command": "set_setting", "args": {"setting": "tab_size", "value": 4} }
]

The super key on OS X is command, so command + k toggles the explorer sidebar, and command + ctrl + {1,2,3,4} gives indentation according to the value selected, where 1 is 1 space bar per tab, and 4 is 4 spaces per tab, you can change the values and the keys as you please.

If you are on Windows or Linux look up the references for the key names accepted by ST3.

Code Snippets

ome time ago I realized how often I had to create components, and well typing the bare minimum to at least get it working and wire it to the router, or another component, etc. At first it was like no biggie, it’s around 12 lines of code, but it got old pretty fast, and after some time it felt tortuous, so I re-discovered the beauty of code snippets, in this case, how to get the whole bare minimum boilerplate by just typing doreact.

Tools > Developer > New Snippet

Head over to Tools > Developer > New Snippet, and as usual a new ST3 window will open with the basic snippet template, now I’m not going to go deep into snippet syntax, just what we need to get our magical doreact working, substitute the content of the template snippet for this:

<snippet>
<content><![CDATA[
import React from 'react';
export default class ${1:PLACEHOLDER} extends React.Component{
render(){
return(
<div>
<h1>I'm the ${2:PLACEHOLDER} component</h1>
</div>
);
}
}
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<!-- <tabTrigger>hello</tabTrigger> -->
<tabTrigger>doreact</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>

Breaking down the important parts:

  • What’s inside the CDATA array is what is going to be outputted after the snippet is executed (feel free to change it to whatever template you feel like suits you the best).
  • The ${1:PLACEHOLDER} is used by ST3 to allow you to tab between these ‘markers’ after executing the code snippet, (making it easy to name your component and add a quick reference in the <h1> tags) you can change ‘PLACEHOLDER’ to whatever text you feel like having there at first, it doesn’t really matter, if you want to add more markers, just remember to keep the numbering unique, so if you were to add a third one it would be: ${3:MYMARKER}.
  • In between the <TabTrigger> tags is defined the keyword that should be typed in order to invoke this code snippet and for it to be triggered via tab(well, what did you expect? the name was pretty self explanatory) in my case is the doreact magic word, but it can be whatever you want for it to be from ‘make_react’ to ‘withThisTabHitIRequestSomeReact’.
  • The last part of the configuration is a scope, where the snippet can only be suggested in the autocompletion if the file type where is being typed matches the scope language, I personally don’t mind doreact popping every now and then on every other file so I did not defined a scope.
doreact code snippet doing it’s magic.

Nifty little tricks

So when you create a JS file, by default the ES6 of your react files if not using babel it will look something like this:

ES6 code on ES5 syntax

So whenever you create a new one or open an already existing one because of the extension .js it will be on vanilla JavaScript syntax. There’s two ways of fixing this, down at the bottom right after opening the file it says ‘JavaScript’ you can click it and browse for Babel > JavaScript (Babel), or go to Package Control main menu ( cmd + shift + p ) and type babel the option selected by the time you’re done writing should be: Set Syntax: JavaScript (Babel) hit enter and voilá your file is now on ES6 syntax.


To create window groups on OS X you can do so by pressing cmd + option + {1,2,3,4,5} to get vertically split panels in accordance to the number chose, 5 being a 4 sliced screen, now to get horizontal split the keybinding is cmd + option + shift + {1,2,3,4} same thing, but horizontal.

Well it has been fun, but now you got all of my Sublime Text 3 setup, if you have any doubts or concerns regarding this guide (or not necessarily about this guide or if you just got random thoughts you feel like sharing), feel free to reach me out on Twitter!

Eduardo Martínez

Written by

Front-end web developer (ReactJS+Redux), spare time filmmaker, world-renowned adventurer & lemon pie connoisseur, seventh day adventist.