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

Visual Studio Code Tips and Tricks

Visual Studio Code has evolved into the developer's editor of choice, powering everything from simple scripts to enterprise applications. To help you harness its full potential, Microsoft provides a comprehensive illustrated guide at code.visualstudio.com/docs/getstarted/tips-and-tricks. This resource walks you through advanced features that can dramatically improve your coding efficiency and workflow management.

Keyboard Shortcut Guides

Mastering keyboard shortcuts is the difference between amateur and professional-level productivity. Microsoft maintains official keyboard reference sheets that every serious developer should bookmark:

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

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

These comprehensive guides cover shortcuts for every major VS Code feature, from basic editing to advanced debugging workflows.

Adding/Removing a Comment

Efficient commenting is crucial for code maintenance and collaboration. VS Code provides intelligent commenting that adapts to your current language context.

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

  VS Code intelligently selects the appropriate comment syntax for your current language (HTML, CSS, JavaScript, Python, etc.) and applies it instantly. The beauty of this feature is its flexibility—you can place the cursor anywhere within a line, and the entire line will be commented out. This eliminates the tedious process of manually selecting text or remembering different comment syntaxes for each language.

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

  Block comments provide surgical precision for commenting out specific code segments without affecting entire lines. This is particularly valuable when temporarily disabling function parameters, portions of expressions, or multi-line code blocks during debugging sessions.

Move Lines up or Down

Code organization often requires repositioning entire lines or blocks. This feature eliminates the cut-and-paste workflow that interrupts your coding flow.

1. Select the line(s) you want to move. Positioning the cursor anywhere within a single line also works perfectly.
2. Hit Option–Up/Down Arrow (Mac) or ALT–Up/Down Arrow (Windows) to move the line(s) up or down instantly.

This technique is invaluable when refactoring code, organizing import statements, or restructuring function definitions without losing your place in the file.

Copy a Line

Duplicating lines is a common need when creating similar code structures, testing variations, or building repetitive patterns. 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 the Up Arrow variant to place the copy above the current line instead.

This technique shines when creating similar functions, duplicating configuration blocks, or setting up A/B testing scenarios in your code.

Insert a New Line

Professional developers know that cursor positioning shouldn't interrupt your thought process. VS Code allows you to insert new lines above or below the current line without moving the cursor to the end of the line—a subtle but powerful productivity enhancement.

• 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)

This feature becomes indispensable when adding comments above functions, inserting log statements for debugging, or breaking up complex expressions across multiple lines.

Delete a Line

When removing entire lines of code, precision matters. Place the cursor anywhere in a line, then hit Cmd–Shift–K (Mac) or CTRL–Shift–K to delete the entire line instantly. This eliminates the error-prone process of selecting entire lines manually, especially when dealing with long lines that extend beyond the visible screen area.

Delete a Word (Works in Most Apps, Not Just Code Editors)

These universal shortcuts work across most modern applications, making them valuable additions to your general computing toolkit:

• 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)

These shortcuts are particularly useful when refactoring variable names, cleaning up documentation, or making quick edits to function calls without selecting text manually.

Quickly Cut or Copy a Line

One of VS Code's most elegant features is its ability to cut or copy entire lines without requiring text selection—a workflow optimization that saves countless micro-interactions throughout your development day.

1. Place the cursor anywhere in a line. No text selection is necessary.
2. Hit Cmd–X (Mac) or CTRL–X (Windows) to cut the entire 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 using the same approach. Simply use Cmd–C (Mac) or CTRL–C (Windows) instead of the cut command. This technique is invaluable for code reorganization, moving import statements, or repositioning function definitions.

Add Next Item to Selection

Multi-cursor editing represents one of modern code editors' most powerful features. This functionality enables simultaneous editing of multiple identical elements—a game-changer for refactoring and batch editing operations.

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

• Repeat the keystroke to continue adding more items to your selection, building a multi-cursor editing session.

• If the selection includes an unwanted item, hit Cmd–K (Mac) or CTRL–K (Windows) followed by Cmd–D (Mac) or CTRL–D (Windows) to skip that particular occurrence.

This feature excels at renaming variables across a function, updating multiple similar function calls, or modifying repetitive HTML structures simultaneously.

Navigating Code

Efficient navigation distinguishes experienced developers from beginners. VS Code provides multiple sophisticated methods for moving through your codebase quickly and precisely.

• Hit Cmd–Shift–O (Mac) or CTRL–Shift–O (Windows) (the keystroke for Go > Go to Symbol in Editor) to navigate within specific file types such as CSS or JavaScript. For example, in CSS files you can instantly jump to selectors, while in JavaScript you can navigate directly to function definitions. This feature becomes increasingly valuable as your files grow in complexity.
• To jump to a specific line number, hit CTRL–G (Mac and Windows) and type the line number. Hit Return (Mac) or Enter (Windows) to navigate there instantly. This is particularly useful when working with error messages or debugging output that references specific line numbers.

• 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 by words for precise cursor positioning:

  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

Code folding improves focus by hiding implementation details while preserving the overall code structure. This feature is essential when working with large files or when you need to concentrate on specific sections without distraction.

To fold or hide a section of code, place the cursor anywhere in the target code block and use the following keystroke combination. Repeat the same sequence to unfold and reveal the code again.

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

Alternatively, you can use these more direct shortcuts for immediate folding control:

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

Strategic use of code folding transforms overwhelming files into manageable, scannable documents, allowing you to maintain a high-level view while drilling down into specific implementations as needed.