Topic 2C: VS Code: Useful Coding Features & Keystrokes

Visual Studio Code Tips and Tricks

To help you learn and get the most out of it, Microsoft (the maker of VS Code), created an illustrated guide: code.visualstudio.com/docs/getstarted/tips-and-tricks

Keyboard Shortcut Guides

Here are the official keyboard reference sheets:

• Mac: code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

• Windows: code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

Adding/Removing a Comment

• To add/remove a line comment, hit Cmd–/ (Mac) or Ctrl–/ (Windows) or choose Edit > Toggle Line Comment.

  A comment appropriate for the current language (HTML, CSS, JS, etc.) will be intelligently added or removed. You can even place the cursor anywhere in a line and the entire line will be commented out!

• To add/remove a block comment, hit Option–Shift–A (Mac) or Alt–Shift–A (Windows) or choose Edit > Toggle Block Comment.

  Block comments let you select something and comment it out, but it does not have to be an entire line.

Move Lines Up or Down

1. Select the line(s) you want to move. Putting the cursor in a line also works.
2. Hit Option–Up/Down Arrow (Mac) or Alt–Up/Down Arrow (Windows) to move the line(s) up or down.

Copy a Line

Place the cursor anywhere in a line. Then hit Option–Shift–Down Arrow (Mac) or Alt–Shift–Down Arrow (Windows) to copy the line below the current line (use Up Arrow to add the copy above the current line).

Insert a New Line

You can insert a new line above or below the current line without having to move the cursor to the end of the line!

• Insert a new line below: Cmd–Return (Mac) or Ctrl–Enter (Windows)
• Insert a new line above: Cmd–Shift–Return (Mac) or Ctrl–Shift–Enter (Windows)

Delete a Line

Place the cursor anywhere in a line. Then hit Cmd–Shift–K (Mac) or Ctrl–Shift–K to delete the entire line.

Delete a Word (Work in most apps, not just code editors)

• Delete word to left of cursor: Option–Delete (Mac) or Ctrl–Backspace (Windows)
• Delete word to right of cursor: Option–Fn–Delete (Mac) or Ctrl–Delete (Windows)

Quickly Cut or Copy a Line

You can cut (and paste) an entire line of code without selecting it:

1. Place the cursor anywhere in a line. You do not have to select the entire line!
2. Hit Cmd–X (Mac) or Ctrl–X (Windows) to cut the line.

3. Place the cursor wherever you want the code, and hit Cmd–V (Mac) or Ctrl–V (Windows) to paste it.

   NOTE: You can also copy a line of code the same way. Just use Cmd–C (Mac) or Ctrl–C (Windows) instead.

Add Next Item to Selection

• Hit Cmd–D (Mac) or Ctrl–D (Windows) to select the next occurrence of the whatever you currently have selected.

• Repeat the keystroke to continue adding more items to the selection.

• If it selects something you don’t want, hit Cmd–K (Mac) or Ctrl–K (Windows) and then hit Cmd–D (Mac) or Ctrl–D (Windows) to skip that item.

Navigating Code

• Hit Cmd–Shift–O (Mac) or Ctrl–Shift–O (Windows) (the keystroke for Go > Go to Symbol in Editor) to navigate certain filetypes (such as CSS or JS). For example, in CSS files you can type in the name of selectors, or in JS use function names.
• To jump to a specific line of code, hit Ctrl–G (Mac and Windows) and type in the line number. Hit Return (Mac) or Enter (Windows) to go to the line.

• Move to beginning or end of a line:

  Move to beginning of a line: Cmd–Left Arrow (Mac) or Home (Windows)

  Move to end of a line: Cmd–Right Arrow (Mac) or End (Windows)

• Jump words:

  Jump to previous word: Option–Left (Mac) or Ctrl–Left (Windows)

  Jump to next word: Option–Right (Mac) or Ctrl–Right (Windows)

Fold (Hide) a Section of Code

To fold/hide a section of code, place the cursor anywhere in the code and hit the following keystroke (repeat it to unfold/show the code).

• Mac: Cmd–K then Cmd–L
• Windows: Ctrl–K then Ctrl–L

You can also use these shortcuts:

• Mac: Cmd–Option–[ to fold or Cmd–Option–] to unfold
• Windows: Ctrl–Shift–[ to fold or Ctrl–Shift–] to unfold