DEV Community

Cover image for 7 BEST VS Code Extensions for Faster Development โ€” 2024 Edition ๐Ÿš€
Best Codes
Best Codes

Posted on • Updated on

7 BEST VS Code Extensions for Faster Development โ€” 2024 Edition ๐Ÿš€

How is This Article Different?

Recently, I've seen lots of posts about VS Code extensions. But did you know that many of the posts are outdated? How, you might ask? They were only shared yesterday! Well, let me explain.
Many posts in the listicle format are AI-generated. ChatGPT's training makes it tend to write about a few general topics when you ask it โ€œwrite an article for my coding blogโ€. If you want an easy way to tell if something is probably AI generated, try GPT Zero.

gpt_generated_article
Notice anything wrong with the response?



Above, you can see GPT generating an article for me. The first thing you should notice is that GPT generated an article about VS Code extensions. Perhaps now would be a good time to clarify that this article is not AI generated. ๐Ÿ˜‚ I must be perfectly honest โ€” it took quite a few attempts to get an article about VS Code. GPT-4 is more 'creative', but after a few tries, sure enough, the GPT-3.5-Turbo whipped up an article about VS Code extensions.

Now, the second and very important thing you should notice is the year in the title โ€” 2021. Maybe these extensions were relevant then, but 'then' is over โ€” it's not 2021 anymore. I have nothing against AI generated content as long as it is factually correct, but that's just the problem. AI content is often not correct! If you remove the effort of writing an article by using AI, the least you should do is put in the bit of effort it takes to make sure your article is true.

But I digress; this is an article about the best VS Code extensions in 2024, not my opinions on AI! I hope this article is actually helpful to you. I've tested and researched each extension listed here; plus, I checked to see if each extension is deprecated or outdated due to built-in VS Code features.

So, let's dive in! ๐ŸŒŠ


1. Codeium

Codeium Site Card



ext install Codeium.codeium


Enter fullscreen mode Exit fullscreen mode

Codeium is one of the best free AI tools I've ever used!

Features:

  • Unlimited single and multi-line code completions
  • In-IDE AI Chat
  • Support for more than 70 programming languages.
  • Codebase and context for smarter completions (the AI knows all about your code!)

Codeium Autocompletion

โœจ Install Codeium Now!

2. WakaTime



ext install WakaTime.vscode-wakatime


Enter fullscreen mode Exit fullscreen mode

WakaTime dashboard

WakaTime is a super cool website / extension that keeps track of the time you spend programming. It provides insights about the languages you spend the most time on, your coding trends, set goals, and more!

wakatime
You can easily find your dashboard and see your current time from in the VS Code Status Bar.



๐Ÿš€ Try it out!

3. Live Share



ext install MS-vsliveshare.vsliveshare


Enter fullscreen mode Exit fullscreen mode

Live Share for VS Code is an extension by Microsoft that makes it really easy for people to collaborate with you on code. Unlike Git, where you create branches, pull requests, etc., you can edit code and chat live with your co-workers using Live Share.
From the Live Share extensions description: ""

Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless what programming languages you're using or app types you're building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, and more! Developers that join your sessions receive all of their editor context from your environment (e.g. language services, debugging), which ensures they can start productively collaborating immediately, without needing to clone any repos or install any SDKs.

DMing Rob

Thank you, @robbenzo24, for helping me with this article!

Editing a function

You can even see your co-worker's selections and their cursor position!

Get Live Share Now ๐Ÿ”ฅ

4. CodeSnap



ext install adpyke.codesnap


Enter fullscreen mode Exit fullscreen mode

CodeSnap makes it easy to take those awesome code screenshots (useful when you can't use syntax highlighting somewhere online, or when you need professional looking code).
Here's a sample (from our Codeium factorial function ๐Ÿค“):

CodeSnap factorial function

This extension doesn't particularly enhance your productivity, but it has saved me a lot of time (I'm picky about how I present my code)!

You can use CodeSnap by selecting code, right-clicking, and choosing 'CodeSnap'. Downloading the image was a bit hard for me to figure out. ๐Ÿคช
Click this icon once the preview pane opens:

