Why is VSCode so popular
Visual Studio Code is rapidly gaining popularity among developers. It is the most popular development environment, and customizability is one of the reasons for its popularity.
So if you’re using VSCode, here’s a list of extensions you must improve your productivity.
1. Git Lens
This extension uses the power of VSCode to help you visualize code creation at a glance when you’re working with your team members on a project.
It shows when a particular code was committed or changed, and who changed it.
Sometimes, your team members submit code that breaks other features of the project, which can be helpful during that time. You can find it here.
2. Wallaby.js
Js is an intelligent JavaScript test runner that runs your tests continuously.
When you change code (without even saving the file), it reports code coverage and other results directly to the code editor.
This extension helps improve your development efficiency.
3. TypeScript Hero
TypeScript is a superset of JavaScript that has optional types and compiles to pure JavaScript.
This extension comes in handy when working with TypeScript. It sorts and organizes your imported files through a feature called “light bulb” and fixes coding errors.
4. Prettier Code Formatter
Prettier is a stubborn code format that makes coding easier for developers.
You can configure it to format when you save and format the code when you save.
Once you have this extension, you will never have to worry about formatting code.
5. Path Intellisense
If you work on JavaScript libraries like React or Angular, and you’re working on large projects, you know how annoying it can be to find the exact path of a component during import.
This extension helps you automatically complete the import path.
It also helps you automate file references in HTML files.
6. Debugger for Chrome
We all know how annoying debugging can be sometimes, so this extension is used to help you debug JavaScript code.
It was developed by Microsoft. We can set breakpoints, step through code, dynamically add debug scripts, and so on.
Assuming we have a function that we are not sure is executing, this extension can help us by pausing in the debugger while it is executing.
7. Bracket Pair Colorizer
This extension allows matching brackets to be recognized by color.
This extension can be a lifesaver when dealing with a large code base during debugging.
The user can define the characters to match and the colors to use.
8. JavaScript (ES6) Code Snippets
If you’re a JavaScript developer, this can save you a lot of time.
This can be helpful when you want to build new projects quickly.
Instead of typing all the code, it predefines many snippets of code for the most common JavaScript functions.
It supports TypeScript, React, Vue, and HTML.
If you work on React, there’s a similar extension. (ES7 React/story/GraphQL/React – Native snippets).
9. Live Share
When you work on a problem with your team members and want to work on the same code together on the editor, this helps you give control of the code editor to your team members so you can work on it at the same time.
You can also share terminal instances, local host Web applications, voice calls, and more.
10. ESLint
Because JavaScript is a highly flexible language, small errors can cause huge problems.
So when working on a huge code base, we need a linter and a formatter.
This extension can help you do just that.
This automatically formats your code and finds errors in your code.
Implementing ESLint rules takes you one step closer to establishing good standards for your code base.
11. Paste JSON as Code
As a developer, you deal with apis all the time.
As you know, the most commonly used data structure in the API is JSON.
To avoid some type errors that can break the application, we use classes or interfaces.
This extension generates a class from JSON data.
Therefore, instead of writing classes by hand, we can use it to save the time and burden of creating classes.
This extension supports most popular languages.
12. Peacock
This extension helps you identify the exact workspace you have switched to or worked in when you are working on multiple workspaces.
13. Better Comments
This extension helps you create more personalized comments in your code.
It allows you to provide different color codes for different types of comments, which can be TODOs, highlighting, alerts, and other types of comments.
This is highly recommended for clean and documented code.
14. Search node_modules
As we build the component library and use that component in different applications, we will definitely make some changes to the node module.
This extension allows you to quickly browse files in your project’s node_modules directory.
15. Rest Client
As developers, we use Postman regularly on a daily basis to check API responses.
This extension allows you to make an HTTP request and view the response directly in VSCode, rather than switching between two applications, this extension does the job for you.
Other highlights
- 73 NPM packages to improve productivity