How to Set Up VS Code Like a Pro in Just 5 Minutes
By: Dr. Derek Austin
Tags: Software Development, Software Engineering, JavaScript, Programming

How to Set Up VS Code Like a Pro in Just 5 Minutes

A beginner’s guide

When you’re a #CodeNewbie starting out on #100DaysOfCode, your Visual Studio Code setup probably leaves a lot to be desired. Here’s how to go from zero to professional web developer by installing and configuring some crucial extensions, themes, and add-ons.

What separates a professional web developer’s VS Code from a brand-new installation is the use of extensions, especially code formatters and linters that automatically detect and fix problems in your code.

Using code formatters (typically Prettier) and linters (usually ESLint) tend to be mandatory when contributing to open-source projects online. But they’re generally awesome to have even if you never plan to work on open-source.

Additionally, a nice theme makes VS Code easier to use, and it makes it feel like your own personal version. Along with a theme, you can add file icons that’ll let you see what type of files you’re working with at just a glance.

But you won’t really seem like a pro until you start using font ligatures that turn common code symbols (like => and !== ) into human-readable versions. Plus, a nice programming font is just so easy on the eyes!

In this short tutorial, you’ll take a brand-new VS Code installation and turn it into a super-powered professional setup in about five minutes.

1. Install Extensions in VS Code

I’m going to recommend six must-have extensions, with another seven optional ones. Of course, no extension is really mandatory — it’s your VS Code after all — but everyone should use a code formatter, linter, and theme.

The optional extensions are more for your quality of life. I’d suggest you install all 13 extensions at once since they’re free and quick. You can always disable or uninstall them afterward with just a few clicks inside of VS Code.

First, I’ll list the extensions in both categories, and then I’ll explain the purpose of each one — optional info for the curious folk.

How to install a VS Code extension

There are two ways to install extensions for VS Code, either using the online Visual Studio Marketplace or its equivalent inside VS Code.

From the web: Click on the link to the extension in the text below to open it up in the Visual Studio Marketplace; then click the “Install” button. Assuming you already have VS Code installed, click “Continue.” Your browser will then try to open a vscode link. Choose “Visual Studio Code” from the list, and then check “Remember my choice for vscode links” and click “Open link.”

From VSCode: Alternatively, look up the extension by name inside of VS Code on your computer by clicking the extensions icon on the left-hand activity bar — it looks like blocks getting stacked on top of each other. Search for each extension by name, clicking “Install” for each one.

The recommended extensions below appear in alphabetical order.

Mandatory extensions

ESLint, HTMLHint, Prettier — code formatter, stylelint, vscode-icons, and your choice of theme. You only need to install one VS Code theme; I suggest Monokai Vibrant, One Monokai Theme, or Shades of Purple.

Optional extensions

Document This, indent-rainbow, Live Server, Rainbow Brackets, Rainbow Highlighter, Rainbow Tags, and vscode-pigments.

Description of each recommended VS Code extension

If you just want to get set up, and you don’t particularly care about what you just installed, then scroll on past this section as fast as you can! 😂🧨💥

🔽 Mandatory extensions 🔽

ESLint

ESLint is a code linter for JavaScript and TypeScript that’ll catch many bugs as you write code, instead of when you run code. It’s necessary to contribute to many open-source projects and real-life workplaces.

ESLint is a code linter for JavaScript and TypeScript that’ll catch many bugs as you write code, instead of when you run code. It’s necessary to contribute to many open-source projects and real-life workplaces. HTMLHint

HTMLHint is a code linter for HTML that catches a lot of errors, especially the kinds that brand-new web developers tend to make.

HTMLHint is a code linter for HTML that catches a lot of errors, especially the kinds that brand-new web developers tend to make. Prettier — code formatter

Prettier automatically formats your code, including indentation, every time you save. By using the same Prettier configuration file with your teammates, you’re sure to have the exact same formatting. That means your Git repositories won’t have meaningless formatting changes.

Prettier automatically formats your code, including indentation, every time you save. By using the same Prettier configuration file with your teammates, you’re sure to have the exact same formatting. That means your Git repositories won’t have meaningless formatting changes. stylelint

stylelint is a popular linter for CSS. Linting, also called static-code analysis, is a type of automated software testing as you write code.

stylelint is a popular linter for CSS. Linting, also called static-code analysis, is a type of automated software testing as you write code. vscode-icons

vscode-icons is a package of file icons that show up inside of VS Code and make it much easier to differentiate the file types you’re working with.

🔽 VSCode themes 🔽

Monokai Vibrant

Monokai Vibrant reminds me of 8-bit graphics and brightly colored cartoons. It’s my preferred theme for VS Code.

Monokai Vibrant reminds me of 8-bit graphics and brightly colored cartoons. It’s my preferred theme for VS Code. One Monokai Theme

One Monokai Theme is easy on the eyes. There are many offshoots of the Monokai theme, including a paid version called Monokai Pro.

One Monokai Theme is easy on the eyes. There are many offshoots of the Monokai theme, including a paid version called Monokai Pro. Shades of Purple

Shades of Purple by Ahmad Awais ⚡️ is a great change of pace from other themes, as it showcases the color purple in a beautiful way.

🔽 Optional extensions 🔽