Whether you’re hand-coding tons of repetitive items or rearranging a huge document, you’ll find that the Web Editor’s blocks and cursors shortcuts are a huge help.
Blocks
Blocks are portions of code that you highlight with the mouse cursor. When you highlight a block of code, you can delete, cut, copy, and paste your selection, and you can use special shortcut combinations to nudge the block around.
Moving Blocks Around
When you highlight code, you can use the standard keyboard shortcuts you’re already familiar with to cut, copy, paste, and delete the block. You can also click and drag a selected block to duplicate it. However, there are a few more useful keyboard shortcuts you can use to move blocks as well.
Let’s explore a little bit. Highlight a selection of code:
Now hit the Tab key a few times:
You can move an entire block of code in any direction by using special keyboard shortcuts.
- Move Block Right: Tab
- Move Block Left: Shift+Tab
- Move Block Up: Ctrl+Cmd+Up Arrow
- Move Block Down: Ctrl+Cmd+Down Arrow
Selecting a Rectangular Block
You may have noticed that highlighting multiple lines wraps the highlight back to the beginning of a line. But what if you want to select just the middle portion of multiple lines? There’s a shortcut for that, too.
Hold Alt while you click and drag the mouse to highlight a rectangular portion of code:
You can perform the same task using just the arrow keys. Hold the Shift and Alt keys and move the cursor with the arrow keys to select a rectangular block.
Note: You can move a rectangular block left and right with keyboard shortcuts, but not up and down.
Selecting Multiple Blocks Simultaneously
You can also select multiple blocks within the same document. Hold the Command key while clicking and dragging the mouse to highlight several different blocks at once:
Cursors
While blocks are good for manipulating existing code, cursors are the secret to creating code efficiently. The Web Editor allows you to place multiple cursors at once so that you can create multiple lines of text at once.
Using Multiple Cursors to edit Open and Close Tags Simultaneously
This cursor option is used to edit existing tags, but it’ll save you from having to hunt down the end of the line every time you change a tag. To enable this option, go to Web Editor > Preferences and click the Editor tab. Check the box next to Edit opening and closing tags simultaneously.
Now click a tag. Notice that a cursor is placed in both the opening and closing tags? Now change it, and you’ll see its corresponding closing tag change, too.
Placing Multiple Cursors
Sometimes you’ll need to type the same thing many, many times, like when listing a bunch of images that all have similar file names. Wouldn’t it be great to type once and have it appear in many different places at once? You can do that!
Hold the Command key and click anywhere in the code editor to place the cursor multiple times:
Now type your code and watch it appear in all of those locations:
Placing a Range of Cursors
Placing multiple cursors is an incredible feature, but if you need to make a list with 18 items, you probably don’t want to click 18 times. You can create a range of cursors by holding the Alt key and dragging the mouse cursor down to draw a range of cursors that spans multiple lines:
Now type out your code. Aren’t you glad you did it the ultra-efficient way?
Note that the shortcuts for blocks and cursor placement are the same. You’ll find that this system saves you way more time than any other way to write code.
