Customize Sublime text editor

February 12, 2014

Last year at the Fronteers conference in Amsterdam, Addy Osmani used Sublime Text Editor in his presentation. The editor looked really cool. Right after the conference I installed Sublime and looked around for packages which would make my life as front end developer easier and make editing more fun. After a month of playing with Sublime, I decided to leave TextMate (used it since 2005) and use Sublime as my new main editor.

In this article I'll give you tips to configure Sublime to your needs, interesting packages, how to customize a theme and links to useful documentation. Let's get started.

Install Sublime Text Editor and packages

The official page of Sublime Text Editor is: http://www.sublimetext.com, you can find the downloads for OS X, Windows and Linux on: http://www.sublimetext.com/2. To make the most out of Sublime, the first package you want to install is the Package Control Manager. With this tool you can easily install useful packages. Follow the installation described on: http://wbond.net/sublime_packages/package_control/installation. The installation is really easy.

When the Package Control is installed, you can start installing packages you would like to use. Open Sublime and type in the following command:

Sublime Package manager interface
Installing packages

I made a list of packages what makes programming more fun and my life as front end developer easier:

If you don't work with LESS or Sass than you could use the following tool to create css prefixes and to minify your css/js:

Sublime customization

You can customize Sublime to your needs, like translating tab size to spaces, font size, line highlight etc. These customizations are stored in the user settings:

Here's a list of useful settings. You can check the default_settings for the complete list you wish to override.

    
    {
      "font_size": 11,
      "bold_folder_labels":true,
      "caret_style": "phase", // it will fade in and out rather than blink.
      "highlight_line": true,
      "ignored_packages":
      [
      "Vintage"
      ],
      "match_tags": true,
      // scroll_past_end is already set in default settings,
      // but on OS X, this value is overridden in the platform specific settings.
      // That's why you need to place this line in your user settings.
      "scroll_past_end": true,
      "translate_tabs_to_spaces":true,
      "trim_trailing_white_space_on_save": true
    }
    
    

Sublime Key commands

Sublime has a lot of cool and very handy key commands. The ones I use most are (on OS X):

Find file with class name in Sublime.
Find file with class name in Sublime.

Open files via the terminal

I mostly use the terminal to navigate to folders and to open it in sublime. To use an easy command for it I created a symbolic link. In OS X the Application is in "/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl". If it is in another directory use that path in step 2. Open your terminal and type in the following commands:

    
    $ cd /usr/local/bin
    $ ln -s /Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl sublime
    
    

That's it. You can now use the command "sublime" in your terminal.

Find your theme

Sublime comes with a couple of standard themes. If none of the default themes matches your personal color styles, you can find a lot of other themes on the internet. I use the Github version from Dayle Rees Color Schemes and made some changes in it. How did I do that?

I hope this article is meaningful for the people who want to start using Sublime. You can evaluate Sublime for free, and when you are enthusiastic about it, a personal license is only $80.