Visual Studio Code (VS Code) is one of the favourite IDE among developers around the world. Having a wide range of extensions is the biggest advantage of using VS Code in your application development. Having been an avid user of VS Code since 2015, it is one of my favourites. And amongst its extensions, here are my favourite 10 VS Code extensions that I regularly use to improve my productivity.
1) Live Share
If you are a developer working with a team remotely then this extension is for you. Microsoft developed VS Code extension Live Share enables you to collaboratively edit and debug your code with your team in real-time. With the help of live share, we can do code review or debugging sessions immediately without needing to clone any repos to GitHub or using any 3rd party services. You are free to use your GitHub or Microsoft credentials to log in to your live share account.
2) Code Spell Checker
Believe me, this is one of my favourite in VS Code extensions. I make lots of spelling mistakes in my code for declaring a variable or defining a function. Code Spell Checker will help you to catch those common spelling errors. This spell checker will work well with camelCase, snake_case etc.
3) Thunder Client
Of late, I have started using this extension quite often. If you are more on the Web API development side, you must be familiar with Postman. Though I have no issues with Postman, you can use this extension as an alternative to the Post Man. Thunder Client will help you to test your API calls inside your VS Code environment and What’s more, it is lightweight too.
4) Import Cost
If you are mostly writing JavaScript code, you need to use lots of NPM packages and this package size will affect your code performance. With the help of the Import Cost extension, you can identify the size of each package consuming in your code. If the imported package size is too large, this extension will give you a warning in red. Based on that you can decide whether you need to use this package or not.
5) Error Lens
Making syntax error while writing code is very common. Sometimes we may need to spend hours to identify some simple errors like bracket, semicolon or comma. With the help of the Error Lens VS Code extension, you will be able to identify those errors in no time. This extension will highlight the entire line wherever a diagnostic is generated by the language and also prints the message inline.
6) GitLens — Git supercharged
If you are using Git in your development cycle, you must use this extension. GitLens will tell you recent commit details of each line of code who committed the code and when. You can navigate through the history of code and identify how the code evolved. Use this extension, it provides lots of features and customisable options.
7) Bracket Pair Colorizer
Identifying the opening and closing bracket in a long string of code is one of the most time-consuming tasks in development. Bracket Pair Colourizer extension will help you to identify opening and closing bracket with the same colours. This will helps you to not miss any brackets.
8) Live Server
Live Server extension will help you to Launch a local development server with a live reload feature for static & dynamic pages. You will see the changes instantly reflect in the browser when you save your code. You don’t need to reload the page every time you make any update in your code. This will help you to improve your development speed.
9) Better Comments
Comments are essential in any code. It will help other developers to understand your code without much hassle. The Better Comments extension is one of the common extension that will help you create more human-friendly comments in your code.
10) Prettier – Code formatter
Prettier is one of the popular extension in VS Code. If you haven’t heard about this, give it a try. You will love it. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. This will save lots of your development time.
Final Note
Try the above extensions if you are not using them. It will help your productivity and increase your development speed. Here are few more extensions if you are more into Vue.js, React or firebase.
- JavaScript (ES6) code snippets
- ES7 React/Redux/GraphQL/React-Native snippet
- Sass
- Live Sass Compiler
- Vetur
- Vue
- Firebase Snippets
If you love this article and found some extensions that you are not using, please share them with your team. If you have any other extension that will help to improve productivity especially in Frontend development (Vue.js & React) and NodeJs development, please mention that in the Comments section.
