DEV Community

Cover image for 10 Visual Studio Code Shortcuts Every Web Developer Must Know
Ewomazino Akpareva
Ewomazino Akpareva

Posted on

10 Visual Studio Code Shortcuts Every Web Developer Must Know

Hello guys,
Today, I would like to share some visual studio shortcuts that I use when I code, and hopefully, you would find some useful.

Here we go.

  1. Duplicate code: I often need to duplicate a line of code when i work. This can be done by copy-pasting the code in a new line but you get to save some time by using the shortcut below. To duplicate a block of code, highlight the code then use the shortcut below.
ctrl + shift + arrow down (Windows)
cmd + shift + arrow down (Mac)

Enter fullscreen mode Exit fullscreen mode
  1. Find and replace all You may want to change the occurrence of a word, class, or variable in a file or throughout your codebase. This can be done using the shortcut below.
ctrl + shift + h (Windows)
cmd+ shift + h (Mac)
Enter fullscreen mode Exit fullscreen mode
  1. Edit multiple lines There is normally a single cursor when using VSCode, however, you can create multiple cursor points when you need to make multiple changes on a file. To do this press
alt + left-click
Option + left-click 
Enter fullscreen mode Exit fullscreen mode
  1. Move a block of code upward/downward Highlight the block of code and use the shortcut below
alt + up/down arrow (Windows)
option + up/down arrow (Mac)
Enter fullscreen mode Exit fullscreen mode
  1. Indent a block of code. Highlight the block of code and use the shortcut below
ctrl + [ or ](Windows)
cmd + [ or ] (Mac)
Enter fullscreen mode Exit fullscreen mode
  1. Toggle the terminal VSCode has an integrated terminal. You can use the shortcut below to show or hide this terminal.
ctrl + ` (Windows)
cmd + ` (Mac)
Enter fullscreen mode Exit fullscreen mode
  1. Select multiple tags Highlight a tag and use the shortcut below to select the next occurrence of such tag.
ctrl + d (Windows)
cmd + d (Mac)
Enter fullscreen mode Exit fullscreen mode
  1. Add a comment or comment out a block of code
ctrl + / (Windows)
cmd + / (Mac)
Enter fullscreen mode Exit fullscreen mode
  1. Toggle Wordwrap function Word wrap is a function that makes your text in VSCode responsive by automatically placing long text into the next line.
alt + z (Windows)
option + z(Mac)
Enter fullscreen mode Exit fullscreen mode
  1. Reopen recently closed file
ctrl + shift + t (Windows)
cmd+ shift + t (Mac)
Enter fullscreen mode Exit fullscreen mode

Know some useful shortcuts, add them in the comments.

Feel free to check out my 100Days of JavaScript Course which I created to help beginners/intermediate level JavaScript developers sharpen their JavaScript skills.

Thanks for reading this article.
if you enjoyed it, feel free to connect with me:

Website: ZinoTrustAcademy.com

Twitter: @ZinoTrust

YouTube: ZinoTrust Academy

GitHub: ZinoTrust

Discussion (0)