Sign in with Google

How to Set Up VS Code (A Complete Beginner Setup)

Install it, configure the settings that matter, and stop at five extensions instead of fifty.

beginner7 min read
dev-setupvs-codecode-editordeveloper-toolsbeginners
Most people install VS Code, get hit with a wall of panels and a marketplace of 60,000 extensions, install twenty of them in a panic, and end up with an editor that takes eight seconds to open a file. The setup that actually works is small. You need four panels, about eight settings, and roughly five extensions. This guide walks the whole thing, in order, and tells you what to skip.
iWhat you need
A Mac, Windows PC, or Linux machine, about 500 MB of disk space, and 20 minutes. You do not need any programming language installed yet — VS Code works fine as a plain text editor while you decide.
Download the installer from code.visualstudio.com. The site detects your operating system and offers the right build. Do not download VS Code from a third-party download portal — those bundle installers with adware often enough that it is not worth the risk.

Install by platform

  1. 1macOS: the download is a .zip containing Visual Studio Code.app. Unzip it and drag the app into your Applications folder. If you leave it in Downloads, auto-update will fail later.
  2. 2Windows: run the User Installer (.exe). On the setup screen, tick "Add to PATH" and both "Open with Code" context-menu options — these save you real time later.
  3. 3Linux: use the .deb or .rpm package from the download page, or install the Microsoft-published package repository so apt or dnf keeps it updated.
  4. 4Launch it once and let it finish first-run setup. Skip the welcome walkthrough for now; you will understand it better after the next section.
✓Get the `code` command
On macOS, open the Command Palette and run Shell Command: Install 'code' command in PATH. After that, typing code . in any folder opens that folder in VS Code — which is how you will open almost every project from now on.
The vertical strip of icons on the far left is the Activity Bar. Four of its entries carry almost all of the work you will do; the rest can wait until you have a reason to open them.

The parts of the window worth knowing

  1. 1Explorer (the two-page icon) shows your project's file tree. This is where you create, rename, and drag files.
  2. 2Search (the magnifier) searches across every file in the folder, not just the open one. It supports regular expressions and replace-across-project.
  3. 3Source Control (the branching icon) shows every file Git considers changed, and lets you stage and commit without touching the terminal.
  4. 4Extensions (the blocks icon) is the marketplace. Visit it deliberately, not out of boredom.
  5. 5The Command Palette is the single most useful thing in the editor. Press Cmd+Shift+P on macOS or Ctrl+Shift+P on Windows and Linux, then type what you want to do in plain words.
The Command Palette is worth a minute of deliberate practice. Nearly every menu item, setting, and extension command is reachable by typing a few letters of its name. Once it is in your fingers you stop hunting through menus entirely.
Open settings with Cmd+, on macOS or Ctrl+, on Windows and Linux. The graphical settings editor is fine for browsing, but editing the JSON directly is faster and easier to copy between machines. Open the Command Palette and run Preferences: Open User Settings (JSON).
json
{
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.renderWhitespace": "boundary",
  "editor.bracketPairColorization.enabled": true,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "workbench.startupEditor": "none",
  "explorer.confirmDelete": true
}

A sane starting settings.json — paste this in and adjust from there

Two of those deserve an explanation. Auto save on focus change means the file writes to disk whenever you click away, which removes an entire category of "why isn't my change showing up" confusion. Format on save means your code gets reformatted every time you hit save, so you stop thinking about indentation forever — but it only does something once you have a formatter extension installed, which is the next section.
!User settings vs. workspace settings
Settings you edit this way are user settings and apply everywhere. A project can also ship a .vscode/settings.json that overrides them for that folder only. If a setting mysteriously does not apply in one project, check for that file before assuming VS Code is broken.
Every extension you install runs code at startup and, in many cases, on every keystroke. Ten well-chosen extensions is a fast editor. Forty is a laggy one. Here is a defensible starting set.

The starting five

  1. 1The official language extension for whatever you are learning — Python (Microsoft), or the built-in TypeScript and JavaScript support, which needs no install.
  2. 2Prettier, an opinionated code formatter for JavaScript, TypeScript, HTML, CSS, JSON, and Markdown. This is what makes format-on-save do something.
  3. 3ESLint, if you write JavaScript or TypeScript. It underlines real bugs as you type, not just style problems.
  4. 4GitLens, which annotates each line with who last changed it and why. It makes reading unfamiliar code dramatically easier.
  5. 5A theme you like looking at. This is not frivolous — you will stare at it for hundreds of hours.
Once Prettier is installed, tell VS Code to use it. Add "editor.defaultFormatter": "esbenp.prettier-vscode" to your settings.json, or right-click in a file and choose Format Document With… then Configure Default Formatter.
VS Code has a full terminal built in. Open it with Ctrl+` — the backtick key, above Tab on most keyboards. It opens already positioned in your project folder, which saves you a cd every single time. You can run several terminals side by side using the split icon, which is how you run a dev server in one and Git commands in another.
macOS
$code .
That command, run from inside any project folder in your system terminal, opens the whole folder as a VS Code workspace. It is the standard way to start work on a project, and it is why the PATH step earlier was worth doing.
Settings Sync pushes your settings, keybindings, extensions, and snippets to a GitHub or Microsoft account, then pulls them down on any other machine you sign into. Set it up now, while your config is small and correct, rather than after you have spent a year tuning one machine you then have to replace.
  1. 1Click the gear icon in the bottom-left corner and choose Backup and Sync Settings.
  2. 2Pick what to sync. Syncing everything is the sensible default; you can exclude machine-specific settings later.
  3. 3Sign in with GitHub or a Microsoft account. On your second machine, sign in with the same account and everything arrives within a minute.

Symptom, cause, fix

  1. 1Format on save does nothing. You have the setting on but no formatter for that file type. Open the Command Palette, run Format Document, and VS Code will prompt you to pick one.
  2. 2The editor feels slow to start. Run Developer: Startup Performance from the Command Palette — it lists each extension's activation time. Uninstall anything over 200 ms that you do not use weekly.
  3. 3The `code` command is not found in your terminal. On macOS you skipped the Shell Command step; run it from the Command Palette. On Windows you unticked Add to PATH during install; re-run the installer.
  4. 4Your Python or Node interpreter is not detected. Run Python: Select Interpreter (or the equivalent for your language) from the Command Palette and point it at the right one explicitly.
  5. 5Auto-update fails on macOS. The app is still sitting in your Downloads folder. Move it to /Applications and relaunch.
  6. 6Settings you changed do not apply in one project. That project has a .vscode/settings.json overriding them. Open it and look.
An editor is only half the setup. Next, install the language you plan to write — How to Install Python on a Mac or How to Install Python on Windows — and get version control working with How to Use Git, which pairs directly with the Source Control panel you just met. If you are still deciding what to learn at all, How to Choose Your First Programming Language is the better place to start. When you want the whole path rather than one tool at a time, the Becoming a Software Engineer roadmap sequences the environment, the language, and the fundamentals in the order they actually build on each other.