VS Code Tips and Tricks: Useful Commands
14 commands you should consider using in your workflow
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:
Expand Line Selection selects the entire line, which you can then copy/paste or move around.
Copy Line Up/Down lets you duplicate a line upwards or downwards from the line your cursor is positioned on.
Delete Line will delete the entire line where the cursor is positioned.
Toggle Line Comment will comment out the line that your cursor is positioned at. It will also uncomment a single line of code.
Toggle Block Comment will comment out multiple lines of code as well as uncomment multiple lines of code.
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.
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.
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.
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).
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.
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.
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.
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.
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
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:
You can open the keybindings window by pressing:
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.
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...
You are finished and can now close the Keybindings window.
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.