A beginner’s guide to beautifying Sublime Text

When presented with options, I generally pick one that looks best at the moment and never look back. I will commit fully to my decision and nurture it as best I can. This allows me to avoid laying awake at night with a serious case of FOMO. I was introduced to Sublime Text last summer and it quickly became my favorite text editor, because it was my first. I cannot articulate why Sublime Text is awesome because I cannot compare it to any other popular editors unless you count the Flatiron Learn IDE which we all know struggles to load and keep up with the amount of git repo’s we’ve forked, but I digress. I have grown very fond of Sublime Text, especially due to some packages a friend installed for me. Today I will walk through how to upgrade Sublime Text from this:


to this:

Wow, it’s gorgeous.

Step One: Upgrade to Sublime Text 3
If you are on Sublime Text 2, un-install it and install Sublime Text 3 here.
It is currently in Beta but I have had no problems so far. One of the packages I instruct to install in this tutorial is only available on ST3, so if you aren’t comfortable upgrading to a beta program then sorryboutcha.

Step Two: Install Sublime Text Package Manager
Hopefully you are familiar with a few package managers like NPM, Bundler, Bower, and Homebrew. Package Managers are awesome because you only need to know the package name to install it to the proper directory, rather than navigating to the package website and then installing it to the correct directory on your computer. Sublime Text has its own package manager that we can use to install packages to do super cool things! Click the Install Now button on this site. Once you are installed and set up, restart Sublime Text.

Step Three: Install the Seti UI package
Time to enhance the Side Bar! Do you like boring white and black folder and file icons? They’re okay if you don’t know any better. But if you took notice of my picture up above then you should be aching to see those red rubies signifying your ruby files and the orange HTML5 shield next to your html files. Actually I didn’t even show you the rubies yet — but it’s beautiful. To open Package Control in Sublime Text 3, type ctrl+shift+p (Windows/Linux) or cmd+shift+p(OS). Type “Package Control: Install Package”. A list of all available packages will appear within a few moments. Type “Seti UI” and click on it when it appears. The package will install automatically. Restart Sublime Text and then open a project. Your files should have pretty icons next to them based on the file type.

Look at those rubies

Step Four: Install a Color Theme
Open Package Control: Install Package again but this time find ColorSublime. Download and restart Sublime Text. Open Package Control again but this type type “ColorSublime:”. There should be 2 options — Browse Themes and Install Theme. Browse Themes will open a browser page to their website to view all the color theme options. Clicking on ‘Install Theme’ will bring up a list of all the themes. Use the up/down arrows to scroll through the theme names and preview what they will look like in your Sublime Text editor real-time. Make sure you have a file up in your view to see how it changes with each theme. I’m currently using Adventure Time theme and enjoying it.

Step Five: Install Color Highlighter
I like experimenting with different colors when building websites and got sick of looking at hex codes without knowing what color they represent. Then I discovered the Color Highlighter package. Go through the previous steps to install a Sublime Text package — you should be able to do it without instruction now. Once it’s installed, open a HTML or CSS file with colors and you will notice every color reference is underlined with that color. Click on it and the entire string will be highlighted with its color.

That’s it!
Hope this helped add some beauty to your coding life if you are a beginner. Please let me know if you ran into issues going through these steps or if you have some additional Sublime Text packages to recommend.

Show your support

Clapping shows how much you appreciated Kelsey Huse’s story.