Skip to content

Commit 822464e

Browse files
chore(dev): add VS Code dev container configuration (#209)
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude <noreply@anthropic.com>
1 parent 67ab683 commit 822464e

3 files changed

Lines changed: 163 additions & 0 deletions

File tree

.devcontainer/README.md

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
# Dev Container Setup
2+
3+
This directory contains the VS Code dev container configuration for OpenSpec development.
4+
5+
## What's Included
6+
7+
- **Node.js 20 LTS** (>=20.19.0) - TypeScript/JavaScript runtime
8+
- **pnpm** - Fast, disk space efficient package manager
9+
- **Git + GitHub CLI** - Version control tools
10+
- **VS Code Extensions**:
11+
- ESLint & Prettier for code quality
12+
- Vitest Explorer for running tests
13+
- GitLens for enhanced git integration
14+
- Error Lens for inline error highlighting
15+
- Code Spell Checker
16+
- Path IntelliSense
17+
18+
## How to Use
19+
20+
### First Time Setup
21+
22+
1. **Install Prerequisites** (on your local machine):
23+
- [VS Code](https://code.visualstudio.com/)
24+
- [Docker Desktop](https://www.docker.com/products/docker-desktop)
25+
- [Dev Containers extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
26+
27+
2. **Open in Container**:
28+
- Open this project in VS Code
29+
- You'll see a notification: "Folder contains a Dev Container configuration file"
30+
- Click "Reopen in Container"
31+
32+
OR
33+
34+
- Open Command Palette (`Cmd/Ctrl+Shift+P`)
35+
- Type "Dev Containers: Reopen in Container"
36+
- Press Enter
37+
38+
3. **Wait for Setup**:
39+
- The container will build (first time takes a few minutes)
40+
- `pnpm install` runs automatically via `postCreateCommand`
41+
- All extensions install automatically
42+
43+
### Daily Development
44+
45+
Once set up, the container preserves your development environment:
46+
47+
```bash
48+
# Run development build
49+
pnpm run dev
50+
51+
# Run CLI in development
52+
pnpm run dev:cli
53+
54+
# Run tests
55+
pnpm test
56+
57+
# Run tests in watch mode
58+
pnpm test:watch
59+
60+
# Build the project
61+
pnpm run build
62+
```
63+
64+
### SSH Keys
65+
66+
Your SSH keys are mounted read-only from `~/.ssh`, so git operations work seamlessly with GitHub/GitLab.
67+
68+
### Rebuilding the Container
69+
70+
If you modify `.devcontainer/devcontainer.json`:
71+
- Command Palette → "Dev Containers: Rebuild Container"
72+
73+
## Benefits
74+
75+
- No need to install Node.js or pnpm on your local machine
76+
- Consistent development environment across team members
77+
- Isolated from other Node.js projects on your machine
78+
- All dependencies and tools containerized
79+
- Easy onboarding for new developers
80+
81+
## Troubleshooting
82+
83+
**Container won't build:**
84+
- Ensure Docker Desktop is running
85+
- Check Docker has enough memory allocated (recommend 4GB+)
86+
87+
**Extensions not appearing:**
88+
- Rebuild the container: "Dev Containers: Rebuild Container"
89+
90+
**Permission issues:**
91+
- The container runs as the `node` user (non-root)
92+
- Files created in the container are owned by this user

.devcontainer/devcontainer.json

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
{
2+
"name": "OpenSpec Development",
3+
"image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bookworm",
4+
5+
// Additional tools and features
6+
"features": {
7+
"ghcr.io/devcontainers/features/git:1": {
8+
"version": "latest",
9+
"ppa": true
10+
},
11+
"ghcr.io/devcontainers/features/github-cli:1": {
12+
"version": "latest"
13+
}
14+
},
15+
16+
// Configure tool-specific properties
17+
"customizations": {
18+
"vscode": {
19+
// Set default container specific settings
20+
"settings": {
21+
"typescript.tsdk": "node_modules/typescript/lib",
22+
"typescript.enablePromptUseWorkspaceTsdk": true,
23+
"editor.formatOnSave": true,
24+
"editor.defaultFormatter": "esbenp.prettier-vscode",
25+
"editor.codeActionsOnSave": {
26+
"source.fixAll": "explicit"
27+
},
28+
"files.eol": "\n",
29+
"terminal.integrated.defaultProfile.linux": "bash"
30+
},
31+
32+
// Add extensions you want installed when the container is created
33+
"extensions": [
34+
// TypeScript/JavaScript essentials
35+
"dbaeumer.vscode-eslint",
36+
"esbenp.prettier-vscode",
37+
38+
// Testing
39+
"vitest.explorer",
40+
41+
// Git
42+
"eamodio.gitlens",
43+
44+
// Utilities
45+
"streetsidesoftware.code-spell-checker",
46+
"usernamehw.errorlens",
47+
"christian-kohler.path-intellisense"
48+
]
49+
}
50+
},
51+
52+
// Use 'forwardPorts' to make a list of ports inside the container available locally
53+
// "forwardPorts": [],
54+
55+
// Use 'postCreateCommand' to run commands after the container is created
56+
"postCreateCommand": "corepack enable && corepack prepare pnpm@latest --activate && pnpm install",
57+
58+
// Configure mounts to preserve SSH keys for git operations
59+
"mounts": [
60+
"source=${localEnv:HOME}${localEnv:USERPROFILE}/.ssh,target=/home/node/.ssh,readonly,type=bind,consistency=cached"
61+
],
62+
63+
// Set the default user to 'node' (non-root user)
64+
"remoteUser": "node",
65+
66+
// Ensure git is properly configured
67+
"initializeCommand": "echo 'Initializing dev container...'"
68+
}

.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,3 +147,6 @@ docs/
147147
.claude/
148148
CLAUDE.md
149149
.DS_Store
150+
151+
# Pnpm
152+
.pnpm-store/

0 commit comments

Comments
 (0)