Installing VS Code & Setup · JavaScript → TypeScript: Zero to Job-Ready

Before you can write code, you need somewhere to write it. You could use a plain text editor like Notepad — but that's like writing a novel in a tool that can't even spell-check. A proper code editor highlights your code in color, points out mistakes, completes words for you, and tidies up formatting on its own.

In this lesson you'll install Visual Studio Code (everyone calls it "VS Code"), add a handful of extensions, and flip one setting that will save you from messy code for the rest of your career. It takes about ten minutes, and you only do it once.

What is a code editor — and why VS Code?

A code editor is a program for writing code, the same way a word processor is a program for writing documents. The fancier ones are called IDEs (Integrated Development Environments) because they bundle in extra tools — debugging, running code, version control — all in one window.

VS Code sits in a sweet spot: it's light and fast like a simple editor, but with extensions it becomes as powerful as a full IDE. It's free, made by Microsoft, runs on every major operating system, and is the most popular editor among professional developers by a wide margin. Learn it now and you'll use it in almost any job you take.

Four areas you'll use constantly: the sidebar (your files), the editor (your code), the terminal (run commands), and the status bar (quick info).

Downloading and installing

Head to the official site — code.visualstudio.com — and click the big download button. The site detects your operating system automatically, so you'll get the right version without hunting.

Windows: run the downloaded .exe installer. When asked, tick "Add to PATH" and the right-click context-menu options — they make life easier later.
macOS: open the .zip, then drag Visual Studio Code into your Applications folder.
Linux: install the .deb or .rpm package, or use your distribution's software center / package manager.

Launch VS Code once it's installed. You'll see a Welcome tab — you can close it. That's it: the editor is ready. Now let's make it powerful.

📌 Important

Always download VS Code from the official code.visualstudio.com. Avoid "download" sites that show up in search ads — they sometimes bundle unwanted software. The real site is free and ad-free.

The essential extensions

Extensions add features to VS Code. There are thousands, but you only need a few to get started. Open the Extensions view (the four-squares icon in the sidebar, or press Ctrl/Cmd + Shift + X), then search for each one by name and click Install.

Prettier — Code formatter: automatically formats your code — spacing, indentation, quotes — so it always looks neat and consistent. This is the one that does the magic when you save.
ESLint: scans your JavaScript and TypeScript for likely mistakes and bad patterns, underlining problems before you even run the code.
Live Server: launches your HTML page in the browser and refreshes it instantly every time you save — no manual reloading.
Error Lens: shows error and warning messages right next to the line they happen on, instead of hiding them in a panel you have to hunt through.

💡 Tip

When you search the Extensions view, check the publisher and the install count. The right Prettier is published by Prettier with millions of installs; the right ESLint is published by Microsoft. Popular, official extensions are the safe choice.

Settings for clean formatting

Installing Prettier isn't enough — you need to tell VS Code to use it automatically. The single most valuable setting is format on save: every time you press save, your file is instantly cleaned up. Indentation fixes itself, spacing becomes consistent, and you stop wasting energy on tidiness.

The quickest way to set this up precisely is to edit your settings file directly. Open the Command Palette with Ctrl/Cmd + Shift + P, type "Open User Settings (JSON)", and press Enter. Add these lines inside the curly braces:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "files.autoSave": "onFocusChange"
}

Here's what each line does:

editor.formatOnSave — runs the formatter automatically every time you save.
editor.defaultFormatter — tells VS Code that Prettier is the tool that should do the formatting.
editor.tabSize — sets indentation to 2 spaces, the common standard for web code.
files.autoSave — saves the file when you click away, so formatting happens even when you forget to hit save.

Prefer clicking to typing? You can flip the first two on through the UI: open Settings (Ctrl/Cmd + ,), search "format on save" and tick it, then search "default formatter" and choose Prettier.

⚠️ Common Mistake

If saving doesn't reformat your file, it's almost always because the default formatter isn't set to Prettier, or the Prettier extension isn't installed. VS Code can't format a file when it doesn't know which tool to use — set both and the magic kicks in.

🧠 Expert Tip

Format-on-save isn't about looks — it's about focus. When the editor handles tidiness, your brain is free to think about logic. And on a team, everyone's code comes out formatted the same way, which means cleaner code reviews and far fewer pointless arguments about spacing.

🛠️ Hands-on Exercise

Prove your setup works. Create a file called test.js and paste in some deliberately messy code — for example: const name="Sam" ;function hi( ){console.log( name )} all on one line with random spacing. Then save the file and watch what happens.

Show what should happen

The moment you save, Prettier reformats the file into clean, readable code — something like this:

const name = "Sam";
function hi() {
  console.log(name);
}

If it reformatted, your setup is perfect. If nothing changed, check three things: the Prettier extension is installed, editor.formatOnSave is true, and the default formatter is set to esbenp.prettier-vscode.

What is a code editor — and why VS Code?

Downloading and installing

The essential extensions

Settings for clean formatting

Further reading