DEV Community

Cover image for Elegant VS Code Extensions
Ayoub Abidi
Ayoub Abidi

Posted on • Updated on

Elegant VS Code Extensions

Unlike some other code editors you’ve probably tried, Vs Code is the best code editor on the market today (or in the whole world).
It's designed for a modern tech stack and the most beautiful thing about it is that it’s open-source and has a dedicated community of developers who are constantly working to improve the software.
vs code extension meme
So, without further ado, let’s take a look at the best VS Code extensions I've found till now to make your editor more beautiful and practical.

Before we talk about anything you need to use this one.

Settings Sync

image
Before you start installing extensions left and right, it's good to know of the existence of Settings Sync. It allows you to sync pretty much everything you customize on VS Code to Github, from settings to keyboard shortcuts to other VS Code extensions.
Trust me, this extension will save your life.

Ok, now let's start with some style.

Karma

Karma extension
I don't know about you, but trust me, I've searched for this extension for months and i really feel blessed having it now.
If dark mode extensions are not "dark enough" for you, Karma is for you.
(i really should sell this phrase don't i ?)

Material Icon

Material Icon theme
With that theme, you need some minimalistic icons that will make your files and folders feel good.

Now, we need some good tools.

Prettier

Prettier
We know that, with certain languages, it’s vital for you to keep your code tidy and properly formatted but trust me on this one, this extension will definitely takes the headache out of code editing and reading someone else’s code.
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.

Quokka.js

Quokka
If your language of choice is JavaScript or TypeScript, then you’ll love Quokka.js. This extension aims to speed up development by displaying runtime values in your IDE as you code, so you can focus on writing code instead of writing console.log() everywhere.
It’s also free for community use, but if you’re a JavaScript/TypeScript professional, you can also buy a Pro license that lets you modify your runtime values without having to change your code.

GitLens

image
If you regularly use Git then GitLens makes it even easier to integrate your IDE with Git, 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.

Path Intellisense

image
Path Intellisense is quite a simple quality-of-life improvement, but it’s one that every dev never knew they needed.
This extension 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.

Spell Checker

image
This extension points out spelling mistakes in your code with a helpful squiggly line that’ll take you back to your word processing days.

Conculsion

Those were my favorite extensions.
I'm hoping you will use them to make your code life easier.
If you have some good ones don't hesitate and write your list in the comment section below.

If you liked this article there is a second part.

Top comments (0)