21 Amazing VSCode Extensions
Tags: webdev, vscode, beginners, productivity
Published: 2023-08-21 18:50:45

These are some of my favorite VSCode extensions that I use to increase my productivity. Checkout my video to learn more and see a demo of each extension.

{% embed https://youtu.be/YjhkcvS1xKU %}

1. **Prettier** is an opinionated code formatter. I have it setup so that every time I save it formats my code. 
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

2. **Code Spell Checker** This extension is an awesome spell checker.  It really cuts down spelling mistakes and prevents those embarrassing spelling mistakes in pull requests. It supports English and many more languages. You can even add custom dictionaries
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker


3. **EsLint** is a static code analysis tool for identifying problems in your javaScript code. With this extension it will highlight those problems provided you have ESLiint installed in the workspace or globally.
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

4. **Error lens** is a perfect companion to ESLint  and other extensions that add language diagnostics. It will highlight the entire line when possible and show the error message inline.
https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens


5. **Material Icons** The Material icon theme extension updates your explorer icons to material icons. The Icons look much nicer than the default icons and it even adds a folder icon.
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

6. The **live server** extension allows you to launch a local development server with live reload. This extension is awesome for development with JavaScript, Html and CSS. I personally use it for javascript game development. 
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

7. **Auto Rename Tag** will automatically rename the closing tag for HTML or XML. In my opinion this is an overlooked feature that should be built into VSCode. 
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

8. **Peacock** - Have you ever worked on more than one project with different vsCode windows. It can get confusing which is which. Here is a simple solution to have a different color for each VSCode window using an extension called Peacock. With peacock we can easily set a different color for each VSCode project by opening the command palate and selecting peacock change favorite color.
https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

9. **Auto-open Markdown** is a great extension that will automatically open the preview of a MD file next to the edit version.
https://marketplace.visualstudio.com/items?itemName=hnw.vscode-auto-open-markdown-preview 

10. **Markdown All In One** adds keyboard shortcuts and more for markdown.
https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

11. **Code runner** can run code snippets right in VSCode. It supports many languages. 
https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

12. **Jest extension** a fully featured test runner for Jest.
https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

13. **Jest Runner** is a great alternative to the jest extension that adds a run and debug button above each test plus various context menus to run tests.
https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner

14. **Simple React Snippets** helps to speed up react development with many popular code snippets to write react code faster.
https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets

15. **Github Copilot** is an AI pair programmer right in your IDE. It can suggest lines or entire functions to write. GitHub Copilot uses a special version of GPT-3 that has been trained on a large body of public source code. I have used it in the past and found it very useful unfortunately it is no longer free and requires a monthly subscription.
https://marketplace.visualstudio.com/items?itemName=GitHub.copilot

16. The **IntelliCode extension** is an AI Assistant for python typescript, javascript and java. IntelliCode is an AI-boosted upgrade to the built in intelliSense code completion feature of VSCode. It uses AI to provide more accurate suggestions for code completion. It does this by analyzing a developer's code context to make these better suggestions. It is not as powerful as GitHub Copilot, however the price tag is free.
https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode

17. **YAML** - if you write any YAML install this for its awesome autocompletion and validation of YAML. 
https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml

18. **GitLens - Git Supercharged** as you can tell from the name adds a ton of git features to VSCode. The best feature is the git blame feature. It adds text to every line letting you know the last developer to modify the line of code.  Unfortunately some of the features require a subscription.
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

19. **Git Graph** is a graphical representation of your git log and allows you to perform actions from the graph.
https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph


20. **Git History** is a graphical representation of your git log and allows you to perform actions from the graph.
https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory


21. **VSCode Pets** adds cute pixelated pets to VSCode. Each pet has a different animation that can amuse you while you code. You can even throw a ball for them to chase. 
https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets