The Best VSCode Extensions 2024

The best VSCode extensions. 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. Extensions 00:00 Intro 00:07 Prettier 00:33 Code Spell Checker 01:08 ESLint 01:31 Error Lens 02:01 Material Icon Theme 02:31 Live Server 03:04 Auto Rename Tag 03:25 Peacock 03:58 Auto-Open Markdown Preview 04:22 Markdown All in One 04:49 Code Runner 05:13 Jest 05:46 Jest Runner 05:56 Simple React Snippets 06:22 GitHub Copilot 06:46 IntelliCode 07:11 YAML 07:21 GitLens - Git Supercharged 08:11 Git History 08:36 Git Graph 08:56 VSCode Pets #vscode #programming #coding #softwareengineer #productivity #webdeveloper Prettier is an opinionated code formatter. https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode Code Spell checker https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker EsLint https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint Error lens display errors from EsLint and other tools next to the line. https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens Material Icons https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme Live Server is great for html, js, css live reloading of the browser https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer 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 Peacock change vs code color per a project. https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock 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 Markdown All In One adds keyboard shortcuts and more for markdown. https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one Code runner - Run code snippets right in VSCode. It supports many languages. https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner Jest extension a fully featured test runner for Jest. https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest 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 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 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 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 YAML - if you write any YAML install this for it’s awesome autocompletion and validation of YAML. https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml 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 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 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 VSCode Pets adds cute pixelated pets to VSCode. Each pet has a different animation that can amuse you while you code. You can even toss a ball for them to chase. https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets