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.
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.
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.
- Sublime-CSS3 – CSS3 syntax highlighting.
- 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).
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 –
- Increase the caret size (possible values include smooth, phase, blink, wide and solid) –
- Highlight modified tabs –
- Bold the folder labels –
- Increase the line height –
- Add indentation guidelines –
What are some of your favorite Sublime shortcuts, packages, or configuration tweaks?