DEV Community

Cover image for 9 Useful Visual Studio Code Shortcuts for Beginners (with Gif Demos)
Lucy Bullen
Lucy Bullen

Posted on • Updated on

9 Useful Visual Studio Code Shortcuts for Beginners (with Gif Demos)

A compiled list of the best visual studio code (version 1.65.2) tricks I have been taught or googled.

  • Create multiple cursors: command d
  • Copy and paste a line of code: (place cursor at the end of the line) shift option up-arrow / shift option down-arrow
  • "Stringify" rogue datatypes: (highlight the word) '
  • Toggle comments: control /
  • Wrap text: option z
  • Get more error details: shift command m
  • Color parentheses and brackets: enable "Bracket Pair Colorization"
  • Shift blocks of code vertically: option up-arrow / option down-arrow
  • Shift blocks of horizontally: tab / shift tab

Create multiple cursors

Have you ever needed to edit the name of a variable but it exists in many places in your code? Use command d to capture successive instances of that variable name and edit them all at once. However, proceed with caution, this will capture instances even if they are nested in a larger word. For example, using command d on book will also capture book in a variable name bookReview or bookTitle.

Gif demonstrating creating multiple cursors in visual studio

Copy and paste a line of code

This shortcut is good for writing similar lines of code one after the other. Save some control c + enter + control z time and use shift option down-arrow to quickly copy a line of code onto the next line below.

Gif demonstrating copy/pasting a line of code with one keyboard shortcut

"Stringify" rogue datatypes

Sometimes an array will be created with or a variable will be assigned to string-like values not wrapped in quotes. JavaScript will interpret these values as other variables, not strings. Avoid awkwardly adding quotes and copy-pasting the values in between them; instead highlight the value and type either a single quote ' or double quote ".

gif demonstrating stringifying rogue datatypes

Toggle comments

For me, toggling comments has been a valuable tool for documenting code processes and debugging sections of code. Command / on a block of code applies the correct comment syntax no matter what language is being used. It saves both the time spent googling comment syntax and the time applying comment syntax to each individual line of code.

gif demonstrating toggling comments with a keyboard shortcut

Wrap text

Option z is great when working on a file between two different screen or font sizes. Don't take the time to find an optimal break point on a long comment or line of code; let Visual Studio Code do the work resizing the words per line for you.

gif demonstrating wrapping code with a keyboard shortcut

Get more error details

The more information that can be provide on errors, the better. Often my indicator that something is incorrect is when my file name tab turns red. I then scan the file for red squiggles in the code or blatant syntax issues. Shift command m eliminates the code scanning. Clicking on each error detail shown highlights the suspicious error line and helps debugging move faster.

gif demonstrating the error details that can be pulled up

Color parentheses and brackets

Not only does this trick save me from squinting at my code and counting open brackets under my breath, it has also decreased the time I spend debugging syntax errors. Enabling Bracket Pair Colorization provides an interactive visual aid. Suppose you have a function that creates an array of dictionaries, each dictionary having some value equal to another array - that's at least 4 sets of brackets right there. Bracket Pair Colorization gives each set a unique color allowing you to quickly spot unclosed or out of order brackets.

gif enabling bracket pair colorization in the settings

Shift blocks of code vertically

Shifting blocks of code with option up-arrow or option down-arrow is useful for moving code blocks in and out of different functions or moving them to entirely different locations in the code, all while maintaining the correct indentation.

gif shifting code blocks vertically

Shift blocks of code horizontally

This final trick is for keeping code clean and readable. Highlighting a section of code and using tab or shift tab will indent or outdent respectively all at once.

gif shifting code blocks horizontally

Special thanks to my teachers who've shown me tricks and/or sent me resources: Ix Procopios, Sam Waters, and Bryan Fowler!

For more shortcuts check out the following:
(https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf)
(https://code.visualstudio.com/docs/getstarted/tips-and-tricks)

Discussion (0)