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.
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-vscodeCode 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-checkerEsLint 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-eslintError 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.errorlensMaterial 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-themeThe 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.LiveServerAuto 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-tagPeacock - 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-peacockAuto-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-previewMarkdown All In One adds keyboard shortcuts and more for markdown.
https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-oneCode runner can run code snippets right in VSCode. It supports many languages.
https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runnerJest extension a fully featured test runner for Jest.
https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jestJest 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-runnerSimple 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-snippetsGithub 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.copilotThe 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.vscodeintellicodeYAML - if you write any YAML install this for its awesome autocompletion and validation of YAML.
https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yamlGitLens - 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.gitlensGit 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-graphGit 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.githistoryVSCode 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
Top comments (2)
thanks for sharing👍🏻
You're welcome!