iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Workspaces

By · Reviewed & last updated · Part of VS Code Tutorial

A multi-root workspace lets you open several folders in one VS Code window with shared settings, search scope, and tasks. It is the right setup for monorepos, frontend+backend pairs, or any project where you constantly jump between two repos. The workspace lives in a `.code-workspace` JSON file you can commit.

A multi-root workspace with shared tasks and settings

EXAMPLE
// shop.code-workspace
{
  "folders": [
    { "name": "api",     "path": "./apps/api" },
    { "name": "web",     "path": "./apps/web" },
    { "name": "mobile",  "path": "./apps/mobile" },
    { "name": "shared",  "path": "./packages/shared" }
  ],

  "settings": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.rulers": [100],
    "files.exclude": {
      "**/.turbo": true,
      "**/node_modules": true,
      "**/dist": true
    },
    "search.exclude": {
      "**/node_modules": true,
      "**/dist": true,
      "**/*.lock": true
    },
    "typescript.tsdk": "node_modules/typescript/lib"
  },

  "extensions": {
    "recommendations": [
      "dbaeumer.vscode-eslint",
      "esbenp.prettier-vscode",
      "bradlc.vscode-tailwindcss",
      "prisma.prisma"
    ]
  },

  "tasks": {
    "version": "2.0.0",
    "tasks": [
      {
        "label": "dev:all",
        "type": "shell",
        "command": "pnpm dev",
        "options": { "cwd": "${workspaceFolder:api}/.." },
        "isBackground": true,
        "problemMatcher": []
      },
      {
        "label": "test:api",
        "type": "shell",
        "command": "pnpm --filter api test",
        "presentation": { "reveal": "silent" }
      }
    ]
  },

  "launch": {
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Debug API (node)",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceFolder:api}",
        "program": "${workspaceFolder:api}/dist/server.js",
        "preLaunchTask": "test:api"
      }
    ]
  }
}

// Use it:
//   code shop.code-workspace
// Folder-specific settings still work in apps/api/.vscode/settings.json —
// they override the workspace settings for that folder only.
// Workspace-level settings override your user settings, so a teammate
// who opens the workspace gets the same lint/format behaviour as you.

Why it matters

`\${workspaceFolder:NAME}` is the missing puzzle piece — it lets a single tasks.json refer to specific folders by their workspace name, so the same workspace file works for everyone regardless of where they cloned the repos.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
// File → Save Workspace As… → my-app.code-workspace
// Workspaces remember: open folders, extensions recommended, debug configs, tasks, settings.
Try it Yourself »

Discussion

Loading…