I asked developers in my team what VS Code extensions they use to boost their productivity, and here’s what they said.
1. Live Server
Live Server allows you to see code changes reflected in the browser. It launches a local development server with a live reload feature both for static and dynamic pages.
Every time you save your code, you'll instantly see the changes reflected in the browser. You'll be much faster at spotting errors and it's much easier to do some quick experiments with your code.
2. Remote - SSH
The Remote - SSH extension lets you use any remote machine with an SSH server as your development environment. This makes it much easier to develop and/or troubleshoot in a wide variety of scenarios.
You also don’t need any source code on your local machine, because the extension runs commands and other extensions directly on the remote machine.
3. Stepsize
Sometimes you come across technical debt or other technical issues that should be fixed. You might not have time to fix it right away but you want to make it visible and raise an issue.
Stepsize allows you to bookmark code, track technical debt directly from the editor, and create TODOs.
It also allows you to collaborate with your teammates on maintenance and refactoring work.
4. Prettier
The Prettier extension helps code look better and be more consistent. It enforces a consistent style by parsing your code and reprinting it with its own rules that take the maximum line length into account, wrapping code when necessary.
5. WakaTime
WakaTime allows you to see metrics, insights, and time tracking automatically generated from your programming activity.
You will learn exactly how long you spend coding as it automatically tracks when you start and stop typing, with detailed metrics for projects, file, branch, commit/PR, feature, and more.
6. Code Spell Checker
The goal of this spell checker is to help you catch common spelling errors while keeping the number of false positives low. It shows misspelled words that are technical terms or variables within comments and strings.
7. Compareit
Compareit extension helps you compare two files which you can choose from your current project and other directory on your computer or clipboard.
8. GitLens
GitLens helps you better understand code in a glimpse by visualizing code authorship via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and more.
9. Remote - Containers
The Remote - Containers extension lets you use a Docker container as a full-featured development environment. Containers make a great development environment because you can develop with a consistent reproducible toolchain on the same operating system you deploy to and quickly swap between different, separate development environments, safely make updates, and more.
10. Quokka.js
Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type. It makes prototyping, learning, and testing JavaScript / TypeScript much faster.
Top comments (10)
Stepsize sounds interesting… I am always looking for a good tool on Mac to write some notes and documentation
I heard tabnine is actually good too
I've used tabnine for a month so far and it's been pretty helpful. It's suggestions have been accurate maybe about 60% of the time, and that's excellent for me.
Thanks for the feedback....I will give it a shot
Tabnine is is not just a tool It is a great experience. If you use one of the supported editors, I would recommend all developers try out TabNine for JavaScript or any other language you might write in your editor.
Great article, I'm definitely going to try out WakaTime and Stepsize, thank you.
Thanks for sharing this
AI love the idea of VSCode and how vibrant the community is but I personally find it hard to work with PHP compared to PHP Storm.
StepSize sounds really interesting.
This extension is also worth checking: Blockman
Wakatime and stepsize looks amazing.