TOP 20 VSCode Extensions to increase your productivity! 🚀
Tags: webdev, programming, productivity, codenewbie
Published: 2023-08-07 12:00:00

VSCode (Visual Studio Code) is a very widely used and free code editor. With countless VSCode extensions you can program in any language and much more! I’ll show you the best VSCode extensions so you can be even more productive.

The right VSCode extensions, i.e. plugins for Visual Studio Code, turn the source code editor into a real secret weapon. Over the years, some extensions have proven to be more useful and others less so.

Since the plugins can be installed and uninstalled with two clicks, you can easily try them out and see if they help you. All shown VSCode extensions I use myself, so I can present them here with a good conscience. 🙂

## 1. ChatGPT – Genie AI
How could it be otherwise, we start with an extension that uses [ChatGPT](https://webdeasy.de/en/using-chatgpt-as-developer/).

Shortly after ChatGPT was released, there were of course countless extensions for VSCode. I tried a lot of them, but Genie AI worked best for me. You have directly in the context menu the possibility to “commission” predefined actions, like explaining marked code, adding comments or optimizing the code.
![ChatGPT – Genie AI Demonstration](https://webdeasy.de/wp-content/uploads/2023/05/genie-ai.gif)
The background prompts can all be customized individually in the settings, making it the best AI plugin for Visual Studio Code for me.

**➡️ [ChatGPT Genie AI](https://marketplace.visualstudio.com/items?itemName=genieai.chatgpt-vscode)**

---

## 2. Favorites
A very small but very useful VSCode extension: Favorites. As the name says it gives you the possibility to mark single files as favorites, so you can access them quickly. I use this function mostly for config files that I have to access all the time.
![Favorites Demonstration](https://webdeasy.de/wp-content/uploads/2023/05/favorites-650x328.png)
**➡️ [Favorites](https://marketplace.visualstudio.com/items?itemName=howardzuo.vscode-favorites)**

---

## 3. MinifyAll
Storage space has become relatively cheap today. However, it makes sense to transfer as little data as possible to end users. This is where MinifyAll comes in and minifies your files. Currently the plugin can handle 14 different languages.
![MinifyAll Demonstration](https://webdeasy.de/wp-content/uploads/2023/05/minify-all.gif)

**➡️ [MinifyAll](https://marketplace.visualstudio.com/items?itemName=josee9988.minifyall)**

---

## 4. Docker
For a long time I “ignored” [Docker](https://www.youtube.com/watch?v=pg19Z8LL06w). Now it has become a real secret weapon for me and extremely versatile. So if you haven’t worked with Docker yet, I highly recommend it! It’s perfect for quickly testing another environment or deploying your application.

The VSCode extension of the same name helps you speed up image building, highlight code, and keep track of running containers and images.
![Docker Demonstration](https://webdeasy.de/wp-content/uploads/2023/05/docker.gif)

**➡️ [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)**

---

## 5. Better Comments
A small but good extension. It highlights comments with different keywords, like “TODO” or starting with an exclamation mark, so you can’t miss the comment at all.
![Better Comments Demonstration](https://webdeasy.de/wp-content/uploads/2023/05/better-comments.png)

**➡️ [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)**

---

## 6. Code Spell Checker
Also a small but nice extension, which I see as an extension for “Better Comments”. It underlines spelling mistakes for you. This can increase the quality of your comments.
![Code Spell Checker Demonstration](https://webdeasy.de/wp-content/uploads/2023/05/code-spell-checker.png)

**➡️ [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)**

--- 

## 7. GitLens – Git supercharged
Visual Studio already has a built-in Git client – so far so good. But GitLens extends the functionality even further, so that you can see the last commit message directly after each line of code, compare it directly with the changes and much more. Be sure to try it out!
![GitLens Demonstration
](https://webdeasy.de/wp-content/uploads/2023/05/gitlens.gif)

**➡️ [GitLens - Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)**

--- 

## 8. Regex Previewer
[Regular expressions](https://webdeasy.de/en/regex-validation-cheatsheet-en/) can be found in pretty much every app. However, creating them can sometimes be a bit tricky. This is where Regex Previewer comes in and shows you directly the matches of your expression in a second window. This way you can debug directly live.
![Regex Previewer Demonstration
](https://webdeasy.de/wp-content/uploads/2023/05/regex-previewer.gif)

**➡️ [Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)**

---

## 9. Test Explorer UI
[Testing](https://webdeasy.de/en/rest-api-testing/) is very important, but sometimes it can be very annoying and time consuming. Test Explorer UI can take some of the work out of this by showing you all the tests graphically and also running and evaluating them directly when you save them.
![Test Explorer UI Demonstration
](https://webdeasy.de/wp-content/uploads/2023/05/test-explorer-ui.gif)

**➡️ [Test Explorer UI](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-test-explorer)**

---

## 10. Remote – SSH
If you often work on external systems, you should have a look at “Remote – SSH”. This VSCode extension establishes a connection via SSH, so that you can execute SSH commands directly in the terminal and – what I find even cooler – you can open the files in the explorer directly via SFTP, instead of having to edit them manually via an FTP client.
![Remote – SSH Demonstration](https://webdeasy.de/wp-content/uploads/2023/05/remote-ssh.png)

**➡️ [Remote - SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh)**

---

All other VSCode extensions are more specialized for developers working in the field of web development.

## 11. Node.js Extensions Pack
As a [Node.js](https://webdeasy.de/en/node-js-tutorial-en/) developer, you really need this plugin. It helps you complete imports, simplifies npm commands and much, much more.
![Node.js Extensions Pack](https://webdeasy.de/wp-content/uploads/2023/05/node-extensions-pack.png)

**➡️ [Node.js Extensions Pack](https://marketplace.visualstudio.com/items?itemName=waderyan.nodejs-extension-pack)**

---

## 12. DotENV
DotENV highlighted your .env files, simple but useful.
![DotEnv Demonstration](https://webdeasy.de/wp-content/uploads/2023/05/dotenv.png)

**➡️ [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)**

---

## 13. ESLint
All JavaScript & Typescript developers will know and love ESLint. The VSCode extension of the same name implements ESLint in VSCode. For this, ESLint must be installed globally via npm (`npm i -g eslint`).
![ESLint Extension](https://webdeasy.de/wp-content/uploads/2023/05/eslint.png)

**➡️ [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)**

---

## 14. Jest
The testing framework Jest has many functions, which the VSCode extension Jest implements via autocompletion in Visual Studio. This should save you some time writing tests.
![Jest Extension](https://webdeasy.de/wp-content/uploads/2023/05/jest.png)

**➡️ [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest)**

---

## 15. Python
As a Python developer you need this extension. It implements Python directly in Visual Studio. Via an arrow you can execute your Python app directly, debug it and of course highlighting and autocompletion are also included in this plugin.
![Python Demonstration](https://webdeasy.de/wp-content/uploads/2023/05/python.gif)

**➡️ [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python)**

---

## 16. REST Client
With REST Client you can now test your Rest API even faster and easier in the code editor. You can execute requests using a very simple syntax. Of course you can customize all header data as you like. So you have your tests directly near your code.
![REST Client Demonstration](https://webdeasy.de/wp-content/uploads/2023/05/rest-client.gif)

**➡️ [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)**

---

## 17. Prettier – Code formatter
Prettier supports numerous languages and formats the code so that it is easy to read and it provides a uniform standard for all developers of your project.
![Prettier – Code formatter
](https://webdeasy.de/wp-content/uploads/2023/05/prettier.png)

**➡️ [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)**

---

## 18. css-auto-prefix
CSS requires prefixes for some attributes for certain browsers. These are often forgotten when programming. This extension puts an end to that. As soon as you write a CSS property or even just click on it, the corresponding lines with the browser prefixes are automatically added.
![css-auto-prefix Demonstration
](https://webdeasy.de/wp-content/uploads/2023/05/css-auto-prefix.gif)

**➡️ [css-auto-prefix](https://marketplace.visualstudio.com/items?itemName=sporiley.css-auto-prefix)**

---

## 19. CSS Peek
This VSCode extension connects your CSS rules with the corresponding HTML tag and vice versa. So you don’t have to search for the rules anymore, but can jump directly to the right place.
![CSS Peek Demonstration
](https://webdeasy.de/wp-content/uploads/2023/05/css-peek.gif)

**➡️ [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)**

---

## 20. WordPress Hooks IntelliSense
[WordPress](https://webdeasy.de/en/best-wordpress-plugins/) has a lot of its own functions, which you can’t know by heart – let alone the syntax. The plugin WordPress Hooks IntelliSense offers you an autocompletion for all these functions.
![WordPress Hooks IntelliSense
](https://webdeasy.de/wp-content/uploads/2023/05/wordpress-hooks-intellisense.png)

**➡️ [WordPress Hooks IntelliSense](https://marketplace.visualstudio.com/items?itemName=johnbillion.vscode-wordpress-hooks)**

---

_What other VSCode extensions do you know that are your daily companion? Feel free to let me know in the comments!_ 🙂