Handy Sublime Text Shortcuts and Auto Completes

Keyboard Shortcuts

  • Block some lines of text and press CTRL+[ and CTRL+] to alter the indentation

  • Block some lines of text and press Ctrl+Shift+UP and Ctrl+Shift+DOWN to move the lines up and down

  • Block some lines of text and press Ctrl+Shift+K to delete the lines

  • Press Ctrl+Shift+D to duplicate current line

  • Press Alt+F3 to select all occurrences of current word or current selection

  • Press Ctrl+D to select next occurrence of current selection, Ctrl+K to skip last selected occurrence

  • Press Alt+. (alt+dot) to close open HTML tag. For example:

    <div>[alt+.]
result:
	<div></div>

  • Press Alt+. (alt+dot) multiple times to close several open HTML tags in their orders. For example:

    	<body>
	<div>
	<span>
	 [alt+. 3 times]
result:
	<body>
	<div>
	<span>
	</span>
	</div>
	</body>

  • Select some text and press Alt+Shift+W to wrap it in pre-selected

    tag that you can immediately type to change the tag.

  • Press Ctrl+G to go to certain line number

Auto Completes

When working on HTML/PHP files, or manually set it by Ctrl+Shift+P then type set php then ENTER

  • Type <html> then press TAB will results:

    <html>
<head>
    <title></title>
</head>
<body>
</body>
</html>

  • Type anyhtmltag then press TAB will results

    <anyhtmltag>|<anyhtmltag>

  • Type anyhtmltag.classname then press TAB will results

    <anyhtmltag class="classname">|<anyhtmltag>

  • Type anyhtmltag#ID then press TAB will results

    <anyhtmltag id="ID">|<anyhtmltag>

  • Type php then press TAB will results

    <?php | ?>

  • Type echo then press TAB will results

    <?php echo $var ?>

  • Type link then press TAB will results

    <link rel="stylesheet" type="text/css" href="|">

  • Type script then press TAB will results

    <script type="text/javascript"></script>

note that I use the pipe character " |" to indicate where the cursor will be placed after the auto complete


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.