The 25 Best VS Code Extensions

Make your life easier and more productive with these

Having a good text editor is important for your efficiency, your learning curve, and your time management.

Why VSCode?

VSCode is probably the number one code editor as of today. I love it.

I think the reason it’s become so popular is simply that VSCode provides every developer’s wants, including features that they didn’t even know they needed. That’s the secret charm of VSCode — it never fails to surprise you.

I believe that one of the best ways to get to a person’s heart is by helping them to realize what they need before they even know they need it. This is one of the powerful drives in marketing, actually, and VSCode did a very good job.

Most VSCode lovers are JavaScript developers — VSCode was created for modern technology. Today, popular JavaScript frameworks are perfect for VSCode — it has everything you need.

When it comes to choosing a text editor, always go for the latest and greatest. Technology is changing rapidly and you don’t want to fall behind. Time should always be on your side to become a great developer.

I don’t mean you should jump from one language to another, or one framework to another — that’s crazy. What I’m saying, and have been saying in my previous blogs, is to stay updated, stay sharp, know the latest, and compare them to what you have been currently using, know the difference, pros and cons and watch the support and its community growth, because stability is also important. You’ll be surprised how much your productivity could skyrocket!

VSCode has a huge open-source community. Its growth and potential are limitless, and in the future learning how to code and coding itself will be easier.

1. Auto-Close Tag

Having this extension is a must. Coding is hard and crazy enough, without having to deal with finding errors just because of a missing close tag,

You can thank me later!

What it does is automatically add the closing bracket of the opening tag you just added and then position the mouse cursor between the tags. Cool, right?
Auto Close Tag

2. Visual Code Integrated Terminal

Having your command/terminal inside your VSCode Editor won’t just make your life easier, it will save space. Thanks to VSCode, having your terminal comes in handy.
Integrated Terminal in Visual Studio Code

3. Bracket Pair Colorizer

Brackets are a pain for most developers, especially when working with huge projects. It’s even worse when you have spaghetti code. Trust me, bracket pair colorizer will save you all the stress.

With tons of nested long codes, especially in working with Javascript, it’s almost impossible to determine which brackets matches up with each other. Using bracket pair helps you find the opening and closing more easily. The fact that they’re colored makes your code more readable. Download this!

And yes, you’re welcome!
Bracket Pair Colorizer

4. ESLint/TSLint

The main function of this extension is to auto-format codes for consistent formatting across your team. ESLint can also be configured to auto-format your code, and whenever you make an error it will scream at you with a bunch of warnings.

It has millions of downloads for a reason.
ESLint

5. Code Spell Checker

If you are non-native English speaker like me and English is not your first language, and maybe not even your second, then Code Spell Checker is very helpful for keeping your code free of typos and errors. And nobody’s perfect, whether you’re fluent in English or not, typos are inevitable — you don’t want to spend time finding them, especially if you have spaghetti code.
Code Spell Checker

6. Settings Sync

If you use multiple machines, as I do, you’ll find this extension useful. Settings sync keeps all your computers/laptops synced in terms of how your visual studio is set up.

If you’re a developer who works on both an office and home computer you’ll basically you will be working on a different workstation. It’s time-consuming to change your settings manually on both because, to be honest, we will need to change our settings from time to time depending on the projects we are doing, so to reduce the stress of programming, I recommend that you use this extension so that all the changes you make are automatically synced on all your machines and workstations.
Settings Sync

7. Prettier

Earlier, I listed ESLint, which helps you with auto-formatting for consistent code and shows several warnings and errors.

As a React/Native Developer, keeping my code clean and properly aligned is a must — it’s non-negotiable. Having it properly indented and separated for better code reading is a priority, especially when dealing with long written code — separations with styles and functions and handlers are critical, not just for you but for your colleagues to read and work on.

This is super easy to set up, it will automatically format on its own the moment you hit save.
prettier/prettier-vscode

8. Material Icon Theme

This extension gives you pretty, cute icons for your file list. If the file is a JavaScript then it will include a JavaScript icon in the material style beside the file name. If you’re more of a visual developer then this extension is for you. It’s widely used by millions of users.
Material Icon Theme

9. Path Intellisense

This extension is one of those I can’t live without. Trust me, it will save you so much time. I’m forgetful and working as a front-end developer with numerous components, extensions, packages, especially with React formatting, I need something that will help me with the file paths. Working with large projects is crazy and path Intellisense is your best friend for this. As you try and type a path in quotations, Intellisense will automatically fill or show suggestions for you.

Path Intellisense can also help with auto-completion for all your hidden files.
Path Intellisense

10. Browser Preview

This extension is a must for front-end Developers. Instead of opening another window for your Chrome to see the changes you’ve made in your code, download this browser preview so you can work it all out within your VSCod. This shows you the browser preview of your code, so no more having to tab to your browser to see even small changes. It helps you save time and space.
Browser Preview

11. Debugger for Chrome

This is my favorite and most used VSCode extension. As a front-end web and mobile developer, Debugger for Chrome has helped me a lot. Especially for JavaScript developers, it will save you a lot of time in making small changes. It is most helpful with debugging — it helps you resolve and catch bugs very quickly.

