Visual Studio Code Tips and Tricks

Visual Studio Code is an open-source, light-weight code editor developed by Microsoft and it was built upon Electron Framework. It supports all the platforms such as Windows, Linux and Mac. The performance and the usage of VS Code will be much better than Visual Studio. A tool should be very much user-friendly and also it should contain some useful options to maintain the devloper’s productivity.

In this blog, we’ll explore some useful tips and tricks to increase your productivity using Visual Studio Code.

#1 Extensions

Extensions is a very powerful feature in VS Code. Basically, they are also called as plugins where you can install the respective plugin you want and if you don’t need it, you can just uninstall it based upon your need. And also, there are around 20339 VS Code extensions which helps you to increase your productivity.

Some of my favorite extensions are,

Debugger for Chrome
Angular Language Service
GitHub
Azure Account
REST Client
IntelliCode
Live Share
vscode-icons
Code Runner

These are my useful extension which I use in my day to day development activities.

#2 User Snippets

Let’s say if you are repeating lot of code snippets in your project, it’s not necessary that you must repeat it again and again. In VS Code you can save it as a snippet, and you can reuse it whenever you need.

To create a user snippet, you can go to File -> Preferences -> User Snippets.

You can select the respective language in which you can create a snippet. In this example we are going to do it for HTML and so I’m selecting html.json.

{
	"snippetName": {
		"prefix": "ulwithlist",
		"body": [
			"<ul>",
			" <li>",
			" </li>",
			" <li>",
			" </li>",
			" <li>",
			" </li>",
			"</ul>"
		]
	},
	
}

In html.json file you have to mention the snippetName prefix and body. And once you have given it, just save the file.

And now if I go to HTML and if I type ulwithlist, it will give me this structure.

Likewise you can create multiple snippets based upon your need.

#3 Emmet

Emmet is a kind of plugin which will be very useful in building HTML structure. It is built into VS Code. And it is being enabled by default for html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less and stylus files.

Let’s say if you want to build a unordered list with a span inside it, you can just type this below formula,

ul>>li*N>span.hello$

N denotes the number of lists.

Once you type the formula just press enter and the ordered list will be created.

You can get all the emmet shortcuts in this link. And for developers it will save a lot of time in creating your HTML structure.

#4 Intellisense

Intellisense makes VS Code smarter. You can trigger the suggestion widget by pressing Ctrl+Space. It will throw you the proper suggestions.

And also I use two more extensions called Visual Studio IntelliCode and TabNine which will also give you proper suggestions and also code completions automatically based upon your project. Try out these two extensions and let me know your feedback on the comments.

#5 Quick Open

If you are working in a large enterprise application, it would consist lot of files and it will be very difficult to traverse between the files. But VS Code makes your life easier.

If you want to do it, just press Ctrl + P.

You can search your files with the respective file name, and you can open it instantly. The searching technique is very much faster in VS Code.

You can also use breadcrumbs, but I prefer this way to traverse between the files.

#6 Change your keyboard shortcuts

VS Code consists lot of useful shortcuts. To view all the keyboard shortcuts just press Ctrl + K + S. It will list all the shortcuts which can be used accordingly.

These shortcuts will be very much useful for the developers to increase their productivity. You can also change the shortcuts for the respective actions based upon your need.

Just double on the respective row on which you have to edit the keybinding.

Press the respective keys you want, and it will be saved as shortcut. For the developers I would like to mention whenever you use an IDE or a text editor just try to learn some important shortcuts which will be very helpful during your development process.

#7 Side by side editing

If you want to compare multiple files or if you want to compare and edit multiples files, it can be done at ease in VS Code. To do that, just Right-click on the respective file and select Open to the Side.

Likewise, you can open files as much as you want and you can do the changes based upon your need. This will be more useful when you want to compare two files.

In the above image as you can see I have opened three files and it’s one of my favorite feature in VS Code.

#8 Command Palette

If you don’t know something that how to do it in VS Code just press Ctrl + Shift + P which opens a command palette. You can find out all the commands out there with respective shortcuts.

It will be your best pal in VSCode and let’s say if you want to install any extensions, the options of the respective extensions will also be shown in this command palette.

#9 Multi Cursor Selection

Let’s take a scenario where you want to delete or add something in all your lines of code. Instead of placing the cursor line by line and editing the code, you can place your cursor in all the lines, and you can change it based upon your need.

If you want to do this, press Ctrl + Alt + Down or Up Arrow. Checkout the below example.

From the above GIF, let’s say if I have to change all the container fluids to just container, place the cursor in any one of the occurrences of container-fluid and press Ctrl + Shift + L. The cursor will be placed in all occurrences of container fluid and you can do the corresponding changes.

If you don’t want to change all the occurrences of container-fluid, and if you want to change only first three occurrence, press Ctrl + D three times and it will automatically select the occurrence and you can do the changes respectively.

#10 Breadcrumbs

Breadcrumbs will be very much useful to traverse between your files or code structure. You can enable breadcrumbs by two ways in VS Code

On the menu bar, click on the View option and select Show Breadcrumbs option.

The other of way doing it is, press Ctrl + Shift + P which opens the command palette and type breadcrumbs. Select the option which will be displayed as View: Toggle Breadcrumbs

Once it is done, you should be able to see the breadcrumbs on top of each file in your project. It will be very much useful when you work on a large enterprise project because it contains lot of files and these breadcrumbs will be very much useful.

Conclusion

These are some of the useful tips and tricks that can be used in VS Code to improve your productivity. Apart from this there are lot of shortcuts and extensions which can be used based upon your need. I’ll let you to explore the remaining stuffs and if you find anything interesting please mention it in the comments.

Thanks for reading this blog and stay tuned for more interesting blogs.