Skip to content
⚠️ INACTIVE: THIS IS NO LONGER BEING ACTIVELY MAINTAINED.
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
User
README.md

README.md

Sublime Text 2 Setup/Workflow

My favorite text editor right now is Sublime Text 2. While it does have its limitations, it satisfies most of my needs as a (heavily front-end) web designer/developer.

This project contains a collection of instructions, suggestions, and settings that outline my current Sublime Text 2 workflow, and how you can achieve a similar configuration.

Table of contents

  1. Install Sublime Text 2

  2. (Optional) Command Line Utility

  3. Install Package Control

  4. Themes

    i. Installing a custom theme

  5. Color Schemes

    i. Installing a color scheme

  6. Settings

    i. Preferences

    ii. Key Bindings

  7. Packages

    i. Advanced New File

    ii. Alignment

    iii. BracketHighlighter

    iv. Browser Refresh

    v. Clipboard History

    vi. Coffeescript

    vii. CSS Comb

    viii. Detect Syntax

    ix. EditorConfig

    x. Emmet (previously ZenCoding)

    xi. Emmet CSS Snippets

    xii. Goto Documentation

    xiii. Hex-to-HSL

    xiv. Hex-to-RGBA

    xv. HTML5

    xvi. jQuery

    xvii. JsFormat

    xviii. LESS

    xix. MarkdownEditing

    xx. NetTuts+ Fetch

    xxi. Sass

    xxii. SFTP

    xxiii. Sidebar Enhancements

  8. Use Dropbox? Sync your ST2 setup across multiple devices

    i. Sync up your ST2 projects

Install Sublime Text 2

First thing's first — you've gotta install the piece. Head on over to http://www.sublimetext.com/dev, download, and install it on your machine.

(Optional) Command Line Utility

    sublime [arguments] [files]       - edit the given files
or: sublime [arguments] [directories] - open the given directories
or: sublime [arguments]               - edit stdin

If you want to be able to open files with ST2 directly from your terminal window using a custom command (something I do quite often), then you will want to follow these instructions.

Install Package Control

Next, you'll definitely want to install Package Control, a nifty ST2 plugin that lets you manage ST2 packages directly from ST2's Command Palette (Cmd+Shift+P for Mac, Ctrl+Shift+P for Windows/Linux).