CodeSnap save icon

A download dialog will appear, and you can save the image wherever you wish!

๐Ÿ“ธ Try CodeSnap!

5. Code Spell Checker



ext install streetsidesoftware.code-spell-checker


Enter fullscreen mode Exit fullscreen mode

User tests code spell checker

This extension is a must-have for me! I'm pretty picky (most of the time) about my spelling. This extension will highlight your spelling errors (that might be a nightmare for some of youโ€ฆ) and show possible correct spellings in the 'Quick Fix' menu.

Quick fix spelling

If you're a fan of impeccable spelling, be sure to give this extension a try!

โœจ Install Code Spell Checker

6. Better Comments



ext install aaron-bond.better-comments


Enter fullscreen mode Exit fullscreen mode

promotional image

The better comments extension makes it easy to tell what each of your comments are for.

You can use these rules, or even add your own in settings:
!: Alert
?: Query
TODO: TODO (duhโ€ฆ)
*: Important
//: Strike-through

I tried it out in JavaScript to see how it worked:

test better comments

Here's an example comment config in the extension settings:



  {
    "tag": "!",
    "color": "#FF2D00",
    "strikethrough": false,
    "underline": false,
    "backgroundColor": "transparent",
    "bold": false,
    "italic": false
  }


Enter fullscreen mode Exit fullscreen mode

I made my own for underlining comments using the _ indicator. Here's how it turned out:

my ugly custom comment styles
My rather, er, beauty deprived custom comment style

Note: If you change the extension settings, you may need to reload the window (CTRL + SHIFT + P > Developer: Reload Window) for the changes to apply.

This is honestly one of the most useful ones for me, excluding AI extensions.

โšก Give it a Try

7. Postman



ext install Postman.postman-for-vscode


Enter fullscreen mode Exit fullscreen mode

Note: The Postman extension requires a free Postman account.

Postman is awesome! I use it all the time to generate API docs and test my various APIs. I was quite pleased to find that they had a VS Code extension, so I don't have to go back and forth between windows now.

After installing the extension and signing in, I can see all my request, and easily make API requests in VS Code:

Me happily using Postman

You can also use the Postman browser extension to intercept API requests made by websites and modify or copy them in your code editor or the Postman app. Super handy!

Features:

  • Sync requests and environments with your account
  • Make GET, POST, etc. requests, WebSocket connections, and more
  • Synchronize request cookies from your browser
  • Generate API docs from your Postman API request (collections)

postman official usage GIF

๐Ÿ’ช Get Postman Now!


That's it, guys! Hopefully you found this article interesting and useful. Let me know what you think in the comments.

Check out my next article here!

Every part of this article is hand-written, no AI used! I might have made a few mistakes. If you find any, point them out to me in the comments! Article by BestCodes.

Top comments (58)

Collapse
 
best_codes profile image
Best Codes

I mostly wrote this post because I was sad to see a lot of clickbait, low effort, or misinformation posts spreading. It may seem a bit redundant, but this is a real, accurate post written by a human โ€” it would be nice if you can support it by liking it. ๐Ÿ™‚

Thank you!

Collapse
 
theksbd profile image
ฤแป— Thiแป‡n Hoร ng

Thanks very much. I am so tired of seeing those AI-generated posts, even on Twitter (X now). Those poor, low effort content creators are shameless

Collapse
 
best_codes profile image
Best Codes

Glad I could help. ๐Ÿ˜Š

Collapse
 
robbenzo24 profile image
Rob Benzo

ikr, all the ai JUNK is driving me crazy, i can't find good content anymore

Thread Thread
 
best_codes profile image
Best Codes

Junk in general drives me crazy. As long as AI content is good, I'm fine with it, but unchecked effortless garbage is not only annoying but also harmful.

Thread Thread
 
robbenzo24 profile image
Rob Benzo

yeah

Thread Thread
 
theksbd profile image
ฤแป— Thiแป‡n Hoร ng

