Project 6: The "Focus Mode" Workspace (Settings Profiles)

Project 6: The “Focus Mode” Workspace (Settings Profiles)

Project Overview

Attribute	Value
Difficulty	Beginner
Time Estimate	Weekend
Main Language	JSON
Knowledge Area	Environment Configuration
Prerequisites	None

Learning Objectives

By completing this project, you will:

1. Understand the settings hierarchy (User > Remote > Workspace > Folder)
2. Create and manage VS Code profiles for different contexts
3. Configure language-specific settings for different file types
4. Master workspace trust and security boundaries
5. Export and share profiles with teammates

The Core Question

“How do I optimize my tool for the specific task at hand?”

---

Deep Theoretical Foundation

The Problem with One-Size-Fits-All

VS Code is hyper-configurable with 1,000+ settings. But different tasks need different configurations:

Task	Ideal Setup
Writing documentation	Large font, spell-check, no linting, minimal UI
Coding	Small font, strict linting, debugger visible, dense UI
Code review	Side-by-side diff, no format-on-save
Teaching	Extra-large font, high contrast, simplified UI

Manually toggling 15+ settings every time you switch tasks is tedious and error-prone.

The Settings Hierarchy

VS Code uses a cascading settings system. Lower levels override higher levels:

┌──────────────────────────────────────────────────────────┐
│  Default Settings (Built into VS Code)                   │
│  - Lowest priority                                       │
│  - Cannot be edited                                      │
└────────────────────┬─────────────────────────────────────┘
                     │ Overridden by ↓
┌────────────────────┴─────────────────────────────────────┐
│  User Settings (Global)                                  │
│  - Location: ~/.config/Code/User/settings.json           │
│  - Applies to ALL projects                               │
│  - Your personal preferences                             │
└────────────────────┬─────────────────────────────────────┘
                     │ Overridden by ↓
┌────────────────────┴─────────────────────────────────────┐
│  Profile Settings (If using profiles)                    │
│  - Settings isolated to this profile                     │
│  - Switch profiles = switch settings                     │
└────────────────────┬─────────────────────────────────────┘
                     │ Overridden by ↓
┌────────────────────┴─────────────────────────────────────┐
│  Workspace Settings (.code-workspace file)               │
│  - Multi-root workspace configurations                   │
│  - Shared across team if committed                       │
└────────────────────┬─────────────────────────────────────┘
                     │ Overridden by ↓
┌────────────────────┴─────────────────────────────────────┐
│  Folder Settings (.vscode/settings.json)                 │
│  - Highest priority                                      │
│  - Project-specific settings                             │
│  - Usually committed to Git                              │
└──────────────────────────────────────────────────────────┘

Key Insight: If a setting “doesn’t work,” check if it’s being overridden by a higher-priority level.

What Profiles Isolate

Each profile contains:

• ✅ Settings (editor.fontSize, theme, etc.)
• ✅ Keyboard shortcuts (keybindings.json)
• ✅ User snippets
• ✅ User tasks
• ✅ Extensions (enabled/disabled per profile)

Profiles do NOT isolate:

• ❌ Recent files/folders
• ❌ Git credentials
• ❌ Workspace/folder settings

Language-Specific Settings

You can configure different settings for different file types:

{
  "editor.tabSize": 4,          // Default for all files

  "[python]": {
    "editor.tabSize": 4,        // Python: 4 spaces (PEP 8)
    "editor.formatOnSave": true
  },

  "[javascript]": {
    "editor.tabSize": 2,        // JavaScript: 2 spaces
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[markdown]": {
    "editor.wordWrap": "on",    // Wrap long lines
    "editor.quickSuggestions": false
  }
}

Workspace Trust

VS Code restricts dangerous settings in untrusted workspaces:

Restricted in untrusted workspaces:

• python.pythonPath (could execute arbitrary code)
• Terminal profiles
• Task definitions
• Debug configurations

