VS Code Setup
Configure Visual Studio Code for StarterApp development.
Visual Studio Code provides a lightweight editor foundation for StarterApp development. The setup process installs essential extensions and configures workspace settings for TypeScript, React, and monorepo development.
AI Agent Required
VS Code requires an AI agent extension for context-aware development. Install Claude Code, GitHub Copilot, or Codex from the AI Agent Setup section.
Installation
Download and install Visual Studio Code:
Visit code.visualstudio.com ↗ and download the installer for the operating system
Run the installer. Enable "Add to PATH" during installation for command-line access.
Launch VS Code and open the StarterApp project folder
AI Agent Extensions
Select and install an AI agent extension for context-aware development:
Claude Code
Native StarterApp integration with pre-configured slash commands in .claude/commands.
GitHub Copilot
Inline completions and chat with custom instructions via .github/copilot-instructions.md.
OpenAI Codex
Automatic context loading through AGENTS.md with chat and completion features.
Heads up
VS Code without an AI agent provides manual editing only. Install one of the AI agent extensions above for context-aware code generation and assistance.
Essential Extensions
Install extensions for StarterApp development:
Workspace Configuration
Create .vscode/settings.json in the project root:
{
// Editor
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never"
},
"editor.defaultFormatter": "biomejs.biome",
// TypeScript
"typescript.preferences.importModuleSpecifier": "non-relative",
"typescript.updateImportsOnFileMove.enabled": "always",
"typescript.preferences.preferTypeOnlyAutoImports": true,
// Files
"files.exclude": {
"**/.next": true,
"**/.turbo": true,
"**/node_modules": true,
"**/.git": true
},
// Biome (Ultracite)
"biome.lspBin": "node_modules/@biomejs/biome/bin/biome",
// Tailwind
"tailwindCSS.experimental.classRegex": [
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
]
}Keyboard Shortcuts
Essential shortcuts for development workflow:
Terminal Configuration
Configure the integrated terminal for development:
Development Workflow
Standard development session in VS Code:
Open project directory:
cd ~/projects/starterapp
code .Install dependencies if not already installed:
pnpm installStart development servers:
pnpm devAccess applications:
- Marketing:
http://localhost:3000 - Dashboard:
http://localhost:3001 - Docs:
http://localhost:3100
Workspace Features
Validation Workflow
Verify code meets quality standards:
# Type safety
pnpm typecheck
# Code quality
pnpm lint
# Test execution
pnpm test
# Build verification
pnpm build
# Run all checks
pnpm validateCommon Issues
Next Steps
After VS Code setup:
AI Agent Setup
Install Claude Code, GitHub Copilot, or Codex for AI-assisted development.
Environment Setup
Configure service credentials and environment variables for development.
AI Workflow Overview
Learn AI-assisted development patterns using templates and commands.