Sublime Text Shortcuts, Packages and Tweaks

Donna Peplinskie

Shamefully, I’ve only recently begun to make it a priority to improve the tools that I use for web development. Before switching to Sublime Text, I used suffered through Komodo Edit. I’ve only been using Sublime for a few months, so I’m still fairly new to what it can do and how it can help me to become a more efficient developer, but I definitely like what I’ve seen so far.

At jQueryTO this past weekend, I sat in on the Become a Sublime Text Power User talk, and thought I would share some of the tips that I picked up from speaker Wes Bos.

Keyboard Shortcuts

Here are some quickie keyboard shortcuts that you might or might not have known about, but that will definitely save you time:

    • Cmd + P to search for a file within a project. You can even take it a step further by appending an @ once your file has been short-listed, and entering the name of a method to search for within that file. Or use a : followed by a line number to jump directly to that line.
    • Cmd + R to search for a function or CSS class within a file.
    • Cmd + Click or Cmd + Option + Drag to enable multiple carets. Having multiple carets is useful when you want to apply the same operation to multiple lines.
    • Ctrl + Shift + W to wrap a selection inside of a <p> tag. Although a <p> tag is the default, you can easily change this to be any HTML tag you want. This is an especially powerful feature when coupled with multiple carets.
    • Cmd + Ctrl + Arrow keys to enable line bubbling. Line bubbling moves lines of code up or down in a document without the need for cutting and pasting.
    • Ctrl + ‘ to select the entire string between single or double quotes. This shortcut requires the Expand Selection to Quotes plugin listed below.

Packages

The following is a list of packages that you should consider installing to speed up your development, or just to make your life that much easier:

    • Expand Selection to Quotes – Selects the entire string between single or double quotes.
    • Emmet – Improves the HTML & CSS workflow by expanding simple abbreviations into complex code snippets.
    • Origami – Flexible window splitting.
    • Autofilename – Autocomplete filenames in HTML and CSS.
    • JavascriptNext – ES6 syntax highlighting.
    • Sublime-CSS3 – CSS3 syntax highlighting.
    • JSHint Gutter – Checks your JavaScript code for errors and violations in coding conventions and provides an indicator in the gutter.
    • GitGutter – Shows what lines have been changed, added and removed since your last commit.
    • GutterColor – View CSS colours in the gutter (Sublime Text 3 only).

Settings

There are also some tweaks that you can make to your user settings to improve the visual appearance of the editor:

    • Highlight the current line – "highlight_line": true
    • Increase the caret size (possible values include smooth, phase, blink, wide and solid) – "caret_style": "wide"
    • Highlight modified tabs – "highlight_modified_tabs": true
    • Bold the folder labels – "bold_folder_labels": true
    • Increase the line height –
      "line_padding_bottom": 1,
      "line_padding_top": 1
    • Add indentation guidelines –
      "indent_guide_options":
      [
          "draw_normal",
          "draw_active"
      ]

What are some of your favorite Sublime shortcuts, packages, or configuration tweaks?