Monday, September 24, 2012

Sublime Text Editor tricks for web developers


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:

Feel comfortable

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.

Maximize space

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 + [1234589] (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 Shift+Alt+1.



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 b.


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.




Multiple cursors

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: Operate on all cursors at once. Keyboard operations (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+click at the beginning of each line.
  • Write <p> or <li>




Forgot to enclose tag attributes with quotes?
  • Ctrl + double click on every attribute
  • Type "



  • Ctrl + double click on words that you want to make bold. 
  • If you want to select more than one, Ctrl+Click at the beginning, then Shift+Click at the end.
  • Hit Shift + Alt + W, then type b





There are tons of possible applications, and we found ourselves doing some really funky stuff. What is your personal trick? Use the comments section or tweet me @nachocoloma.

8 comments:

  1. Most of these are different on the Mac.

    Surround is Ctrl+Shift+W
    Multiple Cursors is Cmd+click

    I couldn't figure out the block select though.

    ReplyDelete
  2. Here are some more tips: http://opensourcehacker.com/2012/05/11/sublime-text-2-tips-for-python-and-web-developers/

    ReplyDelete
  3. Block select on mac is Option+Command + Right-click drag

    ReplyDelete
  4. Complete Spanish Cheat-sheet:
    http://falasco.org/sublime-text-2-cheat-sheet

    ReplyDelete
  5. Pretty sure this will be a very useful tool in web design. Thanks for sharing this to the website enthusiasts and the readers. Have a great day ahead.

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. This has to be the most awesome editor I've ever used... the amount of time I have saved is unbelievable. Well worth the license value.

    Another tip: to add tags to a lot of lines, select the lines with the mouse, then press Shift+Ctrl+L (turns each line into a separate selection), and then Shift+Alt+W to add a tag to each one.

    ReplyDelete

Something on your mind?

Note: Only a member of this blog may post a comment.