Top 10 VSCode Extensions To Boost Up Your Productivity

Top 10 VSCode Extensions 2020

I have been using VSCode for a year (2019). I have used some other IDEs as well like Atom, Sublime Text etc. With no doubt, they are amazing editors but I found VSCode friendly and super amazing in comparison to other IDEs. There are some plugins/extensions in VSCode which can boost up your programming speed and productivity. If you too are a VSCode user then you should know about these extensions and I am sure you will love it. To download all these extensions, you can go to the marketplace in VSCode and install it or you can go to the link I have attached with the heading. In this article, we will talk about these top 10 VSCode extensions to boost up your productivity:

Git Graph

If you are a VSCode as well as a git user then you must try it. It allows you to perform all the git actions through VSCode window. You don’t need to go back to your browser and then log in to git and then write commands for push, pull and other actions. You can perform all the actions (like pull, push, create, delete, fetch, merge branches etc) just by installing a single extension. Also, you can view the history of the git in the same window.

In this video, I have shown only the git push command and the history; you can perform all the possible actions here and see the history of all those actions.

Quokka

Quokka extension is just awesome. After installing this extension, you will feel like your IDE has become a playground. Your values will be updated at run time and you will be able to figure that out within your workspace next to related code. It is not only available in VSCode but also in WebStorm, Sublime and Atom.

Live Share

Live Share is a VSCode extension that allows you to work in a team in real-time. You can do pair programming, debugging etc collaborating with your partner anytime anywhere. You no longer need to make repositories and then cloning and all those kinds of stuff to work with your teammates. Collaboration with your team just by using this extension regardless of what language you are using and what application you are making is cool.

Please visit here to know the details and demo of Live Share.

REST Client

If you are a backend developer or a full stack developer then you should try this extension. It allows you to send an HTTP request and you can view the response in your editor. It can organize multiple requests in the same file. You can also view the request history.

After you send request, another pane will appear in your workspace where you can see all you status, history etc.

Path Intellisense

Have you ever struggled with the path of any of your file while coding? I am pretty sure you might have. I too have that experience until I found this extension. It autocompletes the file path or file name while you are importing something from some other file or directory. After enabling this extension, you don’t need to remember the path, it will guide you. So, if you don’t want the hassle of remembering paths then this extension is a must-have extension for you. 

Live Server

It launches the local development server with live reload feature. After you have made some changes in your code and save it, you can directly see those changes in the server; you don’t need to hit that refresh button again and again. If you are a front-end developer then you will love this extension because I know how irritating it is to hit the reload button again and again for just a small change in your code. 

Auto rename tag

It automatically renames the paired HTML/XML tag. If you are using tools like HTML, React, React Native etc then you might have known that how annoying it is to rename the tags because you need to rename the both opening and closing tags. Auto rename tag solves this problem and helps you solve a lot of time. Using this extension, when you are renaming your opening tag then your closing tag is updated(renamed) automatically and vice-versa.  

Bracket Pair Colorizer 2

This extension allows you to have matching brackets of a block recognizable with the help of colours. There is a default colour set which you can customize anytime you like in the settings. It also makes the starting and end of the block recognizable with the help of a line. Using this extension, you don’t need to waste your time searching for the starting or the ending of any block. This is also only available for VSCode.

You can see the color of opening and closing bracket and also the line which guides from starting to the end of the bracket.

Prettier

Name itself says prettier; means it makes code look clean and prettier. I have been using it for a year and I found it beneficial. It is a code formatter which wraps up the code into its own format which is pretty beautiful. This works with tools like JS, HTML, CSS, GraphQL, YAML etc. It is not only supported in VSCode but also in Atom, Vim, Visual Studio, Sublime Text, Espresso, Emacs and WebStorm (WebStorm has built-in support of Prettier).

ES7 React/Redux/GraphQL/React-Native snippets

This extension is for those who are using tools like React, GraphQL and React Native. It provides snippets for tools like JS, React/React Native with babel plugin. It will save you’re a lot of time as it gives you the readymade template of methods used in those tools when you type the prefix defined by it. For example ‘rfc’ gives you the template for React functional component and ‘rcc’ gives you the template for React functional component. There are many such prefixes.

Some other extensions that you might want to check:

Polacode, Project manager, Fira Code, Color Picker, Debugger for Chrome.

These all extensions are those which I prefer and also suggest you to give it a try. If you have any other suggestions for me then do let me know in the comment section below.

Read our other articles here:

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Top