Sign in
Log inSign up

VS Code Tips and Tricks to Improve Productivity

Aryan Chaudhary's photo
Aryan Chaudhary
·Aug 11, 2021·

2 min read

VS Code Tips and Tricks to Improve Productivity

1) Comment out a block of code using a single shortcut!

Many times we are in situations where we want to comment out multiple lines of code, but the traditional method of putting '#', '//', etc before each line is itself too cumbersome. But did you know that you could do it with just a single shortcut? Well, the shortcut is: CTRL + /

-> Select the lines > Press CTRL + /

image.png

2) Git integration

VS Code comes with Git integration that allows you to commit, pull, and push your code changes to a remote Git repository.

You just need to open an enter a VS Code that belongs to a Git repository. The editor will show the difference between the working copy and the current file in a remote repository. This won’t work without an online connection; one is required to remain connected with the Git repository. image.png

image.png

3) Split view

image.png Suppose you're working on a project and there are different files on which you want to work on, simultaneously. So to do this you can simply use the split view feature!

You can also customise the layout of the split view either horizontally or vertically!

To go into split view: View -> Editor Layout -> Split Up.

4) Edit Multiple Lines Simultaneously

To edit multiple lines of text in different sections of your document, you can use multi-cursor editing. This feature allows you to place multiple cursors in different spots so text can be added, modified, or deleted. You just have to hold CTRL and click the line where you want to place the cursor.

Bonus tip: Press CTRL + D if you want to select multiple same words or lines. image.png

5) Get multiple tags at once

Yes, you don't have to type a tag repeatedly! You can simply write the name of the tag and write 6 or 7 or* the number of times the tag is required.

Eg: If you need 6 list tags then

li*6
// Press tab
// Result: 
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

6) Autocomplete HTML tags with Classes and IDs

VS Code provides this cool feature by which we don't have to write the whole Class name, ID and then close the HTML tag. We can simply specify the name of the tag, then use '.' for classes or '#' for IDs! image.png

image.png

image.png

Hope this helped! There are so many more cool shortcuts and tricks. These are the basic ones which I use in my day to day work 😄