To install, bring up the ST2 console (Ctrl + `), paste in the following code, and hit return:

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

Themes

It's important to note that ST2 "Themes" change the actual look and feel of the software itself. They are not to be confused with "Color Schemes" (explained in the next section), which alter the look and feel of your code within the editor.

The default look of ST2 is really nice, but I wanted a bit more. I've installed the fantastic Spacegray Theme by @kkga, and I am very happy with it. I am currently using the "Eighties" variation.

Installing a custom theme

  1. Press the Cmd+Shift+P (or Ctrl+Shift+P for Windows/Linux) key combination, type "install" into the Command Palette, and select the "Package Control: Install Package" option from the list.

  2. Type "Spacegray" to narrow down the list, and select the "Theme - Spacegray" package (click with mouse or press the Enter key) to install it.

  3. To activate the theme, open your User Settings file in Sublime Text 2 -> Preferences -> Settings - User, and add the following code (change "Dark" to "Light" if you prefer that one instead):

    {
        "theme": "Spacegray Eighties.sublime-theme"
    }
    
  4. Save your User Settings file, and re-open ST2 to see the changes take effect.

If you aren't a fan of the Spacegray theme, there are plenty of other options out there. A lot of people really enjoy the Soda Theme by Ian Hill, too. I used it for a long time before switching to Spacegray.

Color Schemes

ST2 Color Schemes alter the look and feel of your code, adding syntax highlighting and other goodies. Adding color makes it easier for humans to read and skim through code.

In case you didn't know, ST2 is compatible with TextMate themes.

I am partial to the base16 eighties theme, which I found here.

Installing a color scheme

To install a color scheme, simply go to Sublime Text 2 -> Preferences -> Browse Packages, and drop your .tmTheme files into the "Color Scheme - Default" folder.

To activate the color scheme, just select it from the Sublime Text 2 -> Preferences -> Color Scheme folder.

Boom. Done.

Settings

One of the beautiful things about ST2 is the flexibility of its settings. You can tweak just about every little aspect of the software to get it working exactly how you want it.

Personally, I am happy with a lot of the default settings that ST2 provides, so my User Settings file is fairly lightweight.

Preferences

  1. Open up the Default Settings file and you'll see all the preferences you can tweak. This file can be found by going to Sublime Text 2 -> Preferences -> Settings - Default.

  2. Also open up the User Settings file, which can be found by going to Sublime Text 2 -> Preferences -> Settings - User.

Below is what my current User Settings Preferences.sublime-settings - User file looks like:

{
    "auto_complete_commit_on_tab": true,
    "bold_folder_labels": true,
    "caret_style": "phase",
    "close_windows_when_empty": false,
    "color_scheme": "Packages/Theme - Spacegray/base16-ocean.dark.tmTheme",
    "detect_slow_plugins": false,
    "dictionary": "Packages/Language - English/en_US.dic",
    "draw_white_space": "all",
    "ensure_newline_at_eof_on_save": true,
    "find_selected_text": true,
    "fold_buttons": false,
    "font_face": "Monaco",
    "font_options":
    [
        "subpixel_antialias"
    ],
    "font_size": 14.0,
    "highlight_line": true,
    "highlight_modified_tabs": true,
    "hot_exit": false,
    "ignored_packages":
    [
        "Vintage",
        "AdvancedNewFile"
    ],
    "indent_guide_options":
    [
        "draw_active"
    ],
    "line_padding_bottom": 2,
    "line_padding_top": 2,
    "open_files_in_new_window": false,
    "remember_open_files": false,
    "rulers":
    [
        72,
        79
    ],
    "spell_check": true,
    "tab_completion": true,
    "tab_size": 4,
    "theme": "Spacegray Eighties.sublime-theme",
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": true,
    "wide_caret": true,
    "word_wrap": true
}

Since I work off a 27" iMac at the office, and a 15" Macbook Pro at home, I find that the Monaco font at size 14 provides a nice, readable experience on both machines.

The tab_size and translate_tabs_to_spaces options are already "4" and "false" in the Default Settings file, but I added them here because they are some of the more commonly altered options. Also, depending on the project I'm working on, I may have to change those settings on the fly so I don't screw up the spacing for anyone I'm working with.

Key Bindings (Shortcuts)

To help speed up your workflow, ST2 provides a ton of built-in key bindings, or keyboard shortcuts. As you've probably guessed, you can also create your own custom keyboard shortcuts.

  1. Open up the Default Key Bindings file and you'll see all the available keyboard shortcuts. This file can be found by going to Sublime Text 2 -> Preferences -> Key Bindings - Default.
  2. Also open up the User Key Bindings file, which can be found by going to Sublime Text 2 -> Preferences -> Key Bindings - User.

Below is what my current User Key Bindings Default (OSX).sublime-keymap - User file looks like:

[
    // Refresh settings & folder list
    { "keys": ["super+ctrl+r"], "command": "settings_refresh" },
    { "keys": ["alt+ctrl+r"], "command": "refresh_folder_list" },

    // Toggle sidebar visibility
    { "keys": ["ctrl+s"], "command": "toggle_side_bar" },

    // Convert spaces to tabs
    {
        "keys": ["ctrl+shift+x"], "command": "expand_tabs", "args": {
            "set_translate_tabs": true
        }
    },


    // Package - Advanced New File
    { "keys": ["super+alt+n"], "command": "advanced_new_file" },
    { "keys": ["shift+super+alt+n"], "command": "advanced_new_file", "args": { "is_python": true } },

    // Package - Browser Refresh
    {
        "keys": ["super+shift+r"], "command": "browser_refresh", "args": {
            "auto_save": true,
            "delay": 0.0,
            "activate_browser": true,
            "browser_name" : "Google Chrome"
        }
    },

    // Package - Goto Documentation
    { "keys": ["ctrl+shift+h"], "command": "goto_documentation" },

    // Package - Hex-to-HSL, convert hex values to HSL
    { "keys": ["super+shift+h"], "command": "hex_to_hsl" },

    // Package - Hex-to-RGBa, convert hex values to RGBa
    { "keys": ["super+shift+r"], "command": "hex_to_rgba" },

    // Package - SFTP, setup/edit/browse server commands
    { "keys": ["ctrl+shift+e"], "command": "sftp_edit_server" },
    { "keys": ["ctrl+shift+s"], "command": "sftp_browse_server" },
    { "keys": ["super+ctrl+s"], "command": "sftp_browse" }
]

Packages

Packages are tiny plugins you can install to further enhance your ST2 workflow experience. There are a number of packages that I consider to be essential to my workflow, listed below:

Advanced New File by Dima Kukushkin

Allows you to quickly create new folder structures and files.

Key bindings

OSX, Windows, Linux: Ctrl+Alt+A


Alignment by Will Bond

Simpler alignment of multi-line selections and multiple selections.

  • Align multiple selections to the same column by inserting spaces (or tabs)
  • Align all lines in a multi-line selection to the same indent level
  • Align the first = on each line of a multi-line selection to the same column

Key bindings

Select a chunk of code, or make multiple selections, and press

OSX: Cmd+Ctrl+A

Windows, Linux: Ctrl+Alt+A


BracketHighlighter by Isaac Muse

Adds highlighting of beginning and ending brackets in many programming languages. A huge time saver.


Browser Refresh by Giovanni Collazo

This plugin will switch from ST2 to Google Chrome, Google Chrome Canary, Safari, Firefox or Opera and reload the active tab.


Clipboard History by David Lynch

Allows you to copy multiple selections to your clipboard within ST2, to be used interchangeably.

Key bindings

To show the clipboard history, press

OSX: Cmd+Alt+Ctrl+V

Windows, Linux: Ctrl+Alt+V


Coffeescript by Xavura

A TextMate syntax bundle for Coffeescript.


CSS Snippets by Joshua Hibbert

A collection of useful CSS snippets. HUGE TIME SAVER.

If interested, I've created my own fork of this package here.


CSS Comb by Slava Oliyanchuk

An amazing package for sorting your CSS properties in a more readable and logical order.

Key bindings

Select a chunk of CSS, and press

OSX, Windows Linux: Ctrl+Shift+C


Detect Syntax by Phillip Koebe

Helps to decifer the syntax of files that might not otherwise be detected properly.


[EditorConfig](https://github.com/sindresorhus/editorconfig-sublime by sindresorhus

EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs.


Emmet by Sergey Chikuyonok

An in-editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing.


Emmet CSS Snippets by P233

CSS snippets based on Emmet CSS syntaxes. Works with CSS, LESS, SCSS, and SASS. You can find the full list of snippets here.


Goto Documentation by David Lynch

Finds relevant documentation for the function you have your cursor on.

Key bindings

Click to place your cursor on a function, and press

OSX, Windows, Linux: Ctrl+Shift+H


Hex-to-HSL by atadams

Converts hexadecimal colors to HSL colors, and visa versa.

Key bindings

Click to place your cursor on a hex or HSL value, and press

OSX, Windows, Linux: Ctrl+Shift+U


Hex-to-RGBA by Anthony Roscoe

Converts hexadecimal colors to RGBa colors, and visa versa.

Key bindings

Click to place your cursor on a hex or RGBa value, and press

OSX: Cmd+Shift+R

Windows, Linux: Ctrl+Shift+R


HTML5 by Zander Martineau

Adds HTML5 syntax highlighting & relevant snippets to ST2.


jQuery by Sublime Text

jQuery syntax highlighting and snippets for ST2.


JsFormat by Davis Clark

Javascript syntax highlighting for ST2.


LESS by Dan Rogers

LESS syntax highlighting for ST2.


MarkdownEditing by Brett Terpstra

Powerful Markdown package for Sublime Text with better syntax understanding and good color schemes.


NetTuts+ Fetch by NetTuts+

Key bindings

Type fetch into the Command Palette.


Sass by Nathan Henderson

Adds syntax highlighting, indentation, and snippets for Sass and SCSS files.


SFTP by Will Bond

Commercial SFTP/FTP plugin (free with nag popup) - upload, sync, browse, remote edit, diff, and vcs integration


Sidebar Enhancements by titoBouzout

Adds a bunch of new options to the ST2 sidebar, making it exponentially more useful.


For more useful ST2 packages, please check out this GitHub project.

Use Dropbox? Sync your ST2 setup across multiple devices

Using Dropbox, I keep all of my ST2 settings, snippets, packages, etc synced between all of my machines. So if I'm home working at night and decide I want to change the tab size to 2 spaces, those changes will be reflected on my work computer when I come in the next day. I LOVE THIS.

Here is the article I followed to get this set up correctly.

Sync up your local ST2 projects

Also, since I store all of my web files on Dropbox, and both of my machines' admin users share identical names, all of my ST2 projects are synced up as well. This happens because the file paths inside the .sublime-project files are identical.

I am not sure if this works the same way on Windows or Linux. I imagine it should.

Here is an example of what one of my saved .sublime-project files looks like:

{
    "folders":
    [
        {
            "path": "/Users/[YOUR_USERNAME]/Dropbox/Development/vhosts/examplesite/"
        }
    ]
}
Something went wrong with that request. Please try again.