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

Uncover the secrets of Visual Studio Code with this tutorial on tips, tricks, and keyboard shortcuts. Learn how to efficiently navigate, edit, and manipulate your code with keystrokes for both Mac and Windows users.

Key Insights

The maker of Visual Studio Code, Microsoft, provides an illustrated guide on how to utilize its features. This can be found on their official website.
Keyboard reference sheets for both Mac and Windows users are available for quick referencing.
Commands for adding/removing comments, moving lines up or down, copying lines, and deleting lines are included in the tutorial.
Users can learn how to quickly cut or copy a line, add the next item to a selection, and navigate through code using keyboard shortcuts.
Shortcut keys for folding and unfolding sections of code are shared, aiding in easier code readibility.
The tutorial also includes how to insert a new line and delete a word, features that are applicable in most apps, not just code editors.

This exercise is excerpted from Noble Desktop’s front-end web development (Visual Studio Code) training materials and is compatible with updates through 2022. To continue learning web development with hands-on training, check out our coding bootcamps in NYC and live online.

Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials. During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction.

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:

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

Select the line(s) you want to move. Putting the cursor in a line also works.
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:

Place the cursor anywhere in a line. You do not have to select the entire line!
Hit Cmd–X (Mac) or Ctrl–X (Windows) to cut the line.
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

Visual Studio Code Tips and Tricks

Keyboard Shortcut Guides

Adding/Removing a Comment

Move Lines Up or Down

Copy a Line

Insert a New Line

Delete a Line

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

Quickly Cut or Copy a Line

Add Next Item to Selection

Navigating Code

Fold (Hide) a Section of Code

How to Learn Coding