Always allowed:

• Themes and colors
• Editor appearance
• Git settings

When you open an untrusted folder, VS Code shows:

┌─────────────────────────────────────────────────────────────┐
│ Do you trust the authors of the files in this folder?       │
│                                                              │
│ [Trust Folder]    [Open in Restricted Mode]                 │
└─────────────────────────────────────────────────────────────┘

---

Project Specification

What You’re Building

Multiple VS Code profiles optimized for different contexts:

1. Zen Writer: Minimalist, distraction-free writing
2. Deep Focus Coding: Dense, linting-heavy development
3. Teaching Mode: Large fonts, high contrast
4. Code Review: Optimized for diffs and comparisons

Deliverables

1. 3-4 Distinct Profiles: Each with unique settings and extensions
2. Language-Specific Overrides: Different configs for Python/JS/Markdown
3. Workspace Settings Template: .vscode/settings.json for projects
4. Profile Export Files: Shareable .code-profile files

Success Criteria

• Can switch between profiles in under 2 seconds
• Each profile has distinct visual appearance
• Extensions are profile-specific (ESLint off in writing mode)
• Settings hierarchy is understood (folder > workspace > user)
• Can export and share a profile

---

Solution Architecture

Profile Design Matrix

Profile	Font Size	Theme	Line Numbers	Sidebar	Key Extensions
Zen Writer	16px	Light	Off	Hidden	Spell Checker
Deep Focus	13px	Dark	On	Visible	ESLint, Prettier
Teaching	20px	High Contrast	On	Visible	Live Share
Code Review	14px	Dark	On	Visible	GitLens

Settings Categories

Essential Settings to Customize:
├── Editor Appearance
│   ├── editor.fontSize
│   ├── editor.lineHeight
│   ├── editor.fontFamily
│   └── editor.wordWrap
│
├── UI Layout
│   ├── workbench.sideBar.location
│   ├── workbench.activityBar.visible
│   ├── editor.minimap.enabled
│   └── breadcrumbs.enabled
│
├── Behavior
│   ├── editor.formatOnSave
│   ├── editor.autoSave
│   ├── files.autoSave
│   └── editor.quickSuggestions
│
└── Theme
    ├── workbench.colorTheme
    └── workbench.iconTheme

---

Phased Implementation Guide

Phase 1: Understanding Current Settings (30 minutes)

Goal: Map your current configuration.

1. View current settings:
   • Press Cmd+, to open Settings
   • Toggle between UI and JSON views (icon in top-right)
2. Find your settings.json:
   • Cmd+Shift+P → “Preferences: Open User Settings (JSON)”
   • Note the location (usually ~/.config/Code/User/settings.json)
3. Identify your key settings:

// Example current settings
{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "workbench.colorTheme": "One Dark Pro",
  "editor.formatOnSave": true,
  "editor.minimap.enabled": true
}

1. Check for language-specific settings:

{
  "[python]": {
    "editor.tabSize": 4
  }
}

Phase 2: Create “Zen Writer” Profile (30 minutes)

Goal: Build a distraction-free writing profile.

1. Create the profile:
   • Cmd+Shift+P → “Profiles: Create Profile”
   • Name: “Zen Writer”
   • Check all options (Settings, Extensions, etc.)
   • Click “Create”

2. VS Code switches to the new profile (see indicator in bottom-left)

3. Configure settings for writing:

{
  // Large, readable font
  "editor.fontSize": 16,
  "editor.lineHeight": 1.8,
  "editor.fontFamily": "'iA Writer Mono', Menlo, monospace",

  // Remove distractions
  "editor.lineNumbers": "off",
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": false,
  "editor.renderWhitespace": "none",

  // Hide UI elements
  "workbench.activityBar.visible": false,
  "workbench.statusBar.visible": false,

  // Writing-friendly behavior
  "editor.wordWrap": "on",
  "editor.quickSuggestions": false,
  "editor.suggestOnTriggerCharacters": false,

  // Light theme for reading
  "workbench.colorTheme": "Quiet Light"
}

