Set up DevContainer environment for consistent development experience

[JensAstrup]

User Story

As a developer working on the Shortcut Assistant Chrome extension
I want a consistent, containerized development environment with automated rebuild capabilities
So that I can develop efficiently without environment setup issues and have a streamlined workflow for Chrome extension development with React

Background

The Shortcut Assistant is a Chrome extension that's migrating to use React. To ensure consistent development experience across different machines and environments, we need a DevContainer setup that provides:

• Consistent Node.js version (22)
• Automated dependency management
• Auto-rebuild functionality for efficient development
• Proper tooling and VS Code integration

Acceptance Criteria

✅ DevContainer Configuration

• Create .devcontainer/devcontainer.json with Node.js 22 environment
• Configure automatic yarn install on container creation
• Include essential VS Code extensions for TypeScript, React, ESLint, and Tailwind development
• Set up port forwarding for development servers (3000, 9229)
• Configure zsh with Oh My Zsh for enhanced terminal experience

✅ VS Code Integration

• Create .vscode/tasks.json with pre-configured tasks for:
  • Development build with auto-rebuild (yarn dev)
  • React-enabled development build (yarn dev:react)
  • Production builds (both standard and React-enabled)
  • Testing (with and without coverage)
  • Linting and auto-fixing
• Create .vscode/launch.json with debug configurations for:
  • Running and debugging Jest tests
  • Debugging individual test files
  • Debugging build scripts

✅ Auto-Rebuild Functionality

• Webpack watch mode enabled for automatic rebuilds on file changes
• Support for both standard and React-enabled development modes
• Proper problem matcher configuration for webpack output in VS Code
• Background task configuration to prevent blocking the terminal

✅ Chrome Extension Workflow

• Build output properly configured for drag-and-drop loading in Chrome
• build folder properly mounted and accessible
• Development workflow maintains compatibility with existing Chrome extension loading process

✅ Documentation

• Create comprehensive .devcontainer/README.md with:
  • Setup instructions
  • Development workflow documentation
  • Troubleshooting guide
  • Available VS Code tasks and debug configurations
  • Tips for Chrome extension development

✅ Environment Consistency

• Node.js 22 environment
• Yarn package manager configured
• All project dependencies properly installed and working
• TypeScript compilation working correctly
• React development workflow functional

Definition of Done

• DevContainer starts successfully and installs dependencies automatically
• Developer can run yarn dev or yarn dev:react with auto-rebuild functionality
• Build output can be loaded as unpacked extension in Chrome
• All VS Code tasks and debug configurations work correctly
• Documentation is clear and complete
• No breaking changes to existing development workflow

Technical Notes

• Uses official Microsoft DevContainer Node.js 22 image
• Webpack watch mode provides the "HMR-like" experience for Chrome extensions
• Manual extension reload in Chrome still required (limitation of Chrome extension security model)
• Port 3000 reserved for potential future dev server functionality