Sublime Text has become my primary web coding tool. It’s built with efficiency in mind, giving you keyboard shortcuts to avoid slowdowns with the mouse, and the ability to have multiple cursors. There are many extensions available that can be instantly found and installed via the Package Manager. Plus, it’s visually pleasing. And fast. The overall interface is really slick and modern. It has some great color schemes built in, and a unique zoomed-out scrollable code overview on the right side. It’s hard to live without that feature now that I am so used to viewing and scrolling to sections in my code visually.

There are a ton of helpful features and shortcuts lying in wait within the editor. Here are the ones that I’ve found the most useful during web development and programming:

Convert multi-line CSS to single line CSS with a single key press

In trying to keep my CSS tidy, this is one of the first parts of my workflow that I was looking to speed up. If you select the lines after the first line and press Ctrl-J in Windows, code such as the following:

a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

…turns into this:

a img.aligncenter {display: block; margin-left: auto; margin-right: auto; }

Editing shortcuts and multiple cursors

I won’t bother covering this in-depth, as you can watch this excellent video tutorial at Tuts+ called  Multiple Cursors and Incremental Search. It’s the 4th video in a series about Sublime Text workflow, and I’d recommend checking them all out.

As a recap and reference, there are a few important keyboard shortcuts to remember:

• Ctrl + L: select line
• Ctrl + D: quick add next
• Alt + F3: find all occurrences
• Middle click and drag: select column. Ctrl+Shift+L to select those lines, then you can type/use arrow keys to move multiple cursors
• Escape: gets you out of multiple selection, and closes search bar

If you need the full list of shortcuts (or the ones for Mac), check the docs here: http://www.sublimetext.com/docs/2/

Open folder in Windows Explorer & copying filenames

Once upon a time when I used Dreamweaver, I would often use the Right-Click menu option “Open in Explorer” via the files list, to paste in a script or an image.  In Sublime Text, “Open containing folder” is available when right-clicking on a file on the sidebar, or inside an open document. For some reason this is not available when right clicking on a folder. Please vote for it as a feature request here.

There is a package called Sidebar Enhancements, which gives you a hoard of additional options on the right-click menu. I often need to copy a filename exactly, like a JavaScript file that I want to link, without manually typing it out. It’s quicker and there’s less chance of errors. Using this extension gives options like “Copy name” (filename) and “Copy path”, as well as an “Open with” (open with Photoshop is useful for images).

Duplicating lines

To duplicate the current line that the cursor is on, press Ctrl+Shift+D in Windows. Or ⌘+Shift+D on Mac. If you want to duplicate multiple lines, you have to select all of the text on the multiple lines, which some people don’t like. To duplicate the multiple lines selected regardless of what’s in the selection, there is the package Better “Duplicate Lines”.

Some improvements to settings

In Sublime Text, go to Preferences -> Settings – User and add (or modify) the following settings:

"bold_folder_labels": true,
"highlight_line": true,
"highlight_modified_tabs": true,

Bold folder labels helps differentiate files and folders, highlighting the line you are on is an important visual indicator, and highlighting modified tabs (a different color) helps notify you that a modified file hasn’t been saved yet. You can find some other settings that you may like here:

• http://wesbos.com/5-sublime-text-tweaks-tips/
• http://wesbos.com/sublime-text-5-visual-tweaks/

Sort selection alphabetically

The “Edit” menu contains a “Sort Lines” and “Sort Lines (case sensitive)” option, which defaults to the F9 key on Windows. Make a selection and press F9, and your lines will now be in alphabetical order. Useful for sorting arrays.

Put quotes around selection

If you have a word selected, and then type the double-quote character, then the word will automatically be surrounded in quotes. Very helpful if you’re working with a series of variables/arrays. When I needed to put several words/strings in an array format, I just quickly double-clicked to select each one, then typed quote.

SASS and LESS

There are several packages available for getting Sublime Text set up so that saving out a SASS or LESS file will automatically generate the CSS file, so you don’t have to do anything command-line.

• SASS Support – You will need to install 3 packages from Package Control, and have Ruby and SASS installed on your PC.
  • I’ve written a separate article on how to get SASS working with Sublime Text.
• LESS Support – Also requires LESS installed on your PC (add to build path), and a few packages installed.
  • Check out the Less Sublime plugin (syntax highlighting) and the Less Build Sublime plugin (compiling).