My Sublime Text setup

I use Sublime Text everyday as my text editor of choice. I have used several over the years including Coda, Atom and even DreamWeaver. Atom I felt was the closest competitor to Sublime Text, but I did not like things like the 2 GB install.

The main reason I keep using Sublime Text is speed. It opens quickly and pretty much every other text editor I have used doesn’t.

A second reason is that I use both Mac and Windows, so can share the same settings between both.

A third is customisation. Initially this meant nothing to me, but I’ve slowly learnt to tweak various things to help me work.

Essential packages

Package Control

The first thing you should install. It allows you add install other packages including themes and colour schemes. Use the website useful for more information on each package. Within Sublime Text itself you can only see the title.

Color Highlighter

Displays the actual colour of a colour value. Works with everything from hexadecimal colours to RGBa.

SASS variables that are colours also inherit, but only within the same file. If you use the variable in another file the highlighting does nothing.

The highlighting is very handy if you ever have to work with someone else’s code.

SideBarEnancements

Adds several functions when you right-click items in the side bar. But only when you use the Projects feature.

SASS

A syntax highlighter for, well, SASS. I was using the SCSS syntax highlighter as recommended in the CSS Tricks article Sublime Text for Front-end Developers, but I could not tell much difference between the two.

I think at one time the SASS syntax highlighter did not support .scss files, but as far as I can tell it does.

Other packages

ApacheConf.tmLanguage

Adds syntax highlighting for Apache .htaccess files.

WordCount

Adds word count and character count info in the footer bar. It also works contextually, so if you highlight a block of text and check the character count.

CodeKit Commands

Mac OSX only. This package does two things:

  1. Opens CodeKit when Sublime Text opens
  2. Pauses CodeKit automatically if I switch to another application vis-a-vis Git

I didn’t have many problems using CodeKit and Git before, but you can get conflicts. This automates everything so it will never be an issue.

Markdown Preview

I use this at work as I have no other software that can interpret Markdown. This package parses Markdown into HTML and displays in the browser.

Settings

I have grown to really like that settings in Sublime Text are just text files. Once you know where to look maintaining precise settings is very useful. For example this is my current settings:

    {
     "bold_folder_labels": "true",
     "color_scheme": "Packages/User/Espresso Soda.tmTheme",
        "detect_indentation": false,
        "draw_white_space": "all",
        "font_size": 15,
        "highlight_line": "true",
     "highlight_modified_tabs": true,
        "ignored_packages":
     [
     "CSS",
        "Markdown",
     "Vintage"
     ],
        "indent_to_bracket": true,
        "indent_guide_options":
     [
         "draw_normal",
            "draw_active"
     ],
        "line_padding_bottom": 5,
     "line_padding_top": 2,
        "tab_size": 2,
        "theme": "Soda Light 3.sublime-theme",
        "trim_trailing_white_space_on_save": true,
        "word_wrap": "true"
 }

Most settings are self-contained, but some work in tandem.

I would recommend adding more padding. I found the default to be too small, but obviously it is a personal preference.

The "detect_indentation" and "indent_to_bracket" help force documents to indent with two spaces and not tabs.

With indent_guide_options I added draw_active to highlight the parent of the element you have selected. If you nest several elements being able to see where that element closes is really useful. The effect is admittedly too subtle when also using the Espresso colour scheme, but at least it is there.

I do sit on the fence when it comes to spaces versus tabs for indentation. I have noticed formatting issues in Markdown files when using spaces. But this in part because I also use iA Writer.

Keybindings

I only use this for Markdown Preview.

[
     { "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} }
    ]

Themes and Colour Schemes

I still find themes and colour schemes a little confusing as there is some cross over in what each of these do.

A theme changes the appearance of the application. Things like the side bar, the shape of tabs and the find and replace bar.

Colour Schemes change the appearance of files. Essentially the syntax highlighting.

The two are independent; however changing a light theme to a dark theme will often change the colour scheme as well.

I prefer light themes and light colour schemes, so I use the popular Soda theme and their Espresso Soda colour scheme.

Something to note is that installing the Soda theme does not install the colour scheme. You have to download them separately then copy and paste into the Packages/User folder.

The theme is great, but the colour scheme isn’t perfect. Light colour schemes tend to have too little contrast, or be garish.

Projects

A top feature that saves settings for each project you work on. What I like is that I can effectively bookmark folders to appear in the sidebar. It doesn’t sound like much, but in practice it is very useful.

When using projects Sublime Text actually creates two files:

  1. sublime-project which contains the project settings
  2. sublime-workspace which contains user data such as which file are currently open. This file does not need editing, it works a bit like a temp file

You can edit the sublime-project file and do some handy things like hide folders and files based on regex patterns. For example you can hide the .sass-cache folder or the sublime-workspace file.