VS Code Workspace Configuration Skill

This skill provides VS Code settings.json template and validation logic for consistent development environment across repositories.

Purpose

Manage .vscode/settings.json configuration to:

• Configure Prettier as default formatter for all languages
• Enable format on save and auto-fix on save
• Set up ESLint auto-fix integration
• Configure pnpm as package manager
• Set up terminal environment and profiles
• Configure TypeScript workspace SDK
• Define search and file exclusions
• ENSURE only settings.json exists (DELETE unnecessary files)

Usage

This skill is invoked by the vscode-agent when:

• Creating new .vscode/settings.json files
• Auditing existing VS Code workspace settings
• Validating settings against standards
• Detecting and removing unnecessary files from .vscode directory

Template

The standard VS Code settings template is located at:

templates/settings.template.json

The 8 VS Code Standards

Rule 1: Prettier as Default Formatter

All language-specific formatters must use Prettier:

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

Required for all repos:

• TypeScript ([typescript])
• TypeScript React ([typescriptreact])

Optional but recommended:

• JavaScript ([javascript])
• JSON ([json])

Validation:

# Check required formatters
jq '."[typescript]".editor.defaultFormatter' .vscode/settings.json | grep -q "prettier-vscode"
jq '."[typescriptreact]".editor.defaultFormatter' .vscode/settings.json | grep -q "prettier-vscode"

Rule 2: Format on Save Enabled

Auto-formatting must be enabled:

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.trimAutoWhitespace": true
}

Exceptions (Handlebars):

{
  "[handlebars]": {
    "editor.formatOnSave": false,
    "editor.formatOnPaste": false
  }
}

Validation:

# Check format on save settings
jq '.editor.formatOnSave' .vscode/settings.json | grep -q "true"
jq '.editor.formatOnPaste' .vscode/settings.json | grep -q "true"

Rule 3: ESLint Auto-Fix

ESLint must auto-fix on save:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Validation:

# Check ESLint auto-fix
jq '.editor.codeActionsOnSave."source.fixAll.eslint"' .vscode/settings.json | grep -q "explicit"

Rule 4: pnpm Package Manager

pnpm must be configured as package manager:

{
  "npm.packageManager": "pnpm"
}

Validation:

# Check package manager
jq '.npm.packageManager' .vscode/settings.json | grep -q "pnpm"

Rule 5: Terminal Configuration

Bash terminal with proper environment:

{
  "terminal.integrated.env.linux": {
    "PATH": "${env:PATH}"
  },
  "npm.scriptExplorerAction": "open",
  "npm.runInTerminal": true,
  "terminal.integrated.defaultProfile.linux": "bash",
  "terminal.integrated.profiles.linux": {
    "bash": {
      "path": "bash",
      "args": ["-l"]
    }
  }
}

Validation:

# Check terminal configuration
jq '.terminal.integrated.defaultProfile.linux' .vscode/settings.json | grep -q "bash"
jq '.terminal.integrated.profiles.linux.bash.path' .vscode/settings.json | grep -q "bash"

Rule 6: TypeScript Configuration

Use workspace TypeScript SDK:

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

Validation:

# Check TypeScript SDK
jq '.typescript.tsdk' .vscode/settings.json | grep -q "node_modules/typescript/lib"
jq '.typescript.enablePromptUseWorkspaceTsdk' .vscode/settings.json | grep -q "true"

Rule 7: Search and Files Exclusions

Exclude build artifacts and dependencies:

{
  "search.exclude": {
    "**/node_modules": true,
    "**/.turbo": true,
    "**/coverage": true,
    "**/*.tsbuildinfo": true,
    "**/pnpm-lock.yaml": true,
    "**/dist": true,
    "**/.next": true,
    "**/build": true
  },
  "files.exclude": {
    "**/.turbo": true,
    "**/*.tsbuildinfo": true
  }
}

Required patterns:

• **/node_modules
• **/.turbo
• **/coverage
• **/*.tsbuildinfo
• **/pnpm-lock.yaml

Optional patterns (project-specific):

• **/dist
• **/.next
• **/build

Validation:

# Check required exclusions
jq '.search.exclude."**/node_modules"' .vscode/settings.json | grep -q "true"
jq '.search.exclude."**/.turbo"' .vscode/settings.json | grep -q "true"
jq '.files.exclude."**/.turbo"' .vscode/settings.json | grep -q "true"

Rule 8: Only settings.json Required

The .vscode folder should contain ONLY settings.json:

Required:

• ✅ .vscode/settings.json - Workspace settings

Unnecessary (MUST be deleted):

• ❌ .vscode/extensions.json - Extension recommendations (developers manage their own)
• ❌ .vscode/launch.json - Debug configurations (developer-specific preferences)
• ❌ .vscode/tasks.json - Task definitions (use package.json scripts instead)

Rationale:

1. settings.json - Project-wide standards all developers must follow
2. extensions.json - Developers manage their own extensions
3. launch.json - Debug configurations are developer-specific
4. tasks.json - We use package.json scripts and Turborepo, not VS Code tasks

