I have selected my personal Top 8 VSCode Extensions that I believe every developer should have installed for productivity!
Why use Visual Studio Code (VSCode)? Well essentially, it is one of the most popular code editors out there. It's free, it has a simple interface, and it has countless extensions which adds productivity and fun to your overall coding experience.
Remember, these are strictly my own preference, though I do believe these suggestions will also help newbie developers and perhaps some more seasoned veterans. Let’s get started!
Themes are useful depending on each individual person. The provide a sense of customizability and are beneficial for readability and those long hours spent behind a monitor so it’s important to select something eye pleasing to yourself! I like this theme in particular, but thankfully the Visual Studio Marketplace has hundreds to choose from, so go nuts! Just promise me you won’t choose a light theme…because that’s just wrong.
One Dark Pro Theme Looks something like this when used in practice
2. GitLens
GitLens simply helps you better understand code. That is it. It can:
Show who, why, and when a line or code block was changed
Jump back through history to gain further insights as to how and why the code evolved
Effortlessly explore the history and evolution of a codebase
And much, much more!
GitLens is powerful, feature rich, and highly customizable to meet your needs. Do you find code lens intrusive or the current line blame annotation distracting — no problem, quickly turn them off or change how they behave via the interactive GitLens Settings editor.
3. Prettier
It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
This is especially useful when coding for periods of time and not having to worry about continuous formatting.
4. VSCode Icons
Adds icons to your directories and files, making it easy to sift through and find what is what at a glance.
5. Bracket Colorizer 2
This extension allows matching brackets to be identified with colors. The user can easily decipher which tokens to match, and which colors to use. This eliminates the guess work when it comes to coding, which then allows to better find pesky problems and fix them.
6. JavaScript ES6 Snippets
This is handy for JS developers and adds simple keywords that when combined with a hit of tab, will type out. It supports the following:
JavaScript (.js)
TypeScript (.ts)
JavaScript React (.jsx)
TypeScript React (.tsx)
Html (.html)
Vue (.vue)
7. Auto Complete Tag
Another time saver, this extension does exactly what it says: it automatically completes your tag. So for all semantic elements, you’ll just need to type it once and it’ll finish for you. The best part? When you go back and decide to change the first element, it’ll also automatically fix the closing tag too!
8. Live Server
Normally when coding, you have to refresh the page you’re working on to see changes. This can waste valuable time and become tedious after awhile. Well, not anymore! With Live Sever you can hot reload and test changes in your project in real-time when you save. No refreshing required! Just right-click after installation and try it yourself!