DEV Community


Posted on


Today I will show you the TOP 10 best Visual Studio Code (VSC) Extensions. Extensions make the UX (User Experience) better and more comfortable. The first catagory is File Icons.

1. Import Cost

Link: Click Here

Import Cost is a VS Code extension that displays the size of imported packages inline, so you know exactly how much importing that package will cost during the development process. So, it’ll help you to better optimize your applications and websites, particularly for mobile users who typically suffer more due to bloat.

2. GitLens

Link: Click Here

If you regularly use Git, either professionally or with your own projects, then GitLens makes it even easier to integrate your IDE with Git.

With GitLens, you can quickly see who, why, and when code was changed in any given project. Plus, you can hop back through previous changes to see why other devs changed that code, and do side-by-side comparisons to get a better understanding of why things changed.

3. Prettier

Link: Click Here

Prettier is a formatting extension that automatically formats your code for you every time you save it, so you don’t have to worry about forgetting to indent every now and then. Plus, if you’re still learning how to code, Prettier can save you a ton of headspace, allowing you to focus on your project instead of how to make your code readable.

4. Live Sass Compiler

Link: Click Here

Live Sass Compiler...well, compiles SAAS or SCSS files to CSS. Live. Regardless of if Sass is a requirement for your project or you just like the formatting, this extension can save you a ton of time (and headaches!) by taking care of the hard work for you.

5. Duckly

Link: Click Here

Duckly is a video chat tool that allows developers to talk, share their code, and collaborate on development in real-time, all directly through the IDE and independently of what IDE your team is using. That's right, you can be using VSCode and your colleagues using WebStorm.

6. Auto Close Tag

Link: Click Here

The Auto Close Tag extension, as you might expect, automatically closes HTML or XML tags for you in the IDE. So, when you type an opening tag, this extension will create the closing tag for you. All you have to do is write your code between them, and you’re good to go.

7. Path Intellisense

Link: Click Here

Path Intellisense makes working with file paths easy by offering either an autocomplete or suggestions for your code. Simply begin typing a path in quotations, and Path Intellisense will either automatically complete the path for you or suggest a variety of different options if it’s not sure what option you want.

8. Tabnine

Link: Click Here

Tabnine is a massively popular AI assistant for VSCode that works with all major programming languages, so there’s no doubt you’ll find it useful no matter what your skillset is.

9. Debugger for Chrome

Link: Click here

With Debugger for Chrome, you can edit your JavaScript code directly in your Chrome browser or via your application. This powerful extension will find which lines of code bugs are hiding in, so it’s easy to find what you need to fix. It’s also compatible with some remote working extensions like Remote - SSH, making it one of the top VSCode extensions you need in your life.

10. NPM Intellisense

Link: Click Here

NPM without a doubt can be a pain not just on how it eats up our memory, but there are just so many in there that’s a bit difficult to track.
If you have been working or planning on taking Nodejs, then you’d see how helpful this tool is, importing several packages or modules, and there are like thousands of them, you really can’t just memorize their paths, right?

If you found this usful then please share this and follow me! Also check out my website where I also post everything from here

Top comments (0)