Visual Studio Code is a source code editor built by Microsoft. It is publicly released in 2015 and since then it gains so much popularity among the web developers. It is based on the electron.js framework which is used to build the native desktop applications.

According to StackOverflow 2019 survey, Visual Studio Code is the most popular development environments for the developers. But there are differences in the choices by developer skills and roles. Developers who work on mobile development are more likely uses the Android Studio and the same with the developers who work on data science choose Jupiter.

stackoverflow 2019 survey - Visual Studio Code
StackOverflow 2019 Survey Result

In this article, I am going to tell you tips that would help you to be more productive.

If you are not using Visual Studio Code then start using it and I am sure you will like it. 🙂

Setup Auto Formatting

This is the place where most of the developers devote their most of the time.

When you are working in a team then every developer writes their code in their own style which can be very difficult for the others developers who are working on that code or will work on that code in future. Depending upon the editor setup, the same code working for one and might be automatically formatted for others. And such type of formatting becomes an issue.

When we start writing our code than before writing code, we first format it with our editor settings. And we spend a lot of time doing this.

But with the visual studio code editor, you can set the auto-formatting and can save lots of time. 🙂

To format a selection you can use [Ctrl + K, Ctrl + F] and for document format, you can use the [Ctrl + Shift + I]. You can also click the right button of the mouse and then select the desired format.

You can also use the Prettier Extension in Your VS Code to format the code automatically depending upon the configuration file.

Learn How To Use Shortcuts

For the developers, keyboard shortcuts are like Valyrian steel sword(It’s a GOT Fan Things 😉 ) which increase the speed of coding and save lots of time.

Visual studio code has lots of keyboard shortcuts for you. By remembering them, you can increase the speed of your coding and als productivity.

It also provides you with an option to set up your own keyboard shortcuts, in case you don’t like the default shortcuts. It’s pretty awesome 🙂

For Mac and Ubuntu users, You can open this editor by going to the menu under File > Preferences > Keyboard Shortcuts.

You can also use the shortcuts for this [Ctrl+k Ctrl + S].

If you want a full list of shortcuts then I also have that thing for you. 🙂 Yes, I will give you the Official link of the keyboard shortcuts provided by Visual Studio Code Team.

Mac UsersUbuntu UsersWindows Users
Click HereClick HereClick Here

Install Time Saving Visual Studio Code Extensions

Extensions are always time saver for everyone. They enhance the experience of writing code and make your coding life so easy.

If you are not using extensions in your visual studio code then you should start using that.

There are lots of VSCode extensions available which you can use according to your requirement.

You can find all the list of extensions from here or by clicking on the extension icon in the editor.

Visual Studio Code Extension

Edit Multiple Lines At Once

I think we all love this tips. Editing multiple line at once really save some seconds of your. 🙂

WindowsMacLinux
Hold Ctrl + Alt + up/down keycmd + up/down keyShift + Alt + up/down key

Search Across All Files

Most of the times we have to search for some text in all the files. It is very time consuming if you don’t remember in which places you need to search that text.

If you are doing multiple file search frequently then you must know the shortcut for that.

Don’t worry if you don’t know the shortcut. This article is all about that. 🙂

Just use Ctrl + Shift + F to search any text all across all the files. Visual Studio code also gives you the option to search either with match case [Alt + C] or Match Whole Word [Alt +W]. Apart from this you also have the option to exclude/include the files from the search.

Start Using Code Snippet

Code snippets are the template that makes your work easier by automatically enter the repeated code patterns such as loops, ajax request code, conditional statements and your own custom code.

image from visualstudio.com

How do I create a snippet code in Visual Studio?

It is always a good practice to create your own code snippets depending upon your requirement. You can choose or get the snippets from File -> Preferences -> User Snippets in Linux and File > Preferences (Code > Preferences) on Mac OS.

You can define your own snippets, either global snippets or snippets for a specific language. Snippets are defined in a JSON format. Below is the simple snippets of for loop in the Javascript

{
    "For_Loop": {
        "prefix": "for",
        "body": [
          "for (const ${2:element} of ${1:array}) {",
          "\t$0",
          "}"
        ],
        "description": "For Loop"
    }
}

In the above code, For loop is the snippets name. prefix defines how this snippet is selected from IntelliSense and tab completion. body is the content and either a single string or an array of strings of which each element will be inserted as a separate line. The description is the description used in the IntelliSense drop down. The above example has two placeholders, ${1: array} and ${2: element}. You can quickly traverse them in the order of their number. The string after the number and colon is used as an initial default.

Customising Visual Studio Code

We all love to customise the things as per our own requirement. Visual Studio code gives you this flexibility that you can customise editor according to your choice.

Customise Theme

By default, it comes with a dark mode theme. You can change this by going File -> Preferences -> Colour Theme (or press Ctrl+K then Ctrl+T) and it will list down all the installed theme. You can also install the additional theme by clicking on the last link Install Additional Color Theme.

Customise Fonts

You can also customise the fonts of the editor if you do not like the default one. You can change the font size, family and other things by going File -> Preferences -> Settings

This was just a sample of the amazing things you can do to customize your code editor. There are so many more things, from different extensions, shortcuts and a wide range of others that can help make your coding experience much more comfortable and personal.

Conclusion

So we learned some of the best ways of writing code by using the Visual Studio Code. There is no doubt that it has all the features which makes it so much popular for writing the web development code.

By using the above tips, I am sure you can increase your productivity, speed and efficiency.

If you like this article then share this and if you have any suggestions or doubt then comment in the comment box. 🙂

Codecademy Web Development
Pin It