The console is powerful when it comes to finding which lines and functions do the error came from, up to seeing its data handling.
Debugger for Chrome

12. Javascript (ES6) Code Snippets

This is your new best friend if you’re a JavaScript developer. Regardless of what JavaScript framework you use, this extension will help you. If you’re typing the same generic codes over and over, I would say it’s not very efficient.

This handy code snippet is a light-weight library extension, it binds any standard JavaScript calls, so just by typing shortcut code you can see the entire generic codes automatically printed to your editor. This extension comes with pre-built support not just for Javascript ES6 but also to Typescript, Reactjs, Vue, and HTML.
JavaScript (ES6) code snippets

13. Live Server

In using Live Server, this vscode extension will help you open a live web server of your current project. Usually, when using a builder like Webpack, that normally does the job, but this extension has proven itself to be more useful. You can just right-click and run open with live server and it will do the rest.
Live Server

14. Quokka

Quokka is called the modern-day scratchpad for JavaScript developers. It’s built to help every developer when it comes to code checking. It’s a perfect solution.

It’s very lightweight, productive and powerful compared to other VSCode extensions. It will boost your workflow, it’s real-time and will give you feedback right away.

What it does is utilize a fixed color type for each result, so developers can easily understand the execution of the flow.
Quokka.js

15. Live Share

Live share is one of the most advanced features in VSCode text editor. It’s perfect when working with team members. One of its functions is to allow every developer to share code snippets with other developers in real-time.

This is perfect and helps team collaborations become much more efficient and productive. Live Share allows the instant sharing of current projects even when debugging — how cool is that!

Collaborators don’t have to install any repositories, SDKs, or anything to connect with other developer’s current code. Everyone on the team can collaborate sessions to explore and fix things remotely.
Live Share

16. Github Extension

If your team is using Github, or you are using Github for your project repositories or want to use other developer’s source code repositories, then this extension is for you.

Github, by the way, is now owned and managed by Microsoft for those who don’t know, so Github and VSCode are now part of Microsoft’s products.

With using Github Extension, you can now easily connect other developer’s repository, your favorite developer’s repositories and even your own. You can easily pull and push — very handful if you use Github regularly.
GitHub

17. GitLens

Gitlens is another great extension. It supercharges the current VSCode Git functionalities with the ability to perform side by side code comparison from your previous commits and changes, together with other cool features.
GitLens — Git supercharged

18. NPM

Every modern developer already knows what NPM is and why it’s important. The Node Package Manager is an extension that helps you manage your package.json file. It gives you warnings if there are dependencies required that haven’t been installed yet, as well as your NPM package’s version control.

Most of the bugs and errors that I’ve been working on comes from using NPM packages, functions and features that won’t work because of its incompatibility with other packages. I swear, not having the dependencies it requires not having the compatible versions is stressful!

This VSCode extension is a must:
npm

19. Beautify

Beautify is another great extension for code formatting, almost the same as the one I mentioned earlier, Prettier. It now has almost 12 million downloads, so there’s nothing more to say here for you to be convinced of why this extension is so useful.

It formats codes that are written in Javascript, JSON, Sass, CSS, and HTML.
Beautify

20. Live Sass Compiler

If you’re a fan of Sass for styling, or just using Sass because it’s part of the project application requirement, then this VSCode extension is for you!

It compiles your SASS/SCSS files into CSS files in real-time and automatically gives you a live preview of the app or the compiled styles in your browser.
Live Sass Compiler

21. Emmet

I’ve been using Emmet since I started using VSCode. It helps every developer improve your speed when it comes to writing your codes. Use this extension and soon you won’t be able to imagine coding without it.

True story:
Mithril Emmet

Here’s a bonus: Emmet Documentation Cheatsheet:
Cheat Sheet

22. VSCode Icons

This one’s for our front-end developers. This is similar to the one I mentioned earlier, material icons, but with different designs. As a front-end developer, we love to see things right? so this icon will help you see the kind of files you have and whether they’re HTML, CSS, Javascript, etc.
vscode-icons

23. Color Picker

The color picker extension helps you to easily select colors within your CSS files. It will immediately be reflected or apply to the property that you are currently working on. It’s also available if you preferred to use RGBA colors.
Color Picker

24. ES7, React, Redux & GraphQL Snippets

This is for advanced developers who are now working with JavaScript frameworks such as React, along with the other technologies compatible with its production and complex applications.

Typing standard codes over and over is inefficient. With the help of this snippet you can easily create class-based components, functional components, imports, lifecycle methods and many more by just typing shortcut codes, this is one of my most used extensions since I’ve been working with Reactjs and React Native.
ES7 React/Redux/GraphQL/React-Native snippets

25. REST Client

Another advanced tool, the Rest Client extension helps you if you are working with other third-party tool and APIs. It’s useful if you need to be able to make an HTTP request easily.

This extension allows you to easily call and endpoint directly inside your code editor. It saves time —yuo can use this instead of going back and forth to your browser, or postman just to make a request.
REST Client

Thank you all for reading!