20 Must-Have VS Code Extensions for 2024 🔥
Tags: vscode, softwaredevelopment, softwareengineering, coding
Published: 2024-05-15 08:21:42


In the ever-evolving landscape of software development, having the right tools at your disposal can make all the difference. 

Visual Studio Code (VS Code) has established itself as one of the most powerful and versatile code editors, beloved by developers worldwide for its customizability and rich feature set. 

As we step into 2024, the extension ecosystem for VS Code continues to expand, offering tools that enhance productivity, streamline workflows, and support a wide range of programming languages and frameworks. 

In this article, we present the 20 must-have VS Code extensions that every developer should consider adding to their toolkit this year. 

Whether you're a seasoned professional or just starting out, these extensions will help you code smarter, faster, and with greater ease.

---

## 1. Markdown Preview Enhanced

![Markdown Preview Enhanced](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dililqjebqf7ekih5ega.png)

Extension link: https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

---

## 2. Code Runner

Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, VB.NET, Clojure, Haxe, Obj-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Pascal, Haskell, Nim,


![Code Runner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yy85qgeu7t4t7s2jxel.gif)

Extension link: https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

---

## 3. Git History

View git log, and file history, compare branches or commits

Extension link: https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

---

## 4. REST Client

REST Client for Visual Studio Code

Extension link: https://marketplace.visualstudio.com/items?itemName=humao.rest-client

---

## 5. Code Spell Checker

Spelling checker for source code


![Code Spell Checker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwnd49vnymchwhez9glx.gif)

Extension link: https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

---

## 6. Git Lens

Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more


![Git Lens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wy3pnyiiaackmymvs6cy.png)

Extension link: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

---

## 7. Bookmarks

Mark lines and jump to them


![Bookmarks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tu6heb1duc915gy49z8n.png)

Extension link: https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

---

## 8. Multiple Cursor Case Preserve

Preserves case when editing with multiple cursors


![Multiple Cursor Case Preserve](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3johlv15hxkv49ks2q75.gif)

Extension link: https://marketplace.visualstudio.com/items?itemName=Cardinal90.multi-cursor-case-preserve

---

## 9. Prettier

Code formatter using prettier

Extension link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

---

## 10. Quokka

JavaScript and TypeScript playground in your editor.


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

Extension link: https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

---

## 11. Live Server

Launch a development local Server with a live reload feature for static & dynamic pages


![Live Server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/frpwm7jun14exbsx7nvy.gif)

Extension link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

---

## 12. Console Ninja

JavaScript console.log output and runtime errors right next to your code.

Extension link: https://marketplace.visualstudio.com/items?itemName=WallabyJs.console-ninja

---

## 13. RegEx Snippets

Easily Insert Popular Regex Codes Without Memorising Anything!

Extension link: https://marketplace.visualstudio.com/items?itemName=Monish.regexsnippets

---

## 14. GitHub Copilot

Your AI pair programmer

Extension link: https://marketplace.visualstudio.com/items?itemName=GitHub.copilot

---

## 15. ChatGPT VSCode Plugin

A ChatGPT integration build using ChatGPT & 9 beers


![ChatGPT VSCode Plugin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f20ov63nfi2zds5ljcs7.png)

Extension link: https://marketplace.visualstudio.com/items?itemName=JayBarnes.chatgpt-vscode-plugin

---

## 16. Polacode

Polaroid for your code

Extension link: https://marketplace.visualstudio.com/items?itemName=pnp.polacode

---

## 17. Codeium

The modern coding superpower: free AI code acceleration plugin for your favorite languages. Type less. Code more. Ship faster.

Extension link: https://marketplace.visualstudio.com/items?itemName=Codeium.codeium

---

## 18. Document This

Automatically generates detailed JSDoc comments in TypeScript and JavaScript files.

Extension link: https://marketplace.visualstudio.com/items?itemName=oouo-diogo-perdigao.docthis

---

## 19. Peacock

Subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which.

Extension link: https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

---

## 20. Postman

Streamline API development and testing with the power of Postman, directly in your favorite IDE.

Extension link: https://marketplace.visualstudio.com/items?itemName=Postman.postman-for-vscode

---

**_Happy Coding!_** 🔥

**[LinkedIn](https://www.linkedin.com/in/dev-alisamir)**
**[X (Twitter)](https://twitter.com/dev_alisamir)**
**[Telegram](https://t.me/the_developer_guide)**
**[YouTube](https://www.youtube.com/@DevGuideAcademy)**
**[Discord](https://discord.gg/s37uutmxT2)**
**[Facebook](https://www.facebook.com/alisamir.dev)**
**[Instagram](https://www.instagram.com/alisamir.dev)**