AboutArticlesGame

If We Only Had Five VS Code Extensions

Cover Image for If We Only Had Five VS Code Extensions
Dennis Persson
Dennis Persson

URL copied to clipboard

3 minutes reading

If you had to choose five and only five VS Code extensions, which would you choose?

I asked that question to myself, and I have picked out the five best extensions I would recommend for general web programming.

Git Graph

I have always been promoting to learn Git through the terminal to understand the reasoning behind it and to be able to help people solving their Git issues even if they don't have a Git GUI you are familiar with.

Despite that, I think Git Graph is priceless when it comes to getting an overview of the Git History, the current Git state and to quickly see what has been included in each commit. To quickly performing cherry-picks, merges, reverts, commit undo and checkouts is a of course also extremely handy.

Git Graph VS Code extension

Git Graph extension on VS Code Marketplace

Auto Hide

Auto Hide is a VS Code extension that automatically closes the sidebar and optionally terminal in VS Code when you focus the text editor. Simple as that, but I love it. You do of course have the shortcuts cmd/ctrl + b and cmd/ctrl + j to do the same. But to constantly doing that really annoys me.

For private programming, I mainly use a laptop, but even when using three screens at work with IntelliJ based IDEs like WebStorm and Android Studio minimizing sidebars and terminals is an absolute must for me.

Regardless if you use the extension or not, I will give you the life hack to move the VS Code sidebar to the right side of the screen under View > Appearance menu in VS Code. By doing that, your text editor will not shift horizontally when opening and hiding the sidebar.

Auto Hide VS Code extension

Auto Hide extension on VS Code Marketplace

Peacock

Maybe I am some sort of aesthetics freak, but I like to keep things stylish and organized. With Peacock extension you can put some color on your VS Code windows. Really nice for me who always works with at least three different repositories or projects and rarely close my workspaces on the Mac (yes, a style snob would maybe be the correct term).

By just adding some colors to each window, you can now instantly see which project you currently have on the screen in front of you!

Peacock VS Code extension

Peacock extension on VS Code Marketplace

ESLint

An obvious option. I would actually almost refuse to work with someone who didn't want to use it. It's a standard and should be used for both linting and prettifying. If you are new to programming and unsure what it is, please read about it and start using it.

ESLint extension on VS Code Marketplace

Package Json Upgrade

Package Json Upgrade has one job, and it does it great. It keeps track of which of all dependencies in package.json file that is up to date.

With a single repository, it's maybe easy to keep it up to date and also have a grasp of the latest releases of the packages. With multiple projects and lots of different dependencies Package Json Upgrade will soon become your best coding buddy reminding you about available upgrades and thereby important security fixes and technical debts.

Package Json Upgrade VS Code extension

Package Json Upgrade extension on VS Code Marketplace

URL copied to clipboard

Dennis Persson

Knowledge Should Be Free

I'm doing this for free because I like to contribute to the world. Knowledge should be free and available to everyone. Still, we all need to make a living somehow, and running this blog takes time and effort. When I find content I value, I support those creators so they can keep doing their amazing work. If you enjoy what I'm sharing here, consider buying me a coffee. It doesn't have to cost more than a coffee!

Buy Me A Coffee

Related Articles

Cover Image for From Programmer to Software Developer – The Skills That Make the Difference

From Programmer to Software Developer – The Skills That Make the Difference

16 minutes readingProductivity | SoftSkills

Programmer and developer are often used interchangeably, but there is an important distinction between them: the developer’s broader perspective and focus beyond just code. In this article, we will step back from coding to highlight the skills that define what skills a successful developer should have

Cover Image for Three Simple Rules to Solve Unsolvable Organizational Problems

Three Simple Rules to Solve Unsolvable Organizational Problems

8 minutes readingProductivity | SoftSkills

Three effective ways to solve communication problems in your organization and to create self-organized teams by eliminating dependencies to other teams

Cover Image for The Art of Code Review and Why You Need It

The Art of Code Review and Why You Need It

8 minutes readingProductivity | SoftSkills

Code reviewing is an art. Although most companies conduct code reviews, only a few of them fully harness the potential benefits that code reviews offer. We will look at what you and your team can do to fully leverage the potential they offer

Cover Image for Complete Guide To Make You a Regex Guru

Complete Guide To Make You a Regex Guru

14 minutes readingJavaScript | Productivity

Complete regex guide and cheat sheet 2023. Explains quantifiers, special characters, regex flags, special tokens and character classes with examples

Browse articles