Sublime Text Editor tips
Last weekend we were at Apache Barcamp Spain with a talk about cool tools for web developers.
Aside: if you are coming to a single event in Spain on a given year, make it this one. Barcamp Spain has developed its own soul, where the beer+networking experience is so much fun, and the food by itself is totally worth the trip.
Some people were asking for a transcript of the third part, our own set of tips and tricks to boost Sublime Text Editor for web development. So here it comes:
Chances are Sublime Text Editor is not your first editor. You probably had a previous life, in which you were already proficient with some editor (Eclipse, Bean, TextMate, whatever). This is about getting things done, so I would recommend to configure Sublime with the typical shortcuts that are hard-coded into your brain. Me, I am used to Eclipse shortcuts.
The idea is to feel comfortable. Get whatever you need to make Sublime as good as your previous editor of choice. Now, awesomeness can start.
I am not quite a fan of the distraction-free mode in Sublime, but I do want to maximize the used space on screen (the data-ink ratio, for Tufte fans). So here it goes:
- Toggle sidebar on/off:
Ctrl + K, Ctrl + B. This is useful if you rarely use it. In my case, it's Shift+Ctrl+R to open any file, which makes the sidebar mostly ignored.
- See several files at once:
Shift + Alt + (you have to choose one). You can compare them side by side, top vs bottom, etc. Once you are done, you can switch back with
Surround with tag: Shift+Alt+W
This is a useful shortcut for inline tags (bold, italics, links), but not so much for block tags (div, p, etc). Try it:
- Write any text.
- Select a word, press
Shift+Alt+W, then type
Block select: Shift + Right-click drag
This is great when you need to insert tags at the start of each line (p, li).
- Prepare your list of data
- Select the code and hit Tab to indent it a bit.
- While holding the
Shift key, right click and drag to select a rectangular selection of code.
- Now type the start tag to get it inserted at the beginning of each line.
The previous are just concrete examples of using multiple cursors. For the purpose of understanding, let's say you can have multiple instances of a SublimeCursor class (I do not have any insight of the source code, but I found this approach easier to understand). This is a compiled list of things you can do, extracted by trial and error:
Ctrl + click: create new cursor.
Ctrl + double click: create a new cursor selecting the word that was double-clicked.
Shift + click: select using the latest cursor (so: ctrl + click, then shift + click to add a selection to the set of cursors)
Any keyboard action will operate on all cursors at once. Things like Ctrl+V will work, and so will normal typing (like hitting
end to write the ending tag at the end of each line).This is best understood with a set of examples:
- Write any text.
Ctrl+clickat the beginning of each line.
Forgot to enclose tag attributes with quotes?
Ctrl + double clickon every attribute
"(the double quote char)
Ctrl + double clickon words that you want to make bold.
- If you want to select more than one,
Ctrl+Clickat the beginning, then
Shift+Clickat the end.
Shift + Alt + W, then type
There are tons of possible applications, and we found ourselves doing some really funky stuff.