Extensions worth having

VS Code is great on its own, but one of the reasons people love it is extensions. Extensions are small add-ons that give VS Code new abilities. There are tens of thousands of them, made by companies and regular developers around the world.

In this lesson you'll learn how to install them and which ones are actually worth having when you're just starting out.

1. Click the Extensions icon in the Activity Bar on the left. It looks like four small squares. You can also press Ctrl+Shift+X on Windows or Cmd+Shift+X on Mac.
2. Type the name of the extension in the search box at the top
3. Click on the right result to read more about it
4. Click the blue Install button

That's it. Most extensions start working immediately. To remove one later, find it in the same list and click Uninstall.

Since anyone can publish an extension, it's worth a quick check before installing something. Look at:

• Who made it. A small blue checkmark next to the publisher's name means they're verified.
• How many installs it has. Popular extensions have millions.
• The rating. It's shown as stars next to the install count.

If an extension has very few installs and an unknown publisher, it's usually best to skip it. Every extension we recommend below is very well established.

These are the ones worth installing right away. Each of them solves a small problem you'd otherwise run into sooner or later.

Prettier formats your code automatically. Spacing, indentation and line breaks all get tidied up for you every time you save. This means your code always looks neat, and you can focus on what the code does instead of how it's laid out.

After installing it, open your settings and search for Format On Save. Turn it on. Then search for Default Formatter and choose Prettier. From now on, every time you save a file, it gets cleaned up.

Normally you have to refresh the browser every time you change your code. Live Server does it for you. You'll get a Go Live button in the bottom right corner of VS Code. Click it and your page opens in the browser, and it reloads by itself whenever you save. This one is a huge time saver while you learn HTML and CSS.

VS Code already underlines mistakes with a red squiggly line, a bit like a spell checker. Error Lens takes that further and shows the actual error message right next to the line of code. You don't have to hover over anything to find out what's wrong.

Typos in code are surprisingly common, and some of them cause bugs that are really hard to spot. This extension underlines words that look misspelled, just like a word processor does.

ESLint checks your JavaScript for common mistakes and bad habits. You won't need it until the JavaScript course, but it's good to know about. We'll come back to it when the time comes.

Themes are extensions too. Remember the themes from the last lesson, like One Dark Pro or Catppuccin? Search for them in the Extensions view, install them and then select them with Preferences: Color Theme in the Command Palette.

The same goes for icon themes. Material Icon Theme is a popular one that gives every file type its own colorful icon, which makes it easier to spot files at a glance.

It's tempting to install every extension that looks useful. Try not to. Each extension uses a little bit of memory and some of them conflict with each other. More importantly, some of them do so much for you that you don't actually learn how things work.

Start with the five above. Add more later when you notice you need something. A good rule is: if you can't explain what an extension does for you, you probably don't need it.