VSCode extensions I do not want to go without

Having worked with quite a few IDEs in my time, from just hacking away in Notepad++, Sublime Text, Brackets and then Atom(R.I.P), for the last five years or so, I’ve stuck with VSCode and still think that it is very enjoyable to work with (promise I am not sponsored by Microsoft).

Obviously VSCode is not without shortcomings, but Extensions help us fill in the gaps, adding missing functionality, improving workflow or allowing us to further customise the interface and make things pretty. So I want to take the time here and make a list of the extensions I use and personally would not want to go without.

Must haves

I consider these extensions mandatory in any setup I use.

• ESLint Integrates ESLint JavaScript into VS Code, highlights rule violations and adds the wonderful ability to fix those issues when saving.

• Error Lens Shows you errors inline where they occur, insanely helpful and a huge productivity booster. Works wonders in combination with ESLint.

• Prettier Code formatter that ensures a consistent code style across all your files. When you have ESLint and Prettier working side by side, *chefs kiss*.

• GitLens — Git supercharged Too many features to name them all, but this extension makes working with any kind of Git repository a million times easier, from seeing inline commit histories AND their author (so you know exactly who to be angry at) to seeing the entire commit history of a given file and being able to easily navigate backwards and forwards in time (too bad this doesn’t work in real life yet).

• Code Spell Checker The name speaks for itself. As somebody who is quite verbally and grammatically challenged, this extension is a lifesaver. And it avoids the total humiliation of having someone point out your spelling mistakes in PRs.

• axe Accessibility Linter Accessibility linting for HTML, Angular, React, Markdown, and Vue. As a frontend developer who wants to ensure that the things I build can be used and enjoyed by as many people as possible, I consider this absolutely essential.

Nice to have

Not necessary, but they generally add little bits of flavour or functionality and enrich the developer experience.

• indent-rainbow Visualises indentation with what I can only describe as a rainbow waterfall. Productivity booster AND nice to look at.

• Material Icon Theme Adds lots of really nice icons to our file browser, allowing us to see at a glance what we’re working with. Just like indent-rainbow, the best of both worlds, it boosts productivity AND makes it prettier.

• Auto Close Tag Automatically adds the HTML closing tag. VSCode has support for this by default, but only in HTML files. This extension adds the same behaviour to other file types.

• Auto Rename Tag Automatically renames both the opening and closing tag of an element, super useful for refactors, especially with React components.

• Bookmarks Allows you to bookmark specific lines in files and easily jump between them, makes refactors across multiple files a breeze.

• Gremlins tracker for Visual Studio Code Reveals some characters that can be harmful because they are invisible or looking like legitimate ones. Inspired by Sublime Gremlins.

• CodeSnap 📷 Take beautiful screenshots of your code.

• React/Redux/React-Native snippets A lot of really useful snippets for working with React, nice productivity booster.

Community suggestions

Suggestions from the community. Thank you for contributing! 💪

• Project Manager For easily switching between multiple projects. Thank you Martin Schmitt

Wait, this is already the end?!

Thank you for taking the time to read through my little list of extensions. I tried to stay relatively generic, aside from the React snippets at the end. There are lots of file or tool specific extensions I use like Docker or DotENV, but VSCode is generally pretty good at recommending those to the user, so I omitted them to avoid bloat.

I hope you found an extension or two to help you be more productive. If you think I have missed anything and would like to add on to this list, please feel free to leave it in comments.

Happy coding! 👋