Installing VS Code and making it yours

Code is just text, so technically you could write it in any text editor. But a proper code editor makes your life so much easier. It colors your code so it's easier to read, points out mistakes and helps you write things faster.

In this pathway we'll use Visual Studio Code, usually called VS Code. It's free, it works on Windows, Mac and Linux and it's by far the most popular code editor among web developers. That last part matters, because it means almost every tutorial and question online assumes you're using it.

1. Go to code.visualstudio.com
2. The website usually detects your system and shows the right download button. Click it.
3. Open the file you downloaded and follow the installer

A few things to know depending on your system:

• Windows: during installation you'll see a list of checkboxes. Make sure Add to PATH is checked (it usually is by default). It lets you open VS Code from the terminal later, which we'll use in a future lesson. It's also handy to check Add "Open with Code" action so you can right click a folder and open it directly.
• Mac: the download is a zip file. Open it and drag Visual Studio Code into your Applications folder. Then open it from there.

When it opens for the first time you'll probably see a welcome page. You can close it whenever you like.

VS Code can look like a lot at first, but you only need to know a few areas to get started.

• The Explorer on the left shows the files and folders in your project. It's empty until you open a folder.
• The editor in the middle is where you write code. You can have several files open at once, each in its own tab.
• The Activity Bar is the narrow strip of icons on the far left. It switches between the Explorer, search, extensions and a few other tools.
• The status bar along the bottom shows small bits of information, like which language the current file is written in.

There's also one shortcut worth learning right away: the Command Palette. Press Ctrl+Shift+P on Windows or Cmd+Shift+P on Mac. A search box appears at the top where you can find almost any feature in VS Code just by typing what you want. If you ever forget where a setting lives, start here.

This is the fun part. You're going to spend a lot of hours looking at this editor, so it's worth making it look the way you like.

The colors of VS Code come from a theme. To change it:

1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
2. Type color theme and choose Preferences: Color Theme
3. Use the arrow keys to move through the list. The editor changes as you go, so you can preview each one.
4. Press enter on the one you like

VS Code comes with a few themes built in, like Dark Modern and Light Modern. You can also install themes made by other people. Some popular ones are One Dark Pro, GitHub Theme, Catppuccin and Dracula. You'll learn how to install things like that in the next lesson.

Dark or light doesn't matter. Pick whatever is easiest on your eyes. Lots of developers switch between them depending on the time of day.

You can also change the file icon theme, which controls the little icons next to your files. Search for file icon theme in the Command Palette to try it out.

Settings live behind the gear icon in the bottom left corner, or you can open them with Ctrl+, on Windows or Cmd+, on Mac. There's a search box at the top, so you never have to scroll through everything.

Here are a few settings that make a real difference for beginners. Search for each one by name:

• Font Size: if the text feels small, bump it up to 15 or 16. Your eyes will thank you.
• Auto Save: set it to afterDelay. VS Code then saves your files automatically, so you'll never wonder why your changes aren't showing up in the browser.
• Word Wrap: set it to on. Long lines then wrap onto the next line instead of disappearing off the edge of the screen.
• Linked Editing: turn it on. When you rename an opening HTML tag, the closing tag changes with it. You'll appreciate this in the HTML course.

You can also zoom the whole window in and out with Ctrl and + or - (Cmd on Mac). That's handy if you're on a small screen or sharing your screen with someone.

It's easy to spend hours tweaking themes and settings. It's fun, and a bit of it is great. But the defaults are good, and you can always change things later as you figure out what you like. For now, pick a theme you enjoy, make the text a comfortable size and move on.