1. Manage extensions for this profile:
   • Open Extensions (Cmd+Shift+X)
   • Disable ESLint, Prettier, etc. (click gear → “Disable (Zen Writer)”)
   • Install/Enable “Code Spell Checker”
2. Test the profile:
   • Open a Markdown file
   • Notice the clean, minimal interface

Phase 3: Create “Deep Focus Coding” Profile (30 minutes)

Goal: Build a dense, productive coding environment.

1. Create the profile:
   • Click profile indicator (bottom-left) → “Create Profile”
   • Name: “Deep Focus Coding”
   • Copy from: Default (or your current setup)
2. Configure for coding:

{
  // Dense, efficient layout
  "editor.fontSize": 13,
  "editor.lineHeight": 1.4,

  // Full information display
  "editor.lineNumbers": "on",
  "editor.minimap.enabled": true,
  "breadcrumbs.enabled": true,
  "editor.rulers": [80, 120],

  // Strict linting
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // Dark theme for long sessions
  "workbench.colorTheme": "One Dark Pro",

  // Show all UI elements
  "workbench.activityBar.visible": true,
  "workbench.statusBar.visible": true
}

1. Enable development extensions:
   • ESLint
   • Prettier
   • GitLens
   • Error Lens

Phase 4: Create “Teaching Mode” Profile (20 minutes)

Goal: Optimal for screen sharing and presentations.

1. Create the profile from Deep Focus Coding

2. Configure for visibility:

{
  // Extra large for visibility
  "editor.fontSize": 20,
  "editor.lineHeight": 1.6,
  "terminal.integrated.fontSize": 18,

  // High contrast theme
  "workbench.colorTheme": "Default High Contrast Light",

  // Clear UI
  "editor.minimap.enabled": false,
  "editor.lineNumbers": "on",

  // Reduce distractions
  "editor.renderWhitespace": "none",
  "workbench.tips.enabled": false
}

1. Install Live Share for collaborative teaching

Phase 5: Language-Specific Settings (30 minutes)

Goal: Configure per-language behavior.

1. Add language overrides to your coding profile:

