in

PowerShellPowerShell

15+ Visual Studo Code Shortcuts for Developer’s increased Productivity

Visual Studio code is a very powerful code editor. Learn several important keyboard shortcuts to increase productivity today!

VS Code shortcuts

VSCode Shortcuts:

There are several important keyboard shortcuts that can be easily accessed in the Visual Studio Code.  But not everyone knows about these shortcuts.  Below is the list of shortcuts that should be used by all developers to increase their productivity substantially.

Jump to:

People also search for:

[LATEST] PowerShell Extension in Visual Studio Code

Command Palette:

The command palette is one of the most useful tools in the Visual Studio Code.  It is lots of features and it can be used for searching a file by name, going to a specific line, and accessing different settings in Visual Studio Code.  The keyboard shortcut for the command palette is given below.

visual studio code command palette
visual studio code command palette

On Windows:

ctrl+shift+p

On Mac:

command+shift+p

Uses of command palette:

  1. Searching file by name.
  2. Going to a specific line.
  3. Accessing different settings in Visual Studio.

Accessing Settings:

The settings page is useful for setting the different setting values of the highly customizable Visual Studio Code.  The settings can be easily accesses using the below shortcut.

visual studio code settings
visual studio code settings

On Windows:

ctrl+,

On Mac:

command+,

Duplicating the lines:

Visual Studio code helps the users to duplicate the lines above and under the given line.  This is useful while coding in HTML because HTML often involves repeating the same code over and over again.

duplicating code lines in visual studio code
duplicating code lines in visual studio code

Duplicate code up on Windows:

shift+alt+up

Duplicate code down on Windows:

shift+alt+down

Duplicate Code up on Mac:

shift+option+up

Duplicate Code down on Mac:

shift+option+down

Emmet Abbreviations:

We know that creating an ordered list and the unordered list is painful with the same list-item tag repeating every time.  This can be made easy by using the below technique.  The following steps will give the output in the image instantaneously without even typing all that code.

visual studio code completion
visual studio code completion

Follow these steps to get the desired output.

  • Type ul.
emmet abbreviation
emmet abbreviation
  • Type #MyId as shown in the figure.
emmet abbreviation adding id
emmet abbreviation adding id
  • Type .MyClass as shown in the figure.
emmet abbreviation adding class attribute
emmet abbreviation adding class attribute
  • Use the greater than symbol.  It is used to tell Visual Studio code that the elements followed are inside the previously given elements.
emmet abbreviation adding internal items
emmet abbreviation adding internal items
  • Now enter li as shown in the figure.
emmet abbreviation adding internal items
emmet abbreviation adding internal items
  • Now enter *5(times 5).
number of internal items
number of internal items
  • You will see these emmet abbreviations being shown.
  • Press tab.
completed emmet abbreviations
completed emmet abbreviations

Note: If you do not see the emmet abbreviations, delete one character and type it again.  Visual Studio code needs to know that we are attempting an emmet abbreviation.

Clearly Emmet abbreviation is a very powerful tool that makes coding very easy in Visual Studio code.

Moving a line up/down:

We can easily move a line up and down in the Visual Studio Code.  This helps us reposition the content with ease.  This underrated shortcut will save tons of copy-pasting time.

move line up and down
move line up and down
move line up and down
move line up and down

Move line up on Windows:

alt+up

Move line down on Windows:

alt+down

Move line up on Mac:

option+up

Move line down on Mac:

option+down

Adding Indentations:

Adding indentations helps make the code more readable.  We can add indentations using the below keyboard shortcuts.

adding indentations
adding indentations

On Windows:

ctrl+[

ctrl+]

On Mac:

command+[

command+]

Format Document:

Adding indentations are very useful when we have only a small piece of code to make it readable.  Formating the entire document is recommended over adding/removing indentations.  The below keyboard shortcut will format the document.  Not only that it brings the right amount of indentations for the code but also puts them in a very readable format.

formatting document
formatting document
formatting document
formatting document

On Windows:

shift+alt+f

On Mac:

shift+option+f

Multiple selections:

Multiple selections help us to change the multiple instances of the code into something.  This helps us drop a cursor at every instance of the text.

making multiple selections
making multiple selections

On Windows:

ctrl+d

On Mac:

command+d

Multiple cursors:

Multiple cursors help us drop multiple cursors at various instances of the code.  This lets us add text at all the places without having to copy and paste the text again and again.

dropping multiple cursors
dropping multiple cursors

On Windows:

alt+click

On Mac:

option+click

Comment lines:

We can select multiple lines and comment on them using this easy keyboard shortcut.

comment shortcut in vscode
comment shortcut in vscode

On Windows:

ctrl+/

On Mac:

command+/

In addition to this keyboard shortcut, we can use another shortcut as well.

On Windows:

ctrl+k+c

On Mac:

command+k+c

Show and Hide terminal:

The terminal is an integral part of development.  It is integrated into Visual Studio code for easy access. The terminal can be shown and hidden using the following keyboard shortcut.

show and hide terminal
show and hide terminal

On Windows:

ctrl+`

On Mac:

command+`

Split terminal:

We can have multiple terminals at the same time.  We can split the terminal using the following command.

split the terminal
split the terminal

On Windows:

ctrl+shift+5

On Mac:

command+shift+5

Switch between the terminals:

After splitting the terminal, we can switch between the terminals using the below keyboard shortcut.  This shortcut will let us switch between the terminals in the left and right.

switch between the terminals
switch between the terminals

Go to right terminal on Windows:

alt+right

Go to left terminal on Windows:

alt+left

Go to right terminal on Mac:

option+right

Go to left terminal on Mac:

option+left

Toggle Side Bar:

The sidebar is very useful to get to the project files, git repository, Visual Studio Code extensions, and more.  But at times, we can appreciate a screen full of code editor.  We can toggle the sidebar using the following shortcut.

toggle the side bar
toggle the side bar
toggle the side bar
toggle the side bar

On Windows:

ctrl+b

On Mac:

command+b

Sidebar file explorer:

We can access the files in the project using the sidebar.  The explorer pane in the sidebar is for this purpose.  We can access the explorer using this shortcut.

file explorer in visual studio code
file explorer in visual studio code

On Windows:

ctrl+shift+e

On Mac:

command+shift+e

Sidebar Search all:

We can search for a text in the entire project files using the keyboard shortcut.

search the project files
search the project files

On Windows:

ctrl+shift+f

On Mac:

command+shift+f

Sidebar Github:

We can perform the repository actions from the integrated source control manager.

source control in Visual Studio code
source control in Visual Studio code

On Windows:

ctrl+shift+g

On Mac:

command+shift+g

Sidebar VScode Extensions:

We can add, search, remove different Visual Studio Code extensions from the sidebar.  This keyboard shortcut will bring up the extension manager.

visual studio code extensions
visual studio code extensions

On Windows:

ctrl+shift+x

On Mac:

command+shift+x

Conclusion:

In this post, we learned about many useful keyboard shortcuts in Visual Studio code.  Visual Studio Code is full of tricks and features that make the life of the developer very easy.  If you want to know more about it, let us know in the comments below.

For more awesome and useful posts, stay tuned to TecKangaroo.

Leave a Reply

Your email address will not be published. Required fields are marked *