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.

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

ext install Codeium.codeium

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!)

✨ Install Codeium Now!

2. WakaTime

ext install WakaTime.vscode-wakatime

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!

🚀 Try it out!

3. Live Share

ext install MS-vsliveshare.vsliveshare

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.

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

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

Get Live Share Now 🔥

4. CodeSnap

ext install adpyke.codesnap

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 🤓):

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:

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

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.

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

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:

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

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

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

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

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:

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)

💪 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!

Top 5 AI Models YOU Can Run Locally on YOUR Device! 🤯

Best Codes ・ Sep 17

#ai #security #machinelearning #tutorial

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.