The 25 Best VS Code Extensions

The 25 Best VS Code Extensions
Photo by Chang Duong on Unsplash

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, <div></div>

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

Edit description

marketplace.visualstudio.com

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 come in handy.

Integrated Terminal in Visual Studio Code

In Visual Studio Code, you can open an integrated terminal, initially starting at the root of your workspace. This can…

code.visualstudio.com

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

This extension allows matching brackets to be identified with colors. The user can define which characters to match…

marketplace.visualstudio.com

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

Edit description

marketplace.visualstudio.com

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

Edit description

marketplace.visualstudio.com

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

While being free and open-source, if you find it useful, please consider supporting it by donating via PayPal or Open…

marketplace.visualstudio.com

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

Visual Studio Code extension for Prettier. Contribute to prettier/prettier-vscode development by creating an account on…

github.com

8. Material Icon Theme

This extension gives you pretty icons for your file list. If the file is 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

Get the Material Design icons into your VS Code.

marketplace.visualstudio.com

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

Edit description

marketplace.visualstudio.com

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

A real browser preview inside your editor that you can debug. Browser Preview for VS Code enables you to open a real…

marketplace.visualstudio.com

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

Edit description

marketplace.visualstudio.com

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

Edit description

marketplace.visualstudio.com

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

I’m sorry but I’m super busy now. If you want to be a maintainer of the project, please feel free to contact me! You’ve…

marketplace.visualstudio.com

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

Get it now.

marketplace.visualstudio.com

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

Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless what…

marketplace.visualstudio.com

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.

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

GitHub

This vscode extension integrates with GitHub. Note: I recommend to use GitHub Pull Requests instead of this, because…

marketplace.visualstudio.com

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

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a…

marketplace.visualstudio.com

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

This extension supports running npm scripts defined in the package.json file and validating the installed modules…

marketplace.visualstudio.com

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

Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code. VS Code uses js-beautify internally, but it lacks…

marketplace.visualstudio.com

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

If you found any bug or if you have any suggestion, feel free to report or suggest me.] A VSCode Extension that help…

marketplace.visualstudio.com

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

You DON’T need this extension to use Emmetin VS Code. Emmet (for HTML, CSS, JSX) is a built-in feature of VS Code. This…

marketplace.visualstudio.com

Here’s a bonus: Emmet Documentation Cheatsheet:

Cheat Sheet

Edit description

docs.emmet.io

22. VSCode Icons

This one for our front-end developers. This is similar to the one I mentioned earlier, material icons, but with different designs. As front-end developers, 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

Bring icons to your Visual Studio Code ( minimum supported version: 1.31.1 ) To install the extension just execute the…

marketplace.visualstudio.com

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

Helper with GUI to generate color codes such as CSS color notations. And, a commandConvert Color to change the color…

marketplace.visualstudio.com

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

This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code You can…

marketplace.visualstudio.com

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

Edit description

marketplace.visualstudio.com

Thank you all for reading!