Simple Visual Enhancements for Better Coding in Sublime Text
Sublime Text offers thousands of extensions and settings to make a personalized code editor available for everyone. Right now, I’m going to show you some settings, plugins, themes, and color schemes to help make the coding experience more visually appealing. This won't just make your screen prettier, it'll make you a better coder!
Sublime Text comes pre-built with some great features to visually alter your coding experience, however, some of these settings are not turned on by default. Here are a few that I couldn’t live without.
Note: In order to edit your Sublime Text settings file, open it by going Sublime Text 2 > Preferences > Settings - Default and then selecting the appropriate item.
Find the settings you'd like to change, then add them to your User Settings to prevent them being overwritten when upgrading Sublime Text.
Take a look at Installation and Base Settings for more on managing Sublime Text settings.
Fonts and Spacing
Choosing the right font face and spacing is one of the most personal ways to customize your code. Firstly, choose a suitable coding font face, preferably a monospaced font. Here are a few to look into:
Once you've chosen a font, make sure it's installed on your system, add it to your settings, and adjust the size and spacing with the following options:
This setting draws out the line the cursor is on with a different color (depending on your color scheme). Seeing your current line helps you focus on the current task while typing, easily navigate from line to line, and quickly find your spot when returning from a different program.
To bring more focus to the unsaved files in the current project, this setting will highlight the tabs of the modified files inside a window.
Did you know Sublime Text can fold and unfold chunks of code? I did, but I always forget that feature is available. If you turn on this setting, it will leave the folding tag to the right instead hiding it.
Horizontal scrolling can be a pain. With the word wrap setting activated, your text flows to the current screen size and prevents having to horizontally scroll.
There are some great settings available to bring some stronger visual elements to the side bar, here they are:
Show Open Files in the Side Bar
Oddly, this option is not set up in the preferences file. To show open files on the top of your side bar, go to:
View → Side Bar → Show Open Files
Align the Side Bar
This is not so much a setting, really more of a tip. Just like in a spreadsheet, you can double-click the boundary between the side bar and the content to transform the side bar to the width of its content.
Plugins are extremely helpful in bringing extra features to Sublime Text, I highly recommend using Package Control to manage your plugins.
Bracket highlighter is a plugin that highlights tags and brackets (go figure!) But seriously, it is a powerful tool that shows you the start and end point of every section of code you are inside. The bracket type is displayed in the sidebar and has a different icon for the different types of characters and elements.
This is one of my personal favorites. Git gutter is a simple plugin that displays an icon in the gutter area to indicate inserted, modified or deleted lines in comparison to your git project.
This plugin displays inline lint highlighting. With their extensive documentation and long list of linters, this plugin is a great solutions for making sure you code is error free.
Themes and Color Schemes
One of the biggest ways to customize Sublime Text and make it your own is with themes and color schemes. There are currently hundreds of options available and more are introduced every week. Here are a few themes and color schemes worth looking into.
Soda has become the most popular theme and the best example of a customized theme in the Sublime Text community. Many themes have been created by forking this project. Soda offers extra settings, retina ready graphics, and dark and light UIs
If you are a fan of the flat trend, then Flatland is a good choice. It simplifies all the visual elements and lets you specify a number of other options, such as the style of tabs and sidebar.
My personal favorite right now and currently trending on Github, Spacegray has a unique color palette and a hyperminimal UI.
Color Scheme: Solarized
The well known Solarized project is available for Sublime Text. It is a color project labeled as “precision colors for machines and people” with a unique color theory behind its creation.
Color Scheme: Base16
Base16 is another popular color scheme with many options (I’m currently using it).
There is so much more to cover! Don't forget, it’s important to evaluate all the different elements of Sublime Text when making it your own. Don’t take my word for it, go search Github or Package Control, try some new settings and see if they work for you. And revisit your setup every so often and see if anything new can help improve your coding experience.
What settings, fonts, plugins, themes, or color schemes have you found make a better coding experience for you? Let us know in the comments, and share this with someone who you think might need it!