Validation:

# Check for unnecessary files and report for deletion
ls -la .vscode/

# Verify unnecessary files for removal
[ -f ".vscode/extensions.json" ] && echo "REQUIRES DELETION: .vscode/extensions.json"
[ -f ".vscode/launch.json" ] && echo "REQUIRES DELETION: .vscode/launch.json"
[ -f ".vscode/tasks.json" ] && echo "REQUIRES DELETION: .vscode/tasks.json"

Optional Settings (Recommended)

Editor Preferences

{
  "editor.rulers": [80],
  "editor.inlayHints.enabled": "off",
  "editor.guides.indentation": false,
  "editor.guides.bracketPairs": false,
  "editor.wordWrap": "off",
  "diffEditor.wordWrap": "off"
}

GitHub Copilot Integration

{
  "github.copilot.chat.commitMessageGeneration.instructions": [
    {
      "file": ".copilot-commit-message-instructions.md"
    }
  ]
}

Note: Requires .copilot-commit-message-instructions.md at root.

Validation

To validate VS Code workspace settings:

1. Check that .vscode directory exists
2. Check that .vscode/settings.json exists
3. Check for unnecessary files (extensions.json, launch.json, tasks.json)
4. Read settings.json
5. Validate against 8 standards
6. Report violations and unnecessary files
7. Recommend deletion of extras

Validation Approach

# Check directory and file exist
[ -d ".vscode" ] || echo "VIOLATION: .vscode directory missing"
[ -f ".vscode/settings.json" ] || echo "VIOLATION: .vscode/settings.json missing"

# Rule 8: Check for unnecessary files and mark for deletion
if [ -f ".vscode/extensions.json" ] || [ -f ".vscode/launch.json" ] || [ -f ".vscode/tasks.json" ]; then
  echo "VIOLATION: Unnecessary files found in .vscode directory"
  echo "DELETE these files: rm .vscode/extensions.json .vscode/launch.json .vscode/tasks.json"
fi

# Rule 1: Prettier formatter
jq '."[typescript]".editor.defaultFormatter' .vscode/settings.json | grep -q "prettier-vscode" || echo "VIOLATION: TypeScript formatter not Prettier"

# Rule 2: Format on save
jq '.editor.formatOnSave' .vscode/settings.json | grep -q "true" || echo "VIOLATION: formatOnSave not enabled"

# Rule 3: ESLint auto-fix
jq '.editor.codeActionsOnSave."source.fixAll.eslint"' .vscode/settings.json | grep -q "explicit" || echo "VIOLATION: ESLint auto-fix not configured"

# Rule 4: pnpm
jq '.npm.packageManager' .vscode/settings.json | grep -q "pnpm" || echo "VIOLATION: Package manager not pnpm"

# Rule 5: Terminal
jq '.terminal.integrated.defaultProfile.linux' .vscode/settings.json | grep -q "bash" || echo "VIOLATION: Terminal not bash"

# Rule 6: TypeScript SDK
jq '.typescript.tsdk' .vscode/settings.json | grep -q "node_modules" || echo "VIOLATION: TypeScript SDK not configured"

# Rule 7: Exclusions
jq '.search.exclude."**/node_modules"' .vscode/settings.json | grep -q "true" || echo "VIOLATION: Missing search exclusions"

Repository Type Considerations

• Consumer Repos: ENFORCE all 8 standards strictly
• Library Repos: May have additional workspace settings
• All Repos: ENSURE only settings.json in .vscode (DELETE extras)

Best Practices

1. CREATE only .vscode/settings.json (never create extensions.json, launch.json, tasks.json)
2. USE Prettier for all language formatters
3. ENABLE format on save for automatic formatting
4. CONFIGURE ESLint auto-fix for automatic linting
5. SET pnpm as package manager
6. USE workspace TypeScript SDK
7. EXCLUDE build artifacts from search
8. DELETE unnecessary .vscode files and verify removal
9. RE-AUDIT after making changes

File Cleanup Workflow

When unnecessary files are detected:

1. IDENTIFY which files exist in .vscode
2. EXPLAIN why they are unnecessary (conflict with standards)
3. PROVIDE deletion command
4. REQUEST user confirmation
5. DELETE if approved
6. RE-AUDIT to verify removal

Example output:

VIOLATION: Unnecessary Files Detected

Found in .vscode/:
- extensions.json (developers manage their own extensions)
- launch.json (debug configs are developer-specific preferences)
- tasks.json (we use package.json scripts instead)

Action Required: Delete with:
  rm .vscode/extensions.json .vscode/launch.json .vscode/tasks.json

Approve deletion? (y/n)

Integration

This skill integrates with:

• Repository type provided via scope parameter. If not provided, use /skill scope-check
• /skill audit-workflow - Bi-directional comparison workflow
• /skill remediation-options - Conform/Update/Ignore choices
• prettier-agent - For formatter configuration
• eslint-agent - For auto-fix configuration
• typescript-agent - For TypeScript SDK configuration
• pnpm-workspace-agent - For package manager setup