Back almost 16 years ago when I first got into developing text editors pretty much had Microsoft Works and Notepad. Then of course if I wasn’t writing a paper for school or anything then Works was a bit of overkill… so notepad it was. I was a notepad user for many years and still use it from time to time for when I need to clean something up (remove formatting before plunking it in Word). In the last 3 years or so I started getting into Notepad++ and it was fantastic! It quickly became my editor of choice for scripting languages like JavaScript or PHP. This change gave me the courage to then try other editors when they come out and now I work in Sublime Text 2. I have to say that it is so uber fantastic that I am trying to convert everything I am doing to it instead of Notepad++. Anyways I thought it would be great to write a quick blog entry for beginners to this tool with a list of 10 tools and shortcuts I find the most useful for developers. If you are going to remember any in the plethora of functionality Sublime gives you, these would be the ones.
The shortcuts I mention below are for Windows but can typically be done using the same key combination but using the option key instead of the ctrl key. If you want to see all the shortcuts then within Sublime Text 2 go to the “Preferences” menu item and then “Key Bindings – Default”. If you want to override some of them, you can do this using the menu item “Key Bindings – User”. Remember that overwriting anything in the default section may get clobbered next time Sublime is upgraded. Put your settings in the User one and they won’t be overwritten. If you want a handy little printable cheat sheet of some common functions, ractoon has a great one put together.
1) Install Package Control – This is a package that you should immediately install when you first fire up Sublime. I am not one for addons or anything, but this is definitely a must for helping you install other addons down the road. You can use fuzzy search to find a package to install also which is really nice. Once you install this, you can open up command palette using Ctrl + Shift + P and just type “install”. This is usually enough to bring up the “Package Control: Install Package” menu item. Hit enter and it will show you a list of all the packages you can install. Fuzzy searching here can quickly bring up other packages including the tool in our next tip.
2) Emmet Package (formally known as ZenCoding) – Once you install Package Control, you can use it to install the package Emmet. If you are a web dev this is your package. It essentially allows you to generate tons of great boilerplate code using its own little language. Want a container div with a list containing three items in it? Type “div>ul>li*3” and press tab. Generates all the HTML code for you. Believe me, if you do any HTML work this is going to save you TONS of time hand coding everything. I use it a ton for HTML snippets and examples that I give to others. Clicking the link in this tip will show you demo along with links to the documentation.
3) Ctrl + D (multiple select cursors) – This shortcut is great in that you can highlight some text and hit Ctrl + D to have it select other matches in the document. The beauty of this feature is that it also creates multiple cursors. Meaning that if I select a tag, hit Ctrl + D a few times to select similar tags and then start typing something all the cursors type the same thing simultaneously. Very good for those who want to rename a variable name throughout a code file. So learn this one well.
4) Ctrl + Up arrow for incrementing numbers – Let’s say you have a for loop going and you started the count at 0 when you mean to start it at 1. No problem, highlight the zero, press Ctrl + the up key and it will automatically increment the number for you. Pressing down instead decrements the number. Great for fixing off by one errors and adjusting ranges for loops etc.
5) Ctrl + Shift + Up/down for moving lines – Related to tip 4, if you are wanting to shift a whole line up or down then just put in the Shift key and you can move the whole line up and down. This is great for programmers who find themselves needing to move the sequence of statements really quick. Need to increment that number before you enter a loop instead of after the loop? Need to move something up in scope? Put your cursor on a line, hit Ctrl + Shift + Up a few times and you can move that line right up into the enclosing class or function.
6) Ctrl + i then hit the regex button – Hitting Ctrl + i is going to pop up a little search box but on the far left of this box you will see a button that has a period and asterisk on it. This is for regular expressions. Once you hit that, your search can be done using a regular expression. Similar to the sites like RegexPal where you can start typing the expression and see it highlight matches in the text in real time. Very very handy for matching multiple complex items. Of course then you can then get multiple cursors off of this by hitting Ctrl + D a few times and hit enter. Now you have multiple cursors on all matches to a regular expression. Great for finding complex tags in HTML code (look for anchor tags?).
7) Ctrl + / to toggle comments – If you select some text or line and quickly hit Ctrl + / you are going to toggle commenting for the given line or text. The cool thing about this is that it is also syntax specific. If you are working with HTML syntax it will toggle the line with tags. But if you are in PHP tags and hit this combo it will comment the line with // characters. Really handy for when you are debugging scripts and need to comment out lines real quick to locate bugs or if you just want to make a comment real quick for a function. Type, hit Ctrl + / and it is instantly commented.
8) loremN where “N” is a number – You know the “Lorem ipsum” filler text that designers use to hold the place of yet to be determined text? Well this shortcut generates as much of it as you need. If you type lorem10 and hit tab, it will give you 10 words of Lorem ipsum text. Type lorem200 and it will give you 200 words. Perfect little shortcut for web designers building out a template and need to create some filler text really quick. Just typing “lorem” and hitting tab will give you a quick 30 words. Just make sure your file is in HTML syntax mode or it may not work.
9) Ctrl + G to go to line number – Every programmer needs to know this one. You write some code, compile and it reports an error on line 22. So with this you can type Ctrl + G and then type 22 and hit enter and you go straight to line 22. Zip straight to the line the compiler is complaining about. Not having to touch the mouse once.
10) Ctrl + Shift + Left or Right to select words, Ctrl + L for select line, Shift + Left/Right to select character by character – This is actually three shortcuts in one since they are similar in nature. Place your cursor on a line and hit Ctrl + Shift and then press left or right arrow keys and it will select words one at a time. Use Ctrl + L and the whole line will become selected. If you just use Shift + Left/Right arrow keys and you get character by character selection. I think any programmer can see the value in text selection without needing to fight the cursor using a mouse. Here you can quickly select what you need and be done with it.
So those are my favorite shortcut key combinations for programmers who are getting started with this excellent text editor. I really do highly recommend Sublime Text and think it should become your next text editor. I do everything with it and by far has become my favorite text editor.
Once you get familiar enough with it you can also take advantage of “Vintage Mode” which will turn Sublime Text into an editor that uses Vim style commands for all those Vim users out there. You can learn about this using this nice little video. Definitely something you should play around with after you have mastered many of the basic commands and packages that come with Sublime. Thanks for reading! 🙂
