Sublime Editor - Tips n Tricks

Pick a sound 

Turn your volume up for the sound of success!

Contents

Just checking

A couple of must haves...

Complete the challenges as fast as you can...

On each challenge below, Hit "Go", complete the challenge and the sound will play when you're finished

Click reset to try again and get a faster time. Your total time is recorded at the bottom :) (careful not to refresh)

OK let's go! ....First... General navigation

(No need to copy into sublime for these challenges)

This is global on text fields in most software (Emails, MS Word etc) so it's super useful


Double click - select word 

Using only the mouse and cut and paste, put into the correct order (e.g. aaaaa bbbbb ccccc ddddd)







Triple click - select line 

Using only the mouse and cut and paste, put into the correct order (e.g. aaaaa bbbbb ccccc ddddd)

 







Double click drag - select words

Using only the mouse and cut and paste, put into the correct order (e.g. aaaaa bbbbb ccccc ddddd)

 







Triple click drag - select lines 

 

Using only the mouse and cut and paste, put into the correct order (e.g. aaaaa bbbbb ccccc ddddd)







Keyboard

Speedier than the mouse I reckon

SHIFT - Select


ALT + right/left - to the next/prev word

Using only the keyboard keys ALT, SHIFT, cut and paste, put into the correct order (e.g. aaaaa bbbbb ccccc ddddd)







CMD + right/left - To the end/beginning of line

Using only the keyboard keys ALT, CMD, SHIFT, cut and paste, put into the correct order (e.g. aaaaa bbbbb ccccc ddddd)







CMD + up/down - To the top/bottom 

Using only the keyboard keys ALT, CMD, SHIFT, cut and paste, put into the correct order (e.g. aaaaa bbbbb ccccc ddddd)







THE BEAST - Use all the techniques

Using every technique, put into the correct order (e.g. aaaaa bbbbb ccccc ddddd)

 

OK!! .... finally Sublime tips n tricks!

But first a couple of config changes...







Emmet

Absolutely vital

Copy into sublime and hit tab







tag|c - Comment closing tag

For the cutup dudes!







Word wrap

It sucks! let's turn it off







Find / select color highlighting

So you can see what you're targeting! (even in the sidebar)







Indenting

Let's change the default to 2 spaces







TAB / SHIFT + TAB or CMD + { / } - Indent left/right

Nice 'n tidy

Copy into sublime and tidy up the indenting

.......... or you can auto indent... with key bindings ....see below....







Key Bindings

Loads of cool things you can assign here!

Copy into sublime and using the indent key binding tidy it up.

NOTE: it's not super intelligent though! Needs to be on separate lines

Copy into sublime and using the strong tag snippet key binding...

  • Wrap the first word of every li tag with a <strong> tag






Project manager sidebar

Drag a folder into sublime icon to view the folder in the sidebar







Tab management...

A few UI shortcuts...







CTRL + G - Go to line







CMD + / or CMD + ALT + / - Commenting

Nice 'n tidy

Copy into sublime and comment out the lines labelled COMMENT ME OUT using CMD + /

Copy into sublime and comment out the lines labelled COMMENT ME OUT using CMD + ALT + /







CMD + D (& U/K/G) - Select next occurance

The most freaking useful shortcut I've EVER learned!

You'll also need...

Copy into sublime and using CMD + D/U/K...

  • Add class banner-slide to every slide
  • Add class active to the first slide
  • Add class odd and even to the slides






Regex searches

Good for find complimacated strings

Copy into sublime and...

  • Hit CMD + F to open the find bar
  • Make sure the Regex button is enabled in sublime (bottom right)
  • Wrap the first sentence (start to first full stop) of every li tag with a <strong> tag
  • HINT: Try <li>[^\?\.\!]+ in the regex... use the strong key binding we just made!






CMD + SHIFT + L - Put cursor on all selected lines

Good for doing something to everything

Copy into sublime and...

  • Remove all the trailing spaces
  • Put ascending numbers next to them all e.g. 1. Pyrimidinetrione Ethyl Phenyl






CMD + K + L - Make selection lowercase

Good for making classes / JS variables

Copy into sublime and...

  • Make CSS safe versions of these names e.g. pyrimidinetrione-ethyl-phenyl
  • HINT: Grab err'thing and make it lowercase, get all the spaces and replace them with dashes






CMD + K + U - Make selection uppercase

Good for making classes / JS variables

Copy into sublime and...

  • Make JS variable versions of these names e.g. pyrimidinetrioneEthylPhenyl
  • HINT: CTRL+CMD+G on all the spaces, delete them, highlight select one character immediately to the right and make it uppercase






CTR + SHIFT + T - Go to open/closing tag

Where is the closing tag!?!?!?

NOTE: Requires Emmet

Copy into sublime and

  • find the closing tag of the first IMAPAssesment element
  • delete everything after this tag






CMD + ALT + > - Close closest open tag

Copy into sublime and

  • Close all the open tags
  • It doesn't have to be tidy :)






Snippets







Useful plugins

Terminal - Open terminal on current file




Hayaku

A great plugin for writing fast CSS







Other Useful mac apps

Copyclip - clipboard history

LittleIpsum - lipsum generator

FormatMatch - copy text (remove formatting)




Any other good ones you know about?

Email me! jmorgan@squiz.net












Just for funsies

Typing contest






Your total time....



0










192.168.1.64