9 Nov 2011

Effective Code Editing with Cloud9 IDE

We at Cloud9 IDE dogfood our product every day. Everybody at our company uses Cloud9 to develop Cloud9 which is a great experience, because all the useful stuff we work on can immediately be integrated in our workflow. As as result, over time, we added many useful little features and keybindings that make us significantly more productive as developers. In this post we will share a few of those tricks with you, so that you can make most out of Cloud9 IDE.

Pippa

While "wired in" you want to focus on your code as much as possible, reduce the use of the mouse and just use the keyboard. Here's a couple of useful keyboard short-cuts you may not know about yet.

Selected word highlight and navigation. If you have a word selected (e.g. a variable name), you will notice that other occurrences of that word are automatically highlighted. To jump between them, you can use Ctrl-K (Cmd-G on Mac) and Ctrl-Shift-K (Cmd-Shift-G on Mac) to jump between them.

Moving/copying lines. You can use Alt-Up (Option-Up on Mac) and Alt-Down (Option-Down on Mac) to move lines up and down. Add the Shift key to copy the line, or select multiple lines to move/copy them together. While you may think this is not super useful, you will likely find that when you get used to it, you'll use this feature all the time.

Indenting and outdenting blocks. Select a block of code and use Tab and Shift-Tab to indent or outdent the block of code.

Search within a file. Use Ctrl-F (Cmd-F on Mac) to search within the file -- a small search box will appear along the top-right. Press enter to search, and keep pressing it to jump to the next result.

Code formatting (JavaScript). Copied a piece of code from some blog? Had your colleague edit your code and it it looks bad? Select the poorly formatted code, press Ctrl-Shift-B (Cmd-Shift-B on Mac) to automatically reformat it.

Delete a line. The less code, the better. Deleting code is one of the most satisfying things to do. Ctrl-D (Cmd-D on Mac) makes it faster, my removing lines one at a time.

Reveal file. Having trouble finding your currently open file in the file tree? Happens to the best of us. Simply press Ctrl-Shift-L (Cmd-Shift-L on Mac) to reveal the current file in the file tree.

Tab switching. Want to quickly switch between two or more open tabs? Give Ctrl-Tab (Alt-Tab on Mac) a try. To switch to the tab to the left use Ctrl-[ (Cmd-[ on Mac), to switch to the tab to the right use Ctrl-] (Cmd-] on Mac).

Close a tab. Use Alt-W (Option-W on Mac) to quickly close the current tab.

Quickly open a file. Press Alt-Shift-R (Option-Shift-R on Mac) to open the open file dialog and search for any file within your project.

Search file contents. Want to search your entire project, or a certain directory? Select the directory in your file tree and press Alt-Shift-F (Option-Shift-F on Mac) to quickly to a full-text search of your files for a certain phrase.

Close any dialog. Just by pressing Esc, easy no?

Mouse trickery. If you are a mouse aficionado, here's a couple of clickery tricks:

Double click: select current word
Triple click: select current line
Quadruple click:   select entire file

Bonus tip: Want to really get in the zone? Press Ctrl-E (Command-E on Mac) to enter Zen mode.

Zenmode3

Snippets

It is only a short while ago since we added code completion to Cloud9, but it is already used a lot. At this point it features word completion (to complete long variable and method names, for instance), but also some useful built-in snippets. To find out all the JavaScript snippets available to you, just move your cursor to an empty line and press Ctrl-Space (or Alt-Space, if that doesn't work). You will now see a drop-down of all available snippets and other completions. To insert any of these, type in the snippet name in your code, followed by Ctrl-space to expand. The ones we use most are:

  • log, which expands to console.log(). Extremely useful, especially if you're a "printf debugger", not a "debugger debugger".
  • fora, which expands to a for loop that iterates over an array. Boiler plate code that you otherwise have to write by hand over and over again.
  • setTimeout, which expands to a setTimeout call with function closure and timeout of 0, to postpone execution of some piece of code.

What are the features in Cloud9 that make you a more effective code editor? What can we do to make you more effective in your coding?