{
  // Base settings
  "editor.tabSize": 2,
  "editor.formatOnSave": true,

  // Python-specific
  "[python]": {
    "editor.tabSize": 4,
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.rulers": [79, 120]
  },

  // JavaScript/TypeScript
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // Markdown
  "[markdown]": {
    "editor.wordWrap": "on",
    "editor.formatOnSave": false,
    "editor.quickSuggestions": false
  },

  // JSON
  "[json]": {
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // YAML
  "[yaml]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  }
}

Phase 6: Workspace Settings Template (20 minutes)

Goal: Create project-level settings.

1. Create .vscode/settings.json in a project:

{
  // Project-specific settings (override user/profile)
  "editor.tabSize": 2,
  "editor.formatOnSave": true,

  // Project formatter
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // Project-specific file associations
  "files.associations": {
    "*.env.*": "dotenv"
  },

  // Project excludes
  "files.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.git": true
  },

  // Search excludes
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/*.min.js": true
  }
}

1. Create .vscode/extensions.json (recommended extensions):

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

Phase 7: Export and Share Profiles (15 minutes)

Goal: Create shareable profile files.

1. Export a profile:
   • Click profile indicator → right-click profile name → “Export Profile”
   • Choose location to save .code-profile file
2. Import a profile:
   • Cmd+Shift+P → “Profiles: Import Profile”
   • Select the .code-profile file
3. Share with team:
   • Commit .code-profile files to repository
   • Or share via Slack/email

---

Complete Profile Examples

Zen Writer Profile Settings

{
  "editor.fontSize": 16,
  "editor.lineHeight": 1.8,
  "editor.lineNumbers": "off",
  "editor.minimap.enabled": false,
  "editor.wordWrap": "on",
  "editor.quickSuggestions": {
    "other": false,
    "comments": false,
    "strings": false
  },
  "editor.renderWhitespace": "none",
  "editor.renderLineHighlight": "none",
  "breadcrumbs.enabled": false,
  "workbench.activityBar.visible": false,
  "workbench.statusBar.visible": false,
  "workbench.colorTheme": "Quiet Light",
  "zenMode.fullScreen": true,
  "zenMode.hideLineNumbers": true,
  "zenMode.hideTabs": true
}

Deep Focus Coding Profile Settings

{
  "editor.fontSize": 13,
  "editor.lineHeight": 1.4,
  "editor.tabSize": 2,
  "editor.lineNumbers": "on",
  "editor.minimap.enabled": true,
  "editor.minimap.maxColumn": 80,
  "editor.rulers": [80, 120],
  "editor.formatOnSave": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.stickyScroll.enabled": true,
  "workbench.colorTheme": "One Dark Pro",
  "workbench.activityBar.visible": true,
  "workbench.statusBar.visible": true,
  "git.enableSmartCommit": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  }
}

---

Testing Strategy

Profile Verification

1. Visual Check: Each profile should look distinctly different
2. Extension Check: Correct extensions enabled/disabled per profile
3. Behavior Check: formatOnSave works in coding, not in writing
4. Override Check: Folder settings override profile settings

Test Switching

1. Open a Markdown file
2. Switch to Zen Writer → UI should simplify
3. Switch to Deep Focus → ESLint squiggles should appear
4. Switch to Teaching → Font should enlarge

---

Common Pitfalls and Debugging

Pitfall 1: Setting Doesn’t Apply

Problem: Changed a setting but nothing changed.

Debug:

1. Check if folder settings override it (.vscode/settings.json)
2. Check if it’s a workspace setting (.code-workspace)
3. Use Settings search to see “Modified in: Folder”

Pitfall 2: Extension Shows in Wrong Profile

Problem: Disabled ESLint in Zen Writer, but it’s still running.

Solution: Ensure you disabled for this profile specifically, not globally.

Pitfall 3: Profile Doesn’t Save

Problem: Switched profiles, settings reverted.

Solution: VS Code auto-saves profile settings. If not persisting, check write permissions on settings directory.

---

Interview Questions

1. “How do you manage project-specific settings in VS Code?”

   Answer: “I use the .vscode folder with settings.json for project-specific configurations. These override user settings, ensuring all team members have consistent formatter and linter settings. I also use extensions.json to recommend extensions.”

2. “How do VS Code profiles work?”

   Answer: “Profiles isolate settings, keybindings, snippets, tasks, and extensions into separate contexts. I can have a ‘Writing’ profile with spell-check and no linting, and a ‘Coding’ profile with strict ESLint. Switching is instant and doesn’t affect other profiles.”

3. “Explain VS Code’s settings hierarchy.”

   Answer: “Settings cascade from low to high priority: Default → User → Profile → Workspace → Folder. Folder settings win. This means a project’s .vscode/settings.json overrides my personal preferences, ensuring team consistency.”

---

Resources

Essential Reading

Resource	Topic
Visual Studio Code Distilled (Del Sole)	Settings and customization
VS Code Documentation	Profiles, Settings hierarchy

Useful Settings to Know

• editor.fontSize - Text size
• editor.lineNumbers - on, off, relative
• workbench.colorTheme - Theme name
• editor.minimap.enabled - Show minimap
• workbench.activityBar.visible - Show left sidebar icons

---

Self-Assessment Checklist

• I understand the settings hierarchy (Default → User → Workspace → Folder)
• I have created at least 2 distinct profiles
• I can configure language-specific settings
• I understand workspace trust
• I can export and import profiles
• I can create project-level settings that override profiles

---

Previous: P05-works-on-my-machine-killer.md Next: P07-code-butler-command-extension.md