Not only they unchecked the content, they also repeated in posting them week to week ๐Ÿ˜†

Thread Thread
 
best_codes profile image
Best Codes

That's also bothersome. :D
Often, the same post contains the same extension more than once as well. ๐Ÿ˜‚

Collapse
 
best_codes profile image
Best Codes

Thanks for the feedback, everybody. :D

Collapse
 
dasheck0 profile image
Stefan Neidig

I don't know man. Not sure how Code Snap helps me to develop faster. Would have loved some extensions that actually help and an explanation why. For example

  • Error Lens -> Helps you track and fix errors faster
  • Github Actions -> Syntax highlighting and yaml lint so that you see erorrs during development and not when you actually run it online
  • Github Copilot / Claude Dev - for obvious reasons
  • Project Manager -> Find your projects faster

I hope you get the idea. Every extension is still debatable, but these are actually ones that help you develop faster (as your title suggests)

Collapse
 
best_codes profile image
Best Codes

As I said in my post:

This extension doesn't particularly enhance your productivity, but it has saved me a lot of time (I'm picky about how I present my code)!

I also like all the extensions you suggested. :)

Collapse
 
dasheck0 profile image
Stefan Neidig

Ah nevermind then. I must have overread this and focused to much on the title :D Fair point then

Thread Thread
 
best_codes profile image
Best Codes

:) I can see where you're coming from. I might make some edits just to make things a bit clearer.

Thanks for the feedback!

Collapse
 
cavo789 profile image
Christophe Avonture

Remove postman (paid) and replace by ThunderClient (free for private use and just excellent with a tremendous support)

Collapse
 
best_codes profile image
Best Codes

Postman is free.

Collapse
 
cavo789 profile image
Christophe Avonture
Thread Thread
 
best_codes profile image
Best Codes

It's worked fine for me:

Image description

Collapse
 
martinbaun profile image
Martin Baun • Edited

One thing I would love about codesnap is to be able to configure the background/padding size. But anyway it's already very much usable and appreciated.

Collapse
 
best_codes profile image
Best Codes

Yeah, it would be nice. I think there are some variants of it that might be more customizable, but I like CodeSnap because it's simple.

Collapse
 
martinbaun profile image
Martin Baun

Absolutely :)

Collapse
 
anscarlett profile image
anscarlett

I dont like the postman plugin at all, I use the REST Client plugin.
Running api calls from a plain text file means I can easily add them to git along with the source code.

Collapse
 
best_codes profile image
Best Codes

Cool! I'll check that out.

Collapse
 
cosma203 profile image
cosma203

Thank you so much for sharing, awesome list! I would like to recommend one more, that shows errors inline with the code. It works flawlessly with JS/TS and Go.

marketplace.visualstudio.com/items...

Collapse
 
best_codes profile image
Best Codes

I checked out Error Lens and I love it! I might have to add that one in if I make another post.

Collapse
 
5958 profile image
hanata5958

awesome, i love it!!

Collapse
 
best_codes profile image
Best Codes

Thanks! Glad you enjoyed!

Collapse
 
5958 profile image
hanata5958

๐Ÿ™‚

Thread Thread
 
best_codes profile image
Best Codes

๐Ÿ˜ƒ I can smile bigger :D

Collapse
 
alt_exist profile image
Alternate Existance

interesting perspective on all the listicles right now maybe it could a bit nicer but i do agree and good job!!

Collapse
 
best_codes profile image
Best Codes

Thanks for the following up so quickly! I'll try to edit the post to be a bit nicer. Are there any specific areas for improvement?

Collapse
 
gzzchh profile image
MisakaCloud

Cool, some plugins I have never heard of,thanks for listing some new things.

Collapse
 
best_codes profile image
Best Codes

Glad you liked it :)

Collapse
 
kyleljohnson profile image
Kyle Johnson

Postman is banned from my job.

Codeium looks interesting. It supports a ton of languages.

Collapse
 
best_codes profile image
Best Codes

Why is Postman it banned?
Codeium is nice! :D

Some comments may only be visible to logged-in visitors. Sign in to view all comments.