7 Vs Code Unexplored Extension To Increase Your Productivity

7 Vs Code Unexplored Extension To Increase Your Productivity

Overview

VS code is by far one of the most famous code editors but for an untrained developer it might be a simple code editor like notepad or word but in reality, it has a tonne of productivity-boosting features. In this blog, I will share with you some of the best tools of VS code which can multiply your productivity.

1. GitHub Copilot

It uses the Open AI codex to suggest code and entire functions in real-time, right from your editor. It works across dozens of languages and a cool feature about it is that you can use just comments of what you want to do and Copilot will give you the whole function for it.

Copilot can make your task easy and smooth and if you will use it for some time then definitely it will read your mind to suggest what you wanted to code. Most of the time you can access it free from GitHub or use student code to access its free version.

2. GitHub Copilot Labs

Have you faced a problem where you don't know the language much but coding in it and facing an issue understanding how the code is working? Well, I have faced this issue a lot till I don't know about the Copilot labs. Copilot labs convert your code into simple human-readable steps and help you to understand code.

image.png

You can just install the extension named copilot labs and you are good to go it can work on dozens of languages like c++, javascript, java, typescript and much more.

3. VS Code Hot Keys

VS Code is full of features for a developer and if we talk in comparison using only a keyboard and doing all the work is much faster than using a mouse. You can access all the features with key bindings which you can access with a mouse.

  • Key Bindings Use
    ctrl + k + ctrl + s
    
    and you can change any keybindings according to you. image.png

You don't need to learn all of them but using 10-15 is more than enough and this will increase your productivity.

  • Show all commands

Most of the extensions in Vs code come with pre-defined commands and there is a hell lot of commands in vs code itself you just need to type

ctrl + shift + p

and type any script you want.

image.png

  • navigate file Sometimes when you are working on a large scale project it gets cumbersome to navigate between files and open a particular file. By using
    ctrl + p
    
    you can navigate between any folder or any file just type the name of the file and VS code will give you the suggestions for which file you want to open.

image.png

4. Music while coding

If you are one of them who loves to listen to music while coding or doing any other task. VS code got you covered for that also. With and an extension called vscode-spotify you can connect your spotify account to VS code and enjoy music.

image.png

It comes with some cool features like you can control over music directly with a code editor and also edit JSON file to listen according to you.

5. Live Share-

Many of us have been worked in a team on a project and worked live on a project with teammates we have used git and git is a powerful tool but it has some problems like merge conflict and if two or more people working on the same file than it will become cumbersome to manage that file. Here to save us comes VS code Live share Extension.

Live share helps you to collaborate on one file live with others anyone can save changes to one file and file will be saved in the host's system. You can also see the live cursor of the participants with live changes all in you code editor.

  • Install Live Share

image.png

  • Click on Live share

image.png

  • Share Link Share the link and if your friend wants to continue in browser or better if he installs Live share on his vs code and then you both will be able to code at the same time at the same file. Accept your participant's request and you are good to go.

image.png

Bonus Tip: You can also install live share audio and can talk to each other through the code editor.

6. Git Lens-

If you use Git while coding then you must know about git lens although we can commit or edit files directly with VS code to make your work easier with Git. A feature-loaded extension named Git Lens can help you out.

  • Install Git Lens

image.png

  • You can see Git graphs from it and see the details of branch merging and pull requests directly from your code editor.

image.png

  • On hovering to the line Git lens will provide you some extra info about the line like who is the author commit no.

image.png

  • Click on this button at the top right corner and you can search for any commit and see the previous changes.

image.png

image.png

To explore more about Git Lens you can check this tutorial Git Lens]

7. Commonly Used Extension-

When I was a newbie and learning to code the biggest problem I was facing is the little problems like forgetting to close the HTML tag, semi-colons and brackets and by the time I found some extensions, it helped me a lot to write a clear piece of code.

  • Prettier

image.png

This extension can help you to format your code by just saving the code and it comes with a JSON file which you can edit to control the line space, formatting or indentation according to yo.

-Auto Close Tag

image.png

It helps you to auto-close the HTML tags and when you try to replace or rename an HTML opening tag then this will automatically change the closing tag with it.

Here is the #week4 article from the #4articles4weeks contest.