Blog GeneralYou are hereVS Code Tips and Tricks: Useful Commands

VS Code Tips and Tricks: Useful Commands

14 commands you should consider using in your workflow

Martin Kruger Profile Image

Martin Kruger

May 04, 2019 - Posted in General
SHARE

There are quite a few shortcut commands and tools available that are in VS Code which can greatly assist in programming. Here are 14 different commands that I believe will help you improve as a developer.

Some of the default keybindings for the tips and tricks below can be difficult to use, and you should consider setting your own keybindings that are easier to reach.

I’ve also covered these tips and tricks previously in the following YouTube video if you would like commentary on each of the commands:

Let’s start working through them:

1. Expand Line Selection

Ctrl+L

Expand Line Selection selects the entire line, which you can then copy/paste or move around.

2. Copy Line Up / Down

Shift+Alt+
OR
Shift+Alt+

Copy Line Up/Down lets you duplicate a line upwards or downwards from the line your cursor is positioned on.

3. Delete Line

Ctrl+Shift+K

Delete Line will delete the entire line where the cursor is positioned.

Shift+Alt+
OR
Shift+Alt+

4. Toggle Line Comment

Ctrl+Shift+/

Toggle Line Comment will comment out the line that your cursor is positioned at. It will also uncomment a single line of code.

5. Toggle Block Comment

Ctrl+Shift+A

Toggle Block Comment will comment out multiple lines of code as well as uncomment multiple lines of code.

6. Move Line Up/Down

Alt+
OR
Alt+

Move Line Up/Down will let you quickly move a line upwards or downwards so you can reposition it without having to cut and paste it.

7. HTML Emmet

An emmet is an alias to run a script that typically generates a bunch of code for you.

You can use an emmet to generate the content of a basic HTML file by typing ! and then pressing Tab or clicking the option with the mouse.

Your file will need to have the .html extension.

8. Wrap with Abbreviation

Wrap with Abbreviation is a great tool to be using and is a huge time saver. It will wrap your HTML content with an element that you type in. For example, you can very quickly put a <h1> tag around a line of text which is demonstrated in the video below.

Wrap with Abbreviation does not have a default keybinding so you will need to set your own. I show you how to set your own keybinding at the bottom of this article if you are unsure of how to do that.

9. Add Selection to Next Find Match

Ctrl+D

Add Selection to Next Find Match will select text that is the same as the word your cursor is placed on or that you have highlighted. This is very useful for renaming variables or changing values that are the same. You can force it to only select words that have the same case (uppercase/lowercase) if you set your Find options to Match Case (Alt + C).

10. Go to Last Edit Location

Ctrl+K
THEN
Ctrl+Q

Go to Last Edit Location will take your cursor back to where you last edited, even if it’s in a different file. This lets you move around very quickly.

11. Rename Symbol

F2

Rename Symbol is probably my favorite of these tips. It works in both JavaScript and HTML files, but will operate slight differently.

In HTML, it will rename the opening and closing tags of the element which is a huge time saver as you don’t have to go and change the closing tag yourself.

In JavaScript, Rename Symbol is even more powerful. You can use it to change the name of a variable throughout your project. It can also be used to rename a function which will then change the function name as well as any references to this function.

12. Find in Files

Ctrl+Shift+F

Find in Files is like a normal search, except it is going to search through all of your files. This will usually be your main method of searching unless you want to only search within your file.

13. deleteWordLeft and deleteWordRight

Ctrl+Backspace
OR
Ctrl+Delete

deleteWordLeft / deleteWordRight will quickly delete words instead of letters. This allows you to make corrections faster. deleteWordLeft will delete a word left of the cursor whereas deleteWordRight will delete a word right of the cursor.

14. Multiline Editing

Alt
OR
Alt+Shift

Multiline Editing is where you have multiple cursors and your input is duplicated at each of these cursors. This allows you to very quickly make changes to multiple lines of code.

The first way of performing multiline editing is to hold alt + shift and then select a block of code:

The second way of performing multiline editing is to hold alt and click where you want a new cursor to appear. This gives you more control over which lines are being edited:

How to change keybindings

You can open the keybindings window by pressing:

Ctrl+K
THEN
Ctrl+S
VS Code Keyboard Shortcuts settings

Type in the command you want to add a new keybinding to, such as Wrap with Abbreviation.

You can now press the keybinding you want to add. I will do Ctrl + T in this example.

VS Code adding keybinding

You will see that there is a conflict with an existing keybinding that needs to be deleted.

Type the keys of the keybinding you have just set, for example, Ctrl + T, and then delete the conflicting keybinding by selecting it and then pressing the delete key. I will be deleting the command Go to Symbol in Workspace...

VS Code Deleting keybinding

You are finished and can now close the Keybindings window.

VS Code No more conflicts

Closing

Thank you for taking the time to read through this article. I hope that at least one of these commands will be useful to you and help you on your journey to become a better developer.