I recently did a talk at my local JavaScript meetup (Async in Brighton) about Sublime Text 2 and Chrome Dev Tools. Afterwards, I had a few requests to post about which plugins I use, and my preferences. I also plan on posting the video of the talk, but in the meantime here are my top tips:

My Sublime Text 2 Plugins:

Remember, the first step is to install Will Bond’s package control. Once you’ve done that, just open up the command palette (Cmd + Shift + P or Ctrl + Shift + P) and type ‘install’, followed by enter. This will bring up a filterable list of all available packages.

Sublime Linter

An essential plugin, Sublime Linter saves you from future runtime headaches by pointing out missing semicolons, mis-spelled variable names etc. Works for JavaScript, CSS, and plenty more besides.

Git

Very full featured Git plugin for ST2, great integration of standard commands such as diff, status, log etc., but as an added bonus it takes your selection into account when using features such as ‘Blame’ and ‘Add Hunk’.

Github Gists

Nice little plugin for creating a Github Gist from your selection, public or private. You can also select and copy a gist to the clipboard ready for use.

Zen Coding

Adds in support for Zen Coding, a way of creating huge chunks of HTML quickly and easily using CSS selector ‘haikus’. The Github readme is a bit sparse, but remember you can just type ‘zen’ into the Sublime Text 2 command palette once the plugin is installed, and it’ll show you all the available commands. For more information on Zen Coding, check out this overview at Smashing Magazine.

Automatic Backups

One of the earliest plugins, it simply stores a copy of your file each time you save to a backup folder on your disk. You can step back through history through previous revisions of the file simply and easily, or merge two versions together. These days most of us use Git or some other form of version control, but Automatic Backups is still a nice safety net to have around.

Sidebar Enhancements

Adds a few extras to the default Sublime Text 2 sidebar, which is pretty basic straight out the box; notably more control over file management (duplicate etc.), as well as more advanced features such as advanced copy options and opening a file in the browser.

Tag

Small plugin that just gives a helping hand when writing HTML/XML, with features such as linting, formatting and auto-closing on forward slash.

Missing Palette Commands

Even smaller plugin which simply adds in some commands to the command palette. If you find something missing from there, just add it into the Missing.sublime-commands JSON file yourself!

My Sublime Text 2 Preferences

I generally find the Sublime Text 2 default preferences to be pretty sensible, but there are some nice features turned off by default so it’s definitely worth taking a gander at the settings file (just type ‘prefd’ into the command palette) to see what’s on offer. Below is my preferences file for reference; ‘Vintage’ mode is off at the moment but I plan on using it more once my Vim-fu improves.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{
    // Show folders in the side bar in bold
    "bold_folder_labels": true,

    // Word list to use for spell checking
    "dictionary": "Packages/Language - English/en_GB.dic",

    // Set to true to draw a border around the visible rectangle on the minimap.
    // The color of the border will be determined by the "minimapBorder" key in
    // the color scheme
    "draw_minimap_border": true,

    "font_size": 14.0,

    // List any packages to ignore here. When removing entries from this list,
    // a restart may be required if the package contains plugins.
    "ignored_packages": ["Vintage"],

    // Set to true to insert spaces when tab is pressed
    "translate_tabs_to_spaces": true,

    // Set to true to removing trailing white space on save
    "trim_trailing_white_space_on_save": true
}

Favourite Keyboard Shortcuts

During my presentation, I wanted to show off as many features as possible in the time available, so I used keyboard shortcuts where I could. I had a few questions about what the shortcut was for certain features, so I thought I’d include them in full here.

Layout

Switch between multicolumn layouts:

Mac: Cmd + Alt + [1-4]
Win/Linux: Alt + Shift + [1-4]

Show grid layout:

Mac: Cmd + Alt + 5
Win/Linux: Alt + Shift + 5

Switch between multirow layouts:

Mac: Cmd + Alt + Shift + [1-3]
Win/Linux: Alt + Shift + [8-9]

Move focus to panel:

Ctrl + [1-4]

Move file to panel:

Ctrl + Shift + [1-4]

Distraction Free Editing:

Mac: Cmd + Ctrl + Shift + F
Win/Linux: Shift + F11

Autocompletes

Show ‘Go To’ autocomplete:

Mac: Cmd + P
Win/Linux: Ctrl + P

From within ‘Go To’ autocomplete:
’@’ = function
’:’ = line number

Show Command Palette:

Mac: Cmd + Shift + P
Win/Linux: Ctrl + Shift + P

Editing

Code folding:

Mac: Cmd + Alt + []
Win/Linux: Ctrl + Shift + []

Move line up/down:

Mac: Cmd + Ctrl + up/down
Win/Linux: Ctrl + Shift + up/down

Indent:

Mac: Cmd + []
Win/Linux: Ctrl + []

Sort Lines:

Mac: Ctrl + F5
Win/Linux: F9

Join Lines:

Mac: Cmd + J
Win/Linux: unbound by default

Selecting

Select Word:

Mac: Cmd + D
Win/Linux: Ctrl + D

Select Line:

Mac: Cmd + L
Win/Linux: Ctrl + L

Select Scope:

Mac: Cmd + Shift + Space
Win/Linux: Ctrl + Shift + Space

Select Brackets:

Ctrl + Shift + M

Multi-selecting

Select next occurrence:

Mac: Cmd + D
Win/Linux: Ctrl + D

Skip occurrence:

Mac: Cmd + K
Win/Linux: Ctrl + K

Undo selection:

Mac: Cmd + U
Win/Linux: Ctrl + U

Select all occurrences:

Mac: Ctrl + Cmd + G
Win/Linux: Alt + F3

Select block:

Mac: Alt + mouse drag
Win/Linux: Shift + right mouse drag

Add previous/next line:

Mac: Ctrl + Shift + up/down
Win/Linux: Ctrl + Alt + up/down

Add cursor:

Mac: Cmd + mouse click
Win/Linux: Ctrl + mouse click