Advertisement
  1. Web Design
  2. UX/UI
  3. Web Typography

Simple Visual Enhancements for Better Coding in Sublime Text

Scroll to top
Read Time: 5 min

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!


Settings

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.

sublime-settingssublime-settingssublime-settings

Find the settings you'd like to change, then add them to your User Settings to prevent them being overwritten when upgrading Sublime Text.

sublime-settings-2sublime-settings-2sublime-settings-2

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:

“font_face”: “Inconsolata";
"font_size": 18;
"line_padding_bottom": 1,
"line_padding_top": 1,

highlight_line

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.

"highlight_line": true,

highlight_modified_tabs

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.

"highlight_modified_tabs": true,

fade_fold_buttons

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.

"fade_fold_buttons": false,

word_wrap

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.
"word_wrap": true,

bold_folder_labels

There are some great settings available to bring some stronger visual elements to the side bar, here they are:
"bold_folder_labels": true,

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.

sublime-visual-sidebarsublime-visual-sidebarsublime-visual-sidebar

Plugins

Plugins are extremely helpful in bringing extra features to Sublime Text, I highly recommend using Package Control to manage your plugins.

BracketHighlighter

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.

sublime-visual-brackethighlighter-2sublime-visual-brackethighlighter-2sublime-visual-brackethighlighter-2

Git Gutter

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.

sublime-visual-gitgutter-2sublime-visual-gitgutter-2sublime-visual-gitgutter-2

SublimeLinter

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.

sublime-visual-sublimelinter-2sublime-visual-sublimelinter-2sublime-visual-sublimelinter-2

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.

Theme: Soda

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

sublime-visual-soda-2sublime-visual-soda-2sublime-visual-soda-2

Theme: Flatland

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.

Theme: Spacegray

My personal favorite right now and currently trending on Github, Spacegray has a unique color palette and a hyperminimal UI.

sublime-visual-spacegraysublime-visual-spacegraysublime-visual-spacegray

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).


Conclusion

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!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.