Every developer should know these VS Code shortcuts

Introduction

In this article, I will be talking about the VS Code shortcuts which every developer must know. These are the shortcuts that are being used professionally in their daily work.

I also almost use the shortcuts which are mentioned here. From my experience, I can guarantee you that my productivity is a little more because of these shortcuts.

If you like it then don’t forget to share with your friends on Social Network.

File Search Palette

This is like a Search Engine for our project files. You can look for files in the current workspace using this. As I told you this a search engine means files means this will always give us more result than expected.

If you are looking for index.js file and it exists in 4 different folders then it will show all the four results. You have to select which index.js you were looking for, with ever file you will find its path.

  • Mac : Command ⌘ + P
  • PC : Control + P

Open the command palette and search for .html and you will surprise to see the a list of the file which contains .html in their name.

Command Palette

This is like a Search Engine for commands, here you search for all available commands in VS Code. You can do almost all the things from here i.e Change theme, toggle sidebar, open settings, wrap content, etc.

You just have to open the Command Palette and enter what you want to do.

  • Mac : Command ⌘ + Shift ⇧ + P
  • PC : Control + Shift + P

There are one more shortcut to open the command pallet.

  • Mac : F1
  • PC : F1

Open the command palette and search for Delete Line.

Toggle Sidebar

We have a sidebar where we see our files and folder structure and much more information. To open and close it there is a shortcut that will definitely save your time. If it doesn’t save time then also you will enjoy it because we don’t like to leave the keyboard again and again.

  • Mac : Command ⌘ + B
  • PC : Control + B

Show/ hide integrated terminal

All most all the developers work with the Terminal/Command Prompt. If you frontend developer or if you backend or if you are DevOps person. You use the terminal little bit every day.

  • Mac : Control ⌃ + `
  • PC : Ctrl + `

Switch Tab

We are pro developers and we work with quite big project. We open more than one file at a time and we switch between files very frequently.

There are two ways to switch between files. First way used when you want to switch to neighbor tabs and second method is used when you want to jump from one corner to other corner.

Switch to neighbor tab

  • Mac : Control ⌃ + Tab
  • PC : Ctrl + Tab

Jumping from one corner to other corner

We need to tell the file sequence number in order to move to that file.

  • Mac : Control ⌃ + < Sequence Number >
  • PC : Ctrl + < Sequence Number >

Suppose we have 5 tab open we are now on tab number 4. We want to move to 2 tab then we will press.

  • Mac : Control ⌃ + 2
  • PC : Ctrl + 2

Close current file

There is a shortcut that will close the current file and this shortcut is very common. This is so common that I feel it’s a standard because I can close the current tab/window in an application using these shortcuts. You should definitely remember this forever.

  • Mac : Command ⌘ + W
  • PC : Control + W

Lots of application support this shortcuts but not every application.

Open Last closed file

We have a sidebar where we see our file structure and much more information. To open and close it there is a shortcut which will definitely save your time. If now time then also you will enjoy it because we don’t like to leave the keyboard again and again.

  • Mac : Command ⌘ + Shift ⇧ + T
  • PC : Control + Shift + T

Lots of applications support this shortcuts but not every application.

Move Select line

Lots of time We want to re-arrange the code, I mean to change the order of code. Move the line above or move it little down from the current line. We can simply cut and paste the code to the desired Line Number but it’s not an efficient way. There is a shortcut key that can help you in doing, you just have to memorize the Key Combination and you are good to go.

  • Mac : Option ⌥ + ↑/↓
  • PC : Alt + ↑/↓

Delete previous word

We are writing some comment and as you know sometimes we write a paragraph in a comment. It’s quite obvious that we will do some mistake and we want to delete the word and rewrite. There is a shortcut key that will delete the previous word from the current cursor point.

  • Mac : Option ⌥ + delete
  • PC : Alt + backspace

If you write a blog then also it will help you. Some of you might be wondering who writes a blog in the VS Code. I write a blog in VS Code and in the face the article you are reading now is written in VS Code. I write a blog in markdown and I suppose you know about markdown. This blog is being built from a markdown file.

This shortcut works almost everywhere, you can try this while writing an email, filling a form.

Delete Current Line

Sometime we want to remove the current line, and we can do that very easily by backspace/delete button. If I tell you there is one other way and that is more efficient and it will also save you time. You just have remember the key combination.

  • Mac : Command ⌘ + Shift ⇧ + K
  • PC : Control + Shift + K

This shortcut works almost everywhere, you can try this while writing an email, filling a form.

Multiple Cursor position

If you want you cursor at multiple position then there are two ways.

Using Keyboard

You have to use these key combinations to bring one cursor above or below. You can’t add cursor at the specific point but the next trick can do that.

  • Mac : Option ⌥ + Command ⌘ + ↑/↓
  • PC : Alt + Control + ↑/↓

Using Keyboard and Mouse/TouchPad

You have to use this combinations and wherever you apply this. You will see a new cursor there and if you write/delete sometime then it will do that at all the positions.

  • Mac : Command ⌘ + Click
  • PC : Control + Click

Comment and uncomment

While writing code we wan to comment the code lots of time to see if its creating the bug or not. There is a key which can help you in commenting the selected code. You can also un-comment the code using the same key.

Basically this key combination toggle comment.

  • Mac : Command ⌘ + /
  • PC : Control + /

Find next occurrence

Sometimes we want to replace some words, like the variable inside one function/method. You can’t do find and replace it, because the same variable name is used in some other method/function. Here we will select words one by one by using key combination and once all the occurrence has been selected we can delete the word or replace with new word.

  • Mac : Command ⌘ + D
  • PC : Control + D

Skip some occurrence while doing multiple selection

Sometimes we want to select occurrence of the words but also want to not select some occurrence which come in the sequence.

First of all you will start selecting the next occurrence

  • Mac : Command ⌘ + D
  • PC : Control + D

Once you find any occurrence which you want to skip you just have to press

  • Mac : Command ⌘ + K
  • PC : Control + K

After pressing the above key combination you have to select the occurrence and it will skip the previous occurrence.

Select All Occurrence

Sometimes we want to select all occurrence of any words and want to make change to that word or want to add something before/after that word. Once you got the cursor at att occurrence position of any word then you can control changes anything relative to the words.

  • Mac : Command ⌘ + Shift ⇧ + L
  • PC : Control + Shift + L

Opening VS from CLI

You can open the VS code right from your terminal and it’s important. I know some real use cases when I use it and I have seen people using it.

You have to enter code command and it will open the VS Code, it’s more than just opening the VS Code. You can specify the path of filename or path of directory and it will open the VS Code with that file/directory.

  • code command will open the VS Code only.
  • code . command will open the VS Code with current working directory as workspace.
  • code <filename> command will open the VS Code with specified .
  • code <filename> command will open the VS Code with specified as workspace.
$ code
$ code .
$ code <filename>
$ code <directory>

If you have code command doesn’t work in your terminal then go to this link

Conclusion

I hope you find it useful and I am also sure this will increase your productivity. If you know any other shortcuts which is being used by you on a daily basis then please share with us in comments.

There is a website PDF of all the available shortcuts you can read them and learn all the possible shortcuts. The PDF document belongs to the VS Code team and they have documented it.