Customizing Sublime Text Editor for Faster Development

Welcome back to our second episode discussing Sublime Text Editor and how you can customize it depending on your preferences.

Sublime Interface

Blue Light Effect

Given our job as programmers, we keep staring at the screen more than 8 hours per day. The constant exposure to the screen’s bright (blue) light hurts the human eyes including some symptoms:

  • Slightly blurry vision
  • Difficulty focusing
  • Your eyes feel dry, irritated or tired
  • Headache
  • May cause permanent eye damage

Due to the previous reasons, I recommend using light text on dark background with huge contrast to increase focus, reading speed and avoid any eye strain symptoms.

Sublime Theme

Currently I am using a dark theme for Sublime called Seti_UI, you could download it easily from the package control panel as previously mentioned in our last episode and type in Seti_UI and then install it as mentioned in the User Preferences section by adding "theme": "Seti.sublime-theme",. You can customize the theme by using the theme options from the Seti_UI package documentation. You can see an example of the theme in Figure 1.

Set UI Theme
Figure 1: Set UI Theme

Syntax Highlighting

As for the code syntax highlighting, I am using a syntax color scheme called Brogrammer (yes with a B not a P 😀 ), where the the syntax provides large contrast between the light (white) text and dark (black) contrast. It was ranked one of the best themes of the year 2014 as mentioned in several posts including The Best Sublime Text 3 Themes of 2014. As shown in Figure 2, also, the bright red color of the keywords enhances the code readability, in addition to the highlighting the String in greenish color.

Brogrammer Syntax Highlighting
Figure 2: Brogrammer Syntax Highlighting

Development Preferences

Now for the coding part itself ;), as most of my development is using Ruby on Rails, I am using the setting of translating all the tabs into spaces and one tab press is equivalent to 2 spaces according to the Ruby and Rails community Style guides. For HAML, I am also using 2 spaces tab for correct indentation of the code fragments to evade any indentation error as HAML is sensitive to spaces. In addition, following the convention of adding an extra empty line and the end of each file on save is facilitated through a global configuration, and removing any trailing spaces in any line across the opened file on save is done automatically.

User Preferences File

Based on my personal experience and after loads of research and customizations, I am going to share my own personal user preferences file. Starting from Sublime text version 3, the users won’t be able to edit the already shipped sublime preferences; however, they can override them in their user preferences to avoid any loss of customization when upgrading sublime.
You can always check your customized user preferences by navigating to your top menu bar on OSX:

  1. Click on Sublime Text next to the Apple menu
  2. Hover on Preferences and choose Settings - User
  3. You will view all your preferences as a JSON object as follows
     {   //Theme customization 
         "theme": "Seti.sublime-theme",
         "Seti_SB_bright": true,
         "Seti_bold_slctdfile_labels": true,
         "Seti_no_scroll_icons": true,
         "Seti_orange_button": true,
         "Seti_orange_label": true,
         "Seti_pad_3": true,
         "Seti_sb_tree_miny": true,
         "Seti_tabs_small": true,
         "itg_sidebar_tree_small": true,
         "itg_small_tabs": true,
         //Code highlighting scheme
         "color_scheme": "Packages/Theme - Brogrammer/brogrammer.tmTheme",
         //Spell Checker use English-GB dictionary
         "dictionary": "Packages/Language - English/en_GB.dic",
         //Crucial Development Preferences 
         "ensure_newline_at_eof_on_save": true,
         "tab_size": 2,
         "translate_tabs_to_spaces": true
         // General UI customization
         "font_size": 14.7,
         //Modified Sublime Interaction
         "overlay_scroll_bars": "enabled",
         "preview_on_click": true,
         "highlight_line": true,
         "highlight_modified_tabs": true,
  4. After editing your preferences, click CMD\CRTL + s to save.
  5. In the optimal cases, you can restart sublime in order to make sure that all the configurations are loaded for the new theme and color scheme to take effect. Otherwise, the configurations are loaded after saving the preferences.

By reaching this point, we conclude the series of customizing Sublime Text Editor for faster development.