8 Best VS Code Extensions For JS & TS Developer
Tags: javascript, typescript, vscode, webdev
Published: 2023-09-02 09:25:10


Greetings, coding Avengers! 🦸‍♀️🦸‍♂️ Today, I’m going to walk you through eight VS Code extensions that'll make you feel like you’re coding in the Marvel Universe. Ever felt like Tony Stark crafting an Iron Man suit whenever you write JavaScript or TypeScript? No? Well, brace yourselves, because these extensions are the infinity stones of the coding world.

Enough with the chit-chat. It's hammer time! (Sorry, Thor.) 🤓🔨
So fasten your seatbelts, because we're about to take your coding game from 'meh' to 'amazeballs' in 8 simple steps. Ready? Let's dive in! 🚀


![Let start](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bi9dptdjpwunq4b2rtkp.gif)

---

## 1. ESLint: The Syntax Police 🚓👮‍♂️


![Eslint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3gnwgm26booqt456byu.gif)

You wouldn't rob a bank, so why break the laws of syntax? ESLint is your friendly neighborhood syntax cop, here to ensure you’re not causing any coding chaos. Missing semicolon? ESLint is on the case! Forgotten 'let'? Prepare for syntax justice!

Imagine it as your personal Captain America shield, always ready to protect your code from the red squiggly evils of poor formatting. ESLint, assemble! 🦸‍♂️

---

## 2. GitLens: Your Personal Time Machine 🕰️


![Gitlens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3kpey3q4k35ev7qjtada.png)

Who needs a DeLorean when you’ve got GitLens? Ever found a piece of code and wondered, "Which genius penned this masterpiece?" or "Who's responsible for this dumpster fire?" GitLens tells all, and then some.

It's like having Doctor Strange in your editor, allowing you to traverse time and space—or at least, your commit history. GitLens: Making git-blame fun again! 🕵️‍♀️

---

## 3. Quokka: The Pocket-sized Playground 🦘


![Quokka](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2uwmm7kios4erhf8xxre.gif)

What’s small, bouncy, and makes coding JavaScript as fun as a kangaroo boxing match? Why, Quokka, of course! This Aussie critter for your editor provides real-time feedback, turning your IDE into a coding playground.

For example, type `const feeling = "awesome"` and you'll instantly see `// 'awesome'` beside it. It's like having a coding buddy that doesn't judge you for writing `console.log("Help me!")` for the zillionth time. 🎈

---

## 4. Better Comments: The Sticky Notes of Your Dreams 📝


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svs9gqchq3782bf6gscj.png)

Forget those single-tone, dreary comments. With Better Comments, you can annotate your code like it's the Sistine Chapel ceiling. TODOs, highlights, queries—they all get their own snazzy colors!

Think of it as adding a little sprinkle of fairy dust or paprika, turning your mundane comments into a flavorful feast for the eyes. After all, code without comments is like a Marvel movie without a post-credit scene. 👀

---

## 5. Javascript Console: The One-liner King 👑


![Javascript console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5e1hntd5hccg6l4kkfux.gif)

Writing `console.log` is so 2010. With Javascript Console, you can log like a boss. Simply type `clg` and it autocompletes to `console.log()`. But wait, there's more! You can even use `cwe` to generate a `console.warn()` or `cer` for `console.error()`.

It's like having the quippiness of Tony Stark but in your editor. Who knew debugging could be this snappy? 💥

---

## 6. Minify Doc Writer: The Poet Laureate of Documentation 📜


![Doc Writer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scqe73gcllv90z9mah12.gif)

Do you find writing documentation as exciting as watching paint dry? Well, dry those tears, because Minify Doc Writer is here to make your documentation snazzy, sassy, and oh-so-classy.

Imagine it's like having William Shakespeare as your personal secretary, but focused solely on JavaScript and TypeScript. "To var, or not to var, that is the question," your docs will declaim. Get ready for an array of sonnets—er, comments—that even the Bard would be proud of. 🖋️📚

---

## 7. Path Intellisense: Google Maps for Your File System 🗺️


![Path Intellisense](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qam1oeekck7amdoag778.gif)

Typing out file paths can be as confusing as trying to follow the plot of a time-travel movie. But worry not! Path Intellisense is your personal GPS, guiding you through the labyrinthine jungle of your directories.

It autocompletes file paths like a pro, ensuring you never link to `imag.png` instead of `image.png` again. No more 404 errors, just 007-level accuracy. 🎯

---

## 8. Material Theme: Dress Your IDE Like It's Going to the Oscars 🎨


![Material Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yqdy99hexlmtlf2n0hp.jpg)

Last but not least, let’s talk style. No self-respecting superhero would be caught dead without a fabulous outfit. Why should your IDE be any different? Material Theme gives your VS Code that sleek, polished look that says, "Yes, I’m a professional. But I’m also ridiculously good-looking."

Choose from several pre-made themes or mix and match to create your own. Your IDE will look so good, it should be on the red carpet. Or at least, GitHub trending. 🌟

---
## Thanks for reading

And there you have it, folks! With these eight VS Code extensions, you’re well on your way to becoming the Iron Man or Black Widow of JavaScript and TypeScript development. May your code be ever bug-free and your commits be nothing short of heroic. Until next time, Excelsior! 🚀