The 25 Best VS Code Extensions
By: Ann Adaya
Tags: JavaScript, Programming, Vscode, Web Development, Software Development

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!

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.

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.

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.

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.

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.

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.

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.

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.

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.