Workspaces & Settings

VS Code Essentials — Workspaces & Settings

VS Code Essentials

Course 1 · Chapter 5 · Workspaces & Settings

⚙️ Workspaces & Settings

Every setting you change in VS Code has to live somewhere — this chapter covers exactly where, the difference between a setting that follows you everywhere and one scoped to a single project, and how to work across several unrelated folders at once with a multi-root workspace.

👤 User Settings vs. Workspace Settings

VS Code has two layers of settings, checked in order:

Layer	Scope	Stored in
User settings	Every project, everywhere on this machine	A single global `settings.json`
Workspace settings	Only the currently open folder	`.vscode/settings.json`, inside the project itself

Where both are set for the same setting, Workspace settings win — this is what lets one project enforce 2-space indentation while your personal default everywhere else is 4, without those two preferences ever conflicting.

✏️ Editing settings.json

Ctrl+, (Cmd+, on macOS) opens the Settings UI — a searchable, friendlier view with tabs for User and Workspace. For settings not exposed there, or to paste in a configuration directly, the Command Palette's (Chapter 2) Preferences: Open Settings (JSON) command opens the raw file:

// settings.json
{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "files.autoSave": "afterDelay",
  "editor.fontSize": 14
}
        

📋 Common Settings Worth Knowing

editor.formatOnSave

Runs your formatter (Chapter 4's Prettier, for example) automatically every save.

editor.tabSize

How many spaces one indentation level represents.

files.autoSave

Saves automatically after a delay or on focus change, instead of only on Ctrl+S.

editor.fontSize

The editor's font size, independent of your OS-wide display settings.

🗂️ Multi-Root Workspaces

Normally, "Open Folder" gives you one project. A multi-root workspace combines several unrelated folders into one window — useful when a frontend repo and a backend repo need to be visible side by side, for instance. File → Add Folder to Workspace adds a second root; File → Save Workspace As saves the combination as a .code-workspace file you can reopen later, with each root folder's own Workspace settings kept separate.

📌 Recommended Extensions via extensions.json

Chapter 4 covered choosing extensions for yourself. A project can also declare its own recommendations, in .vscode/extensions.json:

// .vscode/extensions.json
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}
        

When someone opens this folder for the first time, VS Code shows a prompt offering to install exactly these extensions — a lightweight, version-controlled way to keep a team aligned on the essentials (Chapter 4's ESLint/Prettier picks are a natural fit here) without forcing anyone's personal, unrelated extension choices on the whole project.

⚠ Commit Shared Standards, Not Personal Preferences

.vscode/settings.json and .vscode/extensions.json are typically committed to the repository, so the whole team gets the same project-level standards automatically. Be deliberate about what goes in there: tab size, format-on-save, and required linting extensions are genuinely team-wide concerns. A specific color theme, personal font size, or your own keybindings are not — those belong in your User settings, kept off the shared file entirely.

A Familiar Split: Global vs. Project-Local

If you've worked through the site's Python courses, this User-vs-Workspace split mirrors a familiar idea from a different angle: a Python venv (Course 1, Chapter 9) keeps one project's dependencies isolated from your machine's global Python install, the same way Workspace settings keep one project's preferences isolated from your machine-wide User settings — in both cases, project-local state overriding a broader global default, without the two ever colliding.

💻 Coding Challenges

Exercise 1: Set a Workspace-Only Preference

In one project, set editor.tabSize to 2 as a Workspace setting (not User). Confirm a different project still uses your User-level default by opening it and checking the same setting.

→ Solution

Exercise 2: Create an extensions.json

In a project's .vscode folder, create an extensions.json recommending 2 extensions from Chapter 4. Close and reopen the folder to see VS Code's install prompt appear.

→ Solution

Exercise 3: Build a Multi-Root Workspace

Open one folder, then use File → Add Folder to Workspace to add a second, unrelated folder. Save the result with File → Save Workspace As, then close and reopen it from the saved .code-workspace file.

→ Solution

🎯 What's Next

Next chapter: The Integrated Terminal & Tasks — running commands without leaving the editor, and tasks.json for build/watch/test tasks.