GitHub Codespaces is a cloud-based development environment service provided by GitHub. Built on the Visual Studio Code infrastructure, it allows developers to connect directly from a browser or local VS Code to a full development container running in the cloud. Each Codespace is essentially a virtual machine hosted on Microsoft Azure cloud infrastructure, pre-installed with a complete Linux operating system, commonly used development toolchains, and user-customized runtime environments. Developers don't need to install any SDKs, compilers, or databases on their local machines — just a browser is needed to start writing, building, testing, and debugging code.
The core concept of Codespaces is Environment as Code. Traditional development environment setup often takes hours or even days to install dependencies, configure paths, and debug version compatibility issues. Codespaces incorporates the entire development environment definition into version control through the devcontainer.json configuration file, enabling any team member to get a completely consistent development experience on any device. This not only dramatically reduces the onboarding cost for new members but also completely eliminates the classic "it works on my machine" problem.
| Advantage Dimension | Description |
|---|---|
| Zero-Config Startup | From opening a repository to entering an editable IDE interface, typically only 10-30 seconds |
| Environment Consistency | All team members share the same OS, runtime, toolchain, and extension configurations |
| Device Independence | Supports professional development on low-performance devices like Chromebooks, iPads, and Android tablets |
| Elastic Computing Power | Choose from 2-core / 4-core / 8-core / 16-core / 32-core CPUs, with memory from 8GB to 64GB |
| Security Isolation | Each Codespace runs in an isolated virtual machine, completely separated from others |
| Deep Git Integration | Automatically uses GitHub authentication, no need to configure SSH keys or personal access tokens |
GitHub Codespaces is billed by the core-hour unit, which is the number of CPU cores multiplied by usage hours.
| Plan | Monthly Free Allowance | 2-Core Machine Usable Hours | Overage Cost (per core-hour) |
|---|---|---|---|
| Free | 120 core-hours | ~60 hours | $0.18 |
| Pro | 180 core-hours | ~90 hours | $0.18 |
| Team | 180 core-hours/user | ~90 hours/user | $0.08 |
| Enterprise | Customizable | Customizable | Negotiable |
Billing Example:
Assuming you use a 4-core CPU machine configuration, working 4 hours per day:
- Daily consumption: 4 cores × 4 hours = 16 core-hours
- Monthly consumption (22 working days): 16 × 22 = 352 core-hours
- Free plan allowance: 120 core-hours
- Overage cost: (352 - 120) × $0.18 = $41.76
Important Note: Codespaces does not continue billing after it stops running, but storage costs still accumulate. Default storage costs are $0.07/GB/month, included in the free allowance. Each Codespace has 15GB of storage by default.
The simplest way to create is directly from the GitHub repository page:
- Open any GitHub repository page (e.g.,
https://github.com/microsoft/vscode) - Click the green Code button at the top of the page
- Switch to the Codespaces tab
- Click Create codespace on main (creates on the main branch by default)
GitHub will automatically select a suitable machine configuration for you (usually 2 cores), then start building the development container. The first creation may take 1-3 minutes to pull images and install dependencies, while subsequent startups will be much faster (usually 10-30 seconds) because the images are cached.
After creation, the browser will automatically redirect to a complete VS Code Web interface where you can run commands directly in the terminal, write code, and install extensions — almost identical to local VS Code.
When creating a Codespace, you can click the Machine type dropdown to select different machine specifications:
| Machine Type | CPU Cores | Memory | Storage | Use Case |
|---|---|---|---|---|
| 2-core | 2 vCPU | 8 GB | 32 GB | Light editing, documentation |
| 4-core | 4 vCPU | 16 GB | 32 GB | Small to medium project development |
| 8-core | 8 vCPU | 32 GB | 64 GB | Large projects, compilation and building |
| 16-core | 16 vCPU | 32 GB | 64 GB | High-performance computing, CI simulation |
| 32-core | 32 vCPU | 64 GB | 128 GB | Extra-large projects, performance testing |
If you prefer using the local VS Code desktop version, you can install the GitHub Codespaces extension:
- Open VS Code and go to the Extensions marketplace
- Search for and install the GitHub Codespaces extension (published by GitHub)
- After installation, press
Ctrl+Shift+P(orCmd+Shift+Pon macOS) to open the command palette - Type
Codespaces: Create New Codespace - Select the repository and branch
- Choose the machine configuration
- VS Code will automatically connect to the remote Codespace
The advantage of this approach is that you can use all features of the local VS Code, including custom themes, keybinding, and local extensions.
# Install GitHub CLI (if not installed)
# macOS
brew install gh
# Windows
winget install --id GitHub.cli
# Ubuntu/Debian
sudo apt install gh
# Login to GitHub
gh auth login
# Create Codespace (default configuration)
gh codespace create --repo owner/repo-name
# Specify branch and machine configuration
gh codespace create --repo owner/repo-name --branch dev --machine 4-core
# List all Codespaces
gh codespace list
# View details of a specific Codespace
gh codespace view --codespace codespace-nameEach Codespace has the following states:
- Running: Actively consuming core-hours, accessible via browser or VS Code
- Stopped: Not consuming core-hours, but storage is still billed
- Deleted: All data permanently removed, no longer billed
# Stop Codespace
gh codespace stop --codespace codespace-name
# Start a stopped Codespace
gh codespace start --codespace codespace-name
# Delete Codespace (irreversible)
gh codespace delete --codespace codespace-name
# Batch delete all stopped Codespaces
gh codespace list --json name,state | jq -r '.[] | select(.state=="Available") | .name' | xargs -I {} gh codespace delete -c {}Auto-Stop Policy: GitHub automatically stops a Codespace after 30 minutes of inactivity by default. You can modify this timeout in Settings → Codespaces, with selectable ranges from 5 minutes to 240 minutes. Setting an appropriate timeout can effectively avoid unnecessary costs from forgetting to close Codespaces.
devcontainer.json is the core configuration file of the Dev Container Specification. It defines the image to use when Codespace starts, the tools to install, the extensions to configure, the ports to forward, and various initialization scripts. This file is typically placed in the .devcontainer/ folder at the project root.
When you create a Codespace, GitHub first checks if a devcontainer.json file exists in the repository. If it exists, the development container is built according to its definition; if not, a default generic development container image is used.
Here is a devcontainer.json example containing all commonly used fields:
{
"name": "My Full-Stack Project Development Environment",
"image": "mcr.microsoft.com/devcontainers/javascript-node:20",
"forwardPorts": [3000, 5432, 8080],
"portsAttributes": {
"3000": {
"label": "Frontend Application",
"onAutoForward": "openBrowser",
"visibility": "public"
},
"5432": {
"label": "PostgreSQL Database",
"onAutoForward": "notify",
"visibility": "private"
},
"8080": {
"label": "Backend API",
"onAutoForward": "silent",
"visibility": "public"
}
},
"postCreateCommand": "npm install && npm run db:migrate",
"postStartCommand": "echo 'Environment Ready!'",
"postAttachCommand": "git pull",
"customizations": {
"vscode": {
"extensions": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"ms-vscode.vscode-typescript-next",
"bradlc.vscode-tailwindcss",
"prisma.prisma"
],
"settings": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2,
"terminal.integrated.defaultProfile.linux": "zsh"
}
}
},
"remoteUser": "vscode",
"containerUser": "vscode",
"mounts": [
"source=${localEnv:HOME}/.gitconfig,target=/home/vscode/.gitconfig,type=bind,readonly"
],
"containerEnv": {
"NODE_ENV": "development",
"DATABASE_URL": "postgresql://localhost:5432/mydb"
},
"features": {
"ghcr.io/devcontainers/features/docker-in-docker:2": {},
"ghcr.io/devcontainers/features/github-cli:1": {},
"ghcr.io/devcontainers/features/node:1": { "version": "20" }
},
"runArgs": ["--memory=4g", "--cpus=2"],
"hostRequirements": {
"cpus": 4,
"memory": "8gb",
"storage": "32gb"
}
}| Image Name | Use Case | Included Content |
|---|---|---|
mcr.microsoft.com/devcontainers/javascript-node:20 |
Node.js projects | Node.js 20, npm, yarn, Git |
mcr.microsoft.com/devcontainers/python:3.12 |
Python projects | Python 3.12, pip, Git |
mcr.microsoft.com/devcontainers/java:17 |
Java projects | JDK 17, Gradle, Maven, Git |
mcr.microsoft.com/devcontainers/go:1.22 |
Go projects | Go 1.22, Git |
mcr.microsoft.com/devcontainers/rust:1 |
Rust projects | Rust toolchain, Git |
mcr.microsoft.com/devcontainers/cpp:debian-12 |
C/C++ projects | GCC, CMake, Git |
mcr.microsoft.com/devcontainers/dotnet:8.0 |
.NET projects | .NET 8.0 SDK, Git |
mcr.microsoft.com/devcontainers/universal:2 |
General purpose | Multi-language support |
devcontainer.json contains four lifecycle hook commands that execute in the following order:
onCreateCommand: Runs only when the container is first created (installing global packages, system-level dependencies)postCreateCommand: Runs after container creation (installing project dependencies, database migrations)postStartCommand: Runs each time the container starts (pulling latest code, starting services)postAttachCommand: Runs each time VS Code connects to the container (displaying welcome messages)
{
"onCreateCommand": "npm install -g typescript nodemon",
"postCreateCommand": "npm install && cp .env.example .env",
"postStartCommand": "git fetch --all",
"postAttachCommand": "echo 'Hello! Welcome to the development environment!'"
}Features are pre-packaged development tool installation units that can be combined like building blocks:
{
"image": "mcr.microsoft.com/devcontainers/base:debian-12",
"features": {
"ghcr.io/devcontainers/features/node:1": {
"version": "20",
"nodeGypDependencies": true
},
"ghcr.io/devcontainers/features/python:1": {
"version": "3.12",
"installTools": true
},
"ghcr.io/devcontainers/features/docker-in-docker:2": {
"dockerDashComposeVersion": "v2"
},
"ghcr.io/devcontainers/features/github-cli:1": {
"version": "latest"
},
"ghcr.io/devcontainers/features/terraform:1": {},
"ghcr.io/devcontainers/features/kubernetes-helm:1": {}
}
}Common Features repository: https://github.com/devcontainers/features
When pre-built base images cannot meet your requirements, you need to write a custom Dockerfile. Common scenarios include:
- Needing to install specific versions of system-level dependencies (e.g., specific versions of OpenSSL, libcurl, etc.)
- Needing to configure special environment variables or system services
- Needing to install proprietary tools not available in Features
- Needing to deeply customize the system (e.g., modifying kernel parameters, installing drivers, etc.)
# .devcontainer/Dockerfile
FROM mcr.microsoft.com/devcontainers/javascript-node:20
# Install system dependencies
RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
&& apt-get -y install --no-install-recommends \
postgresql-client \
redis-tools \
imagemagick \
ffmpeg \
&& apt-get autoremove -y \
&& apt-get clean -y \
&& rm -rf /var/lib/apt/lists/*
# Install global npm packages
RUN npm install -g \
pnpm \
turbo \
prisma \
@nestjs/cli
# Install Rust toolchain (for certain Node.js native module compilation)
RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
# Configure zsh
RUN sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" \
&& git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions \
&& git clone https://github.com/zsh-users/zsh-syntax-highlighting ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
# Switch back to non-root user
USER vscode{
"name": "Custom Development Environment",
"build": {
"dockerfile": "Dockerfile",
"context": ".",
"args": {
"NODE_VERSION": "20"
}
},
"customizations": {
"vscode": {
"extensions": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode"
]
}
}
}For complex projects, you can use multi-stage builds to optimize image size:
# .devcontainer/Dockerfile
FROM mcr.microsoft.com/devcontainers/base:debian-12 AS base
# Stage 1: Install build tools
FROM base AS build-tools
RUN apt-get update && apt-get -y install build-essential cmake ninja-build
# Stage 2: Final image
FROM base
COPY --from=build-tools /usr/bin/cmake /usr/bin/cmake
COPY --from=build-tools /usr/bin/ninja /usr/bin/ninja
# Install project-specific dependencies
RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
&& apt-get -y install --no-install-recommends \
libssl-dev \
libsqlite3-dev \
libcurl4-openssl-dev \
&& apt-get autoremove -y \
&& apt-get clean -y \
&& rm -rf /var/lib/apt/lists/*For projects requiring multiple services (such as databases, caches, message queues), you can use Docker Compose:
# .devcontainer/docker-compose.yml
version: '3.8'
services:
app:
build:
context: .
dockerfile: Dockerfile
volumes:
- ..:/workspace:cached
command: sleep infinity
network_mode: service:db
db:
image: postgres:16
restart: unless-stopped
environment:
POSTGRES_USER: postgres
POSTGRES_PASSWORD: postgres
POSTGRES_DB: myapp
volumes:
- postgres-data:/var/lib/postgresql/data
ports:
- "5432:5432"
redis:
image: redis:7-alpine
restart: unless-stopped
ports:
- "6379:6379"
volumes:
postgres-data:The corresponding devcontainer.json:
{
"name": "Full-Stack Development Environment",
"dockerComposeFile": "docker-compose.yml",
"service": "app",
"workspaceFolder": "/workspace",
"forwardPorts": [3000, 5432, 6379],
"postCreateCommand": "npm install && npm run db:migrate",
"customizations": {
"vscode": {
"extensions": [
"ms-vscode.vscode-json",
"mtxr.sqltools",
"mtxr.sqltools-driver-pg"
]
}
}
}Codespaces' port forwarding feature allows you to access services running in remote containers. When an application inside the container listens on a certain port, Codespaces automatically maps that port to a URL accessible through the browser.
Port forwarding has three visibility levels:
| Visibility | Description | Access Method |
|---|---|---|
| private | Only the creator can access | Requires GitHub login |
| org | Members of the same organization can access | Requires GitHub login |
| public | Anyone can access | No login required |
When Codespaces detects that a service inside the container has started listening on a port, it automatically forwards that port. You may see a prompt like the following in the terminal:
Forwarding port 3000 to public URL https://your-codespace-name-3000.app.github.dev
{
"forwardPorts": [3000, 5432, 8080],
"portsAttributes": {
"3000": {
"label": "Frontend Development Server",
"onAutoForward": "openBrowser",
"visibility": "public"
},
"5432": {
"label": "PostgreSQL",
"onAutoForward": "notify",
"visibility": "private"
},
"8080": {
"label": "API Server",
"onAutoForward": "silent",
"visibility": "org"
}
},
"otherPortsAttributes": {
"onAutoForward": "silent",
"visibility": "private"
}
}Codespaces provides a built-in Web preview feature that allows you to view the running web application directly in a panel next to the IDE, without opening a new browser tab.
How to use:
- Right-click on a port → Preview in Editor
- Or use the command palette:
Ports: Preview in Editor - The preview panel will appear on the right side of the editor and can be resized
All port-forwarded URLs automatically support HTTPS, in the following format:
https://<codespace-name>-<port>.app.github.dev
This is very useful for development scenarios requiring HTTPS (such as Service Workers, Web Crypto API, OAuth callbacks, etc.), without needing additional SSL certificate configuration.
When you open a Codespace in a browser, you're using the VS Code Web version (based on vscode.dev architecture). It supports almost all features of the desktop VS Code, including:
- Full IntelliSense (code completion, type checking, go-to-definition)
- Integrated terminal (complete Linux shell environment)
- Debugger (supports remote debugging for Node.js, Python, Go, and other languages)
- Git integration (source control panel, commit, push, pull)
- Extension marketplace (most extensions are compatible with the web version)
After installing the GitHub Codespaces extension, you can connect to a remote Codespace from the desktop VS Code:
- Open VS Code
- Click the remote connection icon in the lower-left corner (or press
Ctrl+Shift+Pand typeCodespaces) - Select Codespaces: Connect to Codespace
- Select the Codespace to connect to from the list
The advantage of the desktop version is better performance, local filesystem access, and more extension support.
Codespaces automatically integrates with VS Code's Settings Sync feature. The themes, keybindings, code snippets, and extensions you configure in your local VS Code are automatically synced to the Codespace. This means you don't need to reconfigure personal preferences in each new Codespace.
To enable Settings Sync:
- Press
Ctrl+Shift+Pin VS Code - Type
Settings Sync: Turn On - Login to your GitHub account
- Select the settings items to sync
When using VS Code in a browser, certain shortcuts may be intercepted by the browser (e.g., Ctrl+W closes the tab). Codespaces provides keyboard shortcut mapping functionality:
- Press
Ctrl+Shift+Pto open the command palette - Type
Preferences: Open Keyboard Shortcuts (JSON) - Add custom mappings
Or enable the Codespaces: Keyboard Layout option directly in the Codespace settings.
In addition to VS Code, GitHub Codespaces also supports JetBrains IDEs, including IntelliJ IDEA, PyCharm, WebStorm, GoLand, PhpStorm, and others. This is implemented through JetBrains Gateway (gateway client).
- Download and install JetBrains Gateway
- Open JetBrains Gateway and select GitHub Codespaces as the connection type
- Login to your GitHub account
- Select the Codespace to connect to from the list
- Choose the JetBrains IDE to use (e.g., IntelliJ IDEA Ultimate)
- Gateway will automatically download and configure the remote IDE backend
- After the connection is established, you will see the familiar JetBrains IDE interface
- JetBrains IDE remote development requires larger machine configurations (recommended at least 4 cores and 16GB)
- On first connection, Gateway needs to install JetBrains Backend on the remote server, which may take several minutes
- Some plugins that require local filesystem access may not be compatible with remote development mode
- JetBrains' free Community Edition does not support remote development; a Professional license is required
# Create Codespace
gh codespace create --repo owner/repo --branch main --machine 4-core
# List all Codespaces
gh codespace list
gh codespace list --json name,state,machine,frozenAt
# Connect to Codespace (via SSH)
gh codespace ssh
# Connect to Codespace (via VS Code desktop)
gh codespace code
# View Codespace details
gh codespace view --codespace my-codespace
# Stop Codespace
gh codespace stop --codespace my-codespace
# Start Codespace
gh codespace start --codespace my-codespace
# Delete Codespace
gh codespace delete --codespace my-codespace
# Execute command in Codespace
gh codespace ssh --command "npm test"
# Forward port
gh codespace ports forward 3000:3000 --codespace my-codespace
# List port forwarding
gh codespace ports list --codespace my-codespace
# Edit Codespace machine configuration
gh codespace edit --codespace my-codespace --machine 8-core
# View Codespace logs
gh codespace logs --codespace my-codespace#!/bin/bash
# Stop all running Codespaces
echo "Stopping all running Codespaces..."
gh codespace list --json name,state -q '.[] | select(.state=="Available") | .name' | while read name; do
echo "Stopping: $name"
gh codespace stop --codespace "$name"
done
echo "Done!"
# Delete all Codespaces that have been stopped for more than 7 days
echo "Cleaning up long-unused Codespaces..."
gh codespace list --json name,frozenAt -q '.[] | select(.frozenAt != null) | .name' | while read name; do
echo "Deleting: $name"
gh codespace delete --codespace "$name" --force
done# Configure SSH alias
gh codespace ssh --config >> ~/.ssh/config
# Transfer files using scp
gh codespace scp -r ./local-dir :/workspaces/repo/remote-dir
# Sync files using rsync
gh codespace ssh -- rsync -avz /workspaces/repo/ ./backup/Secrets are used to store sensitive information such as API keys, database passwords, access tokens, and more. They are stored in encrypted form and do not appear in Codespace environment variable logs or get committed to Git repositories.
Via the web interface:
- Go to the repository or organization Settings → Codespaces
- In the Secrets section, click New repository secret or New organization secret
- Enter the Secret name and value
- Select which Codespaces can access the Secret (optional)
Via GitHub CLI:
# Add repository-level Secret
gh secret set API_KEY --body "your-secret-value" --repo owner/repo
# Add organization-level Secret
gh secret set ORG_API_KEY --body "your-secret-value" --org my-org
# Read Secret from file
gh secret set GOOGLE_CREDENTIALS --body "$(cat credentials.json)" --repo owner/repo
# List all Secrets
gh secret list --repo owner/repo
# Delete Secret
gh secret delete OLD_API_KEY --repo owner/repoSecrets are automatically injected as environment variables:
# Use in terminal
echo $API_KEY
# Use in Node.js
console.log(process.env.API_KEY);
# Use in Python
import os
api_key = os.environ.get('API_KEY')
# Reference in .env file (not recommended to write Secrets to files)
# It's recommended to use environment variables directly- Use meaningful names, like
STRIPE_SECRET_KEYinstead ofKEY1 - Use different Secrets for different environments (development, testing, production)
- Rotate Secrets regularly
- Use organization-level Secrets for cross-repository sharing
- Don't print Secrets in commands like
postCreateCommand
Organization administrators can configure Codespaces usage policies in organization settings:
- Go to the organization Settings → Codespaces
- Configure the following policies:
- Permission Policy: Who can create Codespaces
- Machine Type Restrictions: Maximum machine configuration allowed
- Region Restrictions: Allowed Azure regions
- Timeout Policy: Mandatory maximum idle timeout
- Retention Policy: Maximum retention days for Codespaces
Organizations can set spending limits for Codespaces:
- Go to the organization Settings → Billing and plans
- Set a monthly spending limit in the Codespaces section
- Configure behavior when the limit is reached (notification, block new Codespace creation)
By committing devcontainer.json in the repository, ensure all team members use the same development environment:
.github/
└── devcontainer/
├── devcontainer.json # Main configuration
├── Dockerfile # Custom image
├── docker-compose.yml # Multi-service configuration
├── setup.sh # Initialization script
└── README.md # Environment documentation
Prebuilds is a mechanism provided by GitHub to accelerate Codespace startup. It pre-builds and caches development container images. When a user creates a Codespace, it directly uses the cached image, reducing startup time from minutes to seconds.
- Go to the repository Settings → Codespaces → Prebuilds
- Click New prebuild configuration
- Configure the following options:
- Branch: Select the branch to prebuild (usually main)
- Region: Select the geographic region for prebuilds
- Machine Type: Select the machine configuration for prebuilds
- Trigger Events: Select when to trigger prebuilds (push, schedule, etc.)
{
"image": "mcr.microsoft.com/devcontainers/javascript-node:20",
"onCreateCommand": "npm install -g pnpm turbo",
"postCreateCommand": "pnpm install && pnpm build",
"customizations": {
"vscode": {
"extensions": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode"
]
}
}
}Prebuilds themselves do not incur additional charges, but they consume storage space (for caching images). It's recommended to configure Prebuilds only for frequently used branches to avoid unnecessary storage overhead.
Prebuilds actually use GitHub Actions to build container images. You need to ensure your repository has sufficient Actions minutes to support Prebuilds. If your repository is public, Actions minutes are unlimited; for private repositories, you need to obtain the appropriate minutes based on your plan.
Choose the right machine configuration:
- Use 2 cores for daily coding
- Temporarily upgrade to 4 or 8 cores when compilation and building is needed
- Downgrade back to 2 cores after completion
Set appropriate timeout values:
{
"settings": {
"codespaces.prebuildRetentionPeriodDays": 7,
"codespaces.idleTimeout": 30,
"codespaces.defaultIdleTimeout": 60
}
}Use scheduled stopping:
# Set auto-stop after 2 hours
gh codespace edit --codespace my-codespace --idle-timeout 120- Go to Settings → Billing and plans → Codespaces
- View the current month's core-hours used
- Set spending limit alerts
# View current billing cycle usage
gh api /user/settings/billing/codespacesCodespaces automatically stops (freezes) after idle timeout. A stopped Codespace:
- Does not consume core-hours (computation costs)
- Still consumes storage space ($0.07/GB/month)
- Retained for up to 30 days (Free plan) or 90 days (paid plans)
- Use Prebuilds: Reduce build time during each creation, indirectly saving core-hours
- Create on demand: Don't long-term retain unused Codespaces
- Batch operations: Use CLI scripts to batch stop or delete Codespaces
- Use branches wisely: Create different Codespaces for different development tasks, delete them promptly after completion
- Take advantage of free allowance: Plan usage time wisely to fully utilize the monthly free core-hours
GitHub Copilot is available by default in Codespaces (requires a Copilot subscription). Enabling steps:
- Ensure your GitHub account has a Copilot subscription (Individual $10/month, Business $19/user/month)
- After creating a Codespace, the Copilot extension is automatically installed and activated
- Start writing code in the editor, and Copilot will automatically provide suggestions
Copilot Chat is an AI conversation feature that can be used directly in Codespaces:
- Press
Ctrl+Shift+Ito open the Copilot Chat panel - Enter your question or request
- Copilot will provide answers based on your code context
Common commands:
/explain- Explain selected code/fix- Fix issues in code/test- Generate tests for code/doc- Generate documentation for code
Unique advantages of using Copilot in Codespaces:
- Enhanced Context Awareness: Copilot can access the entire project code, not just the currently open file
- Terminal Integration: Use Copilot in the terminal to generate shell commands
- PR Description Generation: Combined with GitHub CLI, Copilot can automatically generate PR descriptions and commit messages
Because Codespaces servers are located overseas (mainly US and European Azure data centers), Chinese developers may encounter the following issues:
- Slow image pulling when creating Codespaces
- High latency in terminal operations
- Slow file synchronization speed
- Slow loading of port-forwarded Web previews
Use a proxy:
Configure proxy in devcontainer.json:
{
"containerEnv": {
"HTTP_PROXY": "http://your-proxy:port",
"HTTPS_PROXY": "http://your-proxy:port",
"NO_PROXY": "localhost,127.0.0.1"
}
}Use domestic mirror sources:
{
"postCreateCommand": "npm config set registry https://registry.npmmirror.com && pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple"
}Use domestic mirrors in Dockerfile:
FROM mcr.microsoft.com/devcontainers/javascript-node:20
# Use Tsinghua npm mirror
RUN npm config set registry https://registry.npmmirror.com
# Use Alibaba Cloud Maven mirror (Java projects)
RUN mkdir -p ~/.m2 && echo '<settings><mirrors><mirror><id>aliyun</id><url>https://maven.aliyun.com/repository/public</url><mirrorOf>central</mirrorOf></mirror></mirrors></settings>' > ~/.m2/settings.xmlWhen creating a Codespace, you can select the closest region:
- East US: Default region, relatively good for China
- West Europe: Slightly higher latency, but sometimes more stable
- Southeast Asia: Closest physical distance, but not always available
For poor network conditions, it's recommended to:
- Use Codespaces for environment setup and dependency installation
- Use VS Code desktop's Remote - SSH feature to connect to the Codespace
- Use Settings Sync to keep local and remote environments consistent
- For large file operations, use GitHub CLI's
codespace scpcommand
Project Structure:
my-fullstack-app/
├── .devcontainer/
│ ├── devcontainer.json
│ ├── docker-compose.yml
│ └── Dockerfile
├── frontend/
│ ├── package.json
│ └── src/
├── backend/
│ ├── package.json
│ └── src/
└── docker-compose.yml
devcontainer.json Configuration:
{
"name": "Full-Stack Development Environment",
"dockerComposeFile": "docker-compose.yml",
"service": "app",
"workspaceFolder": "/workspace",
"forwardPorts": [3000, 5432, 8080],
"portsAttributes": {
"3000": { "label": "Frontend" },
"8080": { "label": "Backend API" }
},
"postCreateCommand": "cd frontend && npm install && cd ../backend && npm install",
"customizations": {
"vscode": {
"extensions": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"ms-vscode.vscode-typescript-next"
]
}
}
}devcontainer.json Configuration:
{
"name": "Data Science Environment",
"image": "mcr.microsoft.com/devcontainers/python:3.12",
"features": {
"ghcr.io/devcontainers/features/github-cli:1": {},
"ghcr.io/devcontainers/features/node:1": {}
},
"postCreateCommand": "pip install -r requirements.txt && jupyter notebook --generate-config",
"forwardPorts": [8888],
"portsAttributes": {
"8888": { "label": "Jupyter Notebook" }
},
"customizations": {
"vscode": {
"extensions": [
"ms-python.python",
"ms-toolsai.jupyter",
"ms-python.vscode-pylance"
],
"settings": {
"python.defaultInterpreterPath": "/usr/local/bin/python"
}
}
}
}When contributing code to open source projects, Codespaces is the most convenient way:
# 1. Create Codespace after forking repository
gh codespace create --repo your-fork/repo-name
# 2. Create feature branch in Codespace
gh codespace ssh --command "git checkout -b feature/my-feature"
# 3. Develop and test
gh codespace ssh --command "npm test"
# 4. Commit and push
gh codespace ssh --command "git add . && git commit -m 'feat: add new feature' && git push origin feature/my-feature"
# 5. Create Pull Request
gh codespace ssh --command "gh pr create --title 'feat: add new feature' --body 'Description of changes'"Codespaces is excellent for programming education and training:
{
"name": "Programming Introductory Course",
"image": "mcr.microsoft.com/devcontainers/universal:2",
"postCreateCommand": "echo 'Welcome to the programming course!' && python --version && node --version",
"customizations": {
"vscode": {
"extensions": [
"ms-python.python",
"dbaeumer.vscode-eslint",
"formulahendry.code-runner"
],
"settings": {
"terminal.integrated.defaultProfile.linux": "bash"
}
}
}
}Teachers can place course materials and exercise code in a repository, and students only need to click one button to get a complete learning environment, without spending time configuring local development environments.
Configuring GPG signing in Codespaces ensures your commits are authenticated. First, generate or import a GPG key in the Codespace:
# Check if GPG key already exists
gpg --list-secret-keys --keyid-format=long
# If no key exists, generate a new one
gpg --full-generate-key
# Get key ID
gpg --list-secret-keys --keyid-format=long
# Output example: sec rsa4096/ABC123DEF456 2024-01-01 [SC]
# Configure Git to use this key
git config --global user.signingkey ABC123DEF456
git config --global commit.gpgsign true
# Export public key to add to GitHub account settings
gpg --armor --export ABC123DEF456Add the exported public key to GitHub's Settings → SSH and GPG keys → New GPG key, and all subsequent commits in the Codespace will be automatically signed.
Work on multiple related repositories simultaneously in a single Codespace:
{
"name": "Multi-Repository Workspace",
"image": "mcr.microsoft.com/devcontainers/base:debian-12",
"postCreateCommand": "git clone https://github.com/company/shared-lib.git /workspaces/shared-lib && git clone https://github.com/company/utils.git /workspaces/utils",
"customizations": {
"vscode": {
"folders": [
{ "path": "/workspaces/main-project" },
{ "path": "/workspaces/shared-lib" },
{ "path": "/workspaces/utils" }
]
}
}
}Connect to remote databases or use local databases in a Codespace:
{
"features": {
"ghcr.io/devcontainers/features/postgres:1": {
"version": "16"
}
},
"postCreateCommand": "sudo service postgresql start && psql -c \"CREATE USER devuser WITH PASSWORD 'devpass';\" && psql -c \"CREATE DATABASE myapp OWNER devuser;\"",
"customizations": {
"vscode": {
"extensions": [
"mtxr.sqltools",
"mtxr.sqltools-driver-pg",
"cweijan.vscode-postgresql-client2"
]
}
}
}Codespaces are excellent for code review, allowing you to test others' code changes in an isolated environment:
- Open the PR page
- Click the "Open in Codespace" button (if Prebuild is configured, it will start quickly)
- Run tests, build the project, and verify functionality in the Codespace
- After completing the review, submit review comments directly in the Codespace
Best practices for managing environment variables in a Codespace:
# Create .env file in Codespace (don't commit to repository)
cp .env.example .env
# Edit environment variables
vim .env
# Ensure .env is in .gitignore
echo ".env" >> .gitignoreFor sensitive information, it's strongly recommended to use Codespaces Secrets instead of .env files:
# Set Secrets via CLI
gh secret set DATABASE_URL --body "postgresql://user:pass@host:5432/db" --repo owner/repo
# Use in Codespace
echo $DATABASE_URLMonitor Codespace resource usage:
# View CPU and memory usage
htop
# View disk usage
df -h
# View network connections
ss -tuln
# View processes
ps aux
# Clean up unnecessary files to free space
sudo apt-get clean
rm -rf ~/.cache/pip
rm -rf ~/.npm/_cacache
docker system prune -f # If using DockerWhile Codespaces relies on network connectivity, you can take measures to handle network instability:
# Pre-cache dependencies
npm install # node_modules will be cached after installation
pip install -r requirements.txt # pip packages will be cached
# Use Git's offline mode
git config --global transfer.fsckObjects true
git config --global fetch.prune true
# Regularly commit local changes
git add . && git commit -m "WIP: local changes"Configure personalized shell environments to improve development efficiency:
{
"postCreateCommand": "sh -c \"$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)\" && git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions && git clone https://github.com/zsh-users/zsh-syntax-highlighting ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting",
"customizations": {
"vscode": {
"settings": {
"terminal.integrated.defaultProfile.linux": "zsh",
"terminal.integrated.profiles.linux": {
"zsh": {
"path": "/bin/zsh"
}
}
}
}
}
}Use Copilot directly in the Codespace terminal to generate commands:
# Press Ctrl+I in the terminal to invoke Copilot
# Enter a natural language description, and Copilot will generate the corresponding command
# Example:
# "List all files larger than 100MB"
# Copilot generates: find . -type f -size +100M -exec ls -lh {} \;Although Codespace automatically saves state, manually creating snapshots is a better practice:
# Create Git stash to save current work state
git stash save "WIP: feature-x implementation"
# View all stashes
git stash list
# Restore stash
git stash pop
# Create backup branch
git checkout -b backup/2024-01-15
git push origin backup/2024-01-15
git checkout mainGitHub Codespaces is a complete cloud development environment providing virtual machine-level isolation and a full Linux environment. GitHub Dev Environment (accessed via github.dev) is a lightweight browser-based code editor that runs VS Code directly in the browser without a backend virtual machine, suitable for quick browsing and light editing.
Codespace data is stored on Microsoft Azure cloud infrastructure using encrypted storage. Each Codespace runs in an isolated virtual machine, completely separated from other users' Codespaces. However, it's recommended not to store highly sensitive data in Codespaces and to use Secrets for managing sensitive information.
When multiple collaborators modify the same Codespace simultaneously, Git conflicts may occur. The solution is:
# View conflicting files
git status
# Commit after resolving conflicts
git add .
git commit -m "resolve: merge conflict"Currently, GitHub Codespaces does not support GPU acceleration. If you need GPU computing (such as machine learning training), it's recommended to use Google Colab, AWS SageMaker, or other cloud services that support GPUs.
{
"postCreateCommand": "echo '//npm.pkg.github.com/:_authToken=${NPM_TOKEN}' > ~/.npmrc",
"containerEnv": {
"NPM_TOKEN": "${localEnv:NPM_TOKEN}"
}
}Or use Codespaces Secrets to store NPM_TOKEN.
# View disk usage details
du -sh /* | sort -rh | head -20
# Clean apt cache
sudo apt-get clean
sudo apt-get autoremove
# Clean npm cache
npm cache clean --force
# Clean pip cache
pip cache purge
# Clean Docker (if used)
docker system prune -a -f
# Delete old log files
sudo journalctl --vacuum-time=7dUse postStartCommand in devcontainer.json:
{
"postStartCommand": "npm run dev &",
"forwardPorts": [3000],
"portsAttributes": {
"3000": {
"label": "Development Server",
"onAutoForward": "openBrowser"
}
}
}{
"postCreateCommand": "sudo cp /path/to/custom-ca.crt /usr/local/share/ca-certificates/ && sudo update-ca-certificates",
"containerEnv": {
"NODE_EXTRA_CA_CERTS": "/usr/local/share/ca-certificates/custom-ca.crt"
}
}Codespaces are retained for a certain time after being stopped. The free plan retains them for 30 days, and paid plans for 90 days. After the retention period, the Codespace is automatically deleted. Running Codespaces have no time limit, but continue to incur costs.
Codespaces supports Docker, but you need to enable the Docker-in-Docker feature in devcontainer.json:
{
"features": {
"ghcr.io/devcontainers/features/docker-in-docker:2": {}
}
}Once enabled, you can run docker build, docker run, and other commands in the Codespace, just like in a local environment.
You can use GitHub CLI's scp command:
# Upload a single file
gh codespace scp ./local-file.txt :/workspaces/repo/remote-file.txt
# Upload an entire directory
gh codespace scp -r ./local-dir :/workspaces/repo/remote-dir
# Download file to local
gh codespace scp :/workspaces/repo/remote-file.txt ./local-file.txtUse postStartCommand to automatically run background services when the Codespace starts:
{
"postStartCommand": "npm run dev &",
"forwardPorts": [3000]
}Or use the nohup command:
nohup npm run dev > /tmp/dev-server.log 2>&1 &Currently, Codespaces only supports Linux operating systems (based on Ubuntu or Debian). Windows and macOS are not supported. However, you can use Wine in a Codespace to run some Windows programs.
Codespaces supports multiple databases, which can be installed via Features or Docker Compose:
{
"features": {
"ghcr.io/devcontainers/features/postgres:1": {},
"ghcr.io/devcontainers/features/redis:1": {},
"ghcr.io/devcontainers/features/mongodb:1": {}
}
}You can create shared Codespace configurations through organization settings. Commit devcontainer.json files in the repository to ensure all team members use the same development environment. You can also share sensitive configurations through Codespace Secrets.
Yes, Codespaces fully supports Git LFS (Large File Storage). If your project uses Git LFS, the Codespace will automatically download LFS files. For large files, it's recommended to configure shallow cloning in devcontainer.json to speed up startup.
VS Code supports remote debugging. You can configure launch.json in the Codespace, then map the debugging port to local through port forwarding. For Node.js applications, you can directly use VS Code's built-in debugger to connect to the running process.
No. The Codespace's egress IP may change. If your service requires IP whitelisting, it's recommended to use a fixed proxy service or VPN solution.
You can configure Docker registry authentication in devcontainer.json. First, store Docker credentials as a Codespace Secret, then authenticate during container startup. You can also use cloud services like Azure Container Registry to host private images.
Yes, Codespaces fully supports WebSocket connections. The port forwarding service automatically handles WebSocket upgrade requests. This is important for real-time applications (such as chat applications, online games, real-time data push, etc.).
GitHub Copilot is available by default in Codespaces without additional configuration. Just ensure your GitHub account has a Copilot plan subscription. When writing code in the editor, Copilot will automatically provide suggestions. You can also use Copilot Chat for conversational programming.
It's recommended to regularly push important data to remote repositories. For stateful services like databases, you can configure periodic backup scripts. Data is retained after Codespace is stopped but cannot be recovered after deletion, so important data should always have remote backups.
GitHub Codespaces is rapidly evolving, and future updates may include:
- GPU Support: Providing GPU acceleration for machine learning and data science projects
- More Operating Systems: Supporting Windows and macOS development environments
- Better Offline Support: Reducing dependency on network connectivity
- More Granular Permission Control: Allowing finer access control
- More IDE Integration: Supporting editors like Vim and Neovim
- Lower Latency: Deploying data centers in more regions worldwide to reduce latency
- Better Collaboration Features: Real-time multi-user editing and debugging
- Smarter Resource Management: Automatically adjusting resource configurations based on usage patterns
As a developer, staying aware of these development trends can help you better plan your development environment strategy and fully leverage the advantages of cloud-based development.
| Command | Description |
|---|---|
gh codespace create |
Create a new Codespace |
gh codespace list |
List all Codespaces |
gh codespace delete |
Delete a specified Codespace |
gh codespace start |
Start a stopped Codespace |
gh codespace stop |
Stop a running Codespace |
gh codespace ssh |
Connect to Codespace via SSH |
gh codespace code |
Open Codespace in VS Code desktop |
gh codespace ports forward |
Forward ports |
gh codespace ports list |
List port forwarding |
gh codespace edit |
Modify Codespace configuration |
gh codespace logs |
View Codespace logs |
gh codespace scp |
Transfer files between local and Codespace |
| Configuration Item | Description | Example |
|---|---|---|
name |
Container name | "My Development Environment" |
image |
Base image | "mcr.microsoft.com/devcontainers/javascript-node:20" |
build.dockerfile |
Custom Dockerfile | "Dockerfile" |
forwardPorts |
Ports to forward | [3000, 8080] |
postCreateCommand |
Command to run after creation | "npm install" |
postStartCommand |
Command to run after startup | "npm run dev &" |
customizations.vscode.extensions |
VS Code extensions | ["dbaeumer.vscode-eslint"] |
customizations.vscode.settings |
VS Code settings | {"editor.formatOnSave": true} |
features |
Dev container features | {"ghcr.io/devcontainers/features/node:1": {}} |
containerEnv |
Environment variables | {"NODE_ENV": "development"} |
remoteUser |
Remote user | "vscode" |
hostRequirements |
Host requirements | {"cpus": 4, "memory": "8gb"} |
| Feature | Description |
|---|---|
ghcr.io/devcontainers/features/node:1 |
Node.js runtime |
ghcr.io/devcontainers/features/python:1 |
Python runtime |
ghcr.io/devcontainers/features/go:1 |
Go runtime |
ghcr.io/devcontainers/features/rust:1 |
Rust toolchain |
ghcr.io/devcontainers/features/java:1 |
Java runtime |
ghcr.io/devcontainers/features/docker-in-docker:2 |
Docker support |
ghcr.io/devcontainers/features/github-cli:1 |
GitHub CLI |
ghcr.io/devcontainers/features/terraform:1 |
Terraform |
ghcr.io/devcontainers/features/kubernetes-helm:1 |
Kubernetes and Helm |
ghcr.io/devcontainers/features/git:1 |
Git configuration |
| Problem | Solution |
|---|---|
| Slow Codespace startup | Use Prebuilds or select a closer region |
| Port not accessible | Check port visibility settings |
| Extension incompatible | Check if the extension supports web VS Code |
| Insufficient disk space | Clean cache and temporary files |
| Network connection issues | Check proxy configuration or use domestic mirrors |
| Submodule not initialized | Run git submodule update --init |
| Environment variable not effective | Restart Codespace or reload terminal |
| Dependency installation failed | Check network connection or use mirror sources |
| Terminal not accepting input | Refresh page or reconnect |
| Code completion not working | Check if language server is running |
| Git operation failed | Check GitHub authentication status |
| Build timeout | Upgrade machine configuration or optimize build scripts |
| Insufficient memory | Upgrade to a machine with more memory |
| Cannot push to remote | Check permissions and authentication configuration |
| Port conflict | Modify application listening port or stop conflicting services |
Here are some devcontainer.json templates for common project types:
React + Node.js Full-Stack Project:
{
"name": "React Full-Stack Project",
"image": "mcr.microsoft.com/devcontainers/javascript-node:20",
"forwardPorts": [3000, 5173],
"postCreateCommand": "npm install",
"customizations": {
"vscode": {
"extensions": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"bradlc.vscode-tailwindcss"
]
}
}
}Python Django Project:
{
"name": "Django Project",
"image": "mcr.microsoft.com/devcontainers/python:3.12",
"forwardPorts": [8000],
"postCreateCommand": "pip install -r requirements.txt && python manage.py migrate",
"customizations": {
"vscode": {
"extensions": [
"ms-python.python",
"ms-python.vscode-pylance"
]
}
}
}Go Microservice Project:
{
"name": "Go Microservice",
"image": "mcr.microsoft.com/devcontainers/go:1.22",
"forwardPorts": [8080],
"postCreateCommand": "go mod download",
"customizations": {
"vscode": {
"extensions": [
"golang.go"
]
}
}
}Rust Systems Programming Project:
{
"name": "Rust Project",
"image": "mcr.microsoft.com/devcontainers/rust:1",
"forwardPorts": [8000],
"postCreateCommand": "cargo build",
"customizations": {
"vscode": {
"extensions": [
"rust-lang.rust-analyzer"
]
}
}
}GitHub Codespaces is a powerful cloud development tool that completely solves pain points of environment configuration by codifying development environments, dramatically improving team collaboration efficiency. For Chinese developers, while there are certain network latency issues, reasonable configuration and optimization strategies allow you to fully leverage its advantages.
Key takeaways:
- Environment as Code: Use
devcontainer.jsonto define reproducible development environments, ensuring team consistency - Flexible Configuration: Choose appropriate machine configurations, tools, and extensions based on project requirements
- Cost Control: Set appropriate timeouts, promptly delete unused Codespaces, and fully utilize free allowances
- Team Collaboration: Implement secure team development through organization settings and Secrets management
- Performance Optimization: Use Prebuilds to speed up startup, use domestic mirror sources to optimize download speeds
- Security Practices: Use GPG signing, Secrets to manage sensitive information, and be mindful of data security
- Advanced Techniques: Multi-repository workspaces, database management, Copilot integration, and more to improve development efficiency
Whether you're an individual developer or collaborating in a team, Codespaces provides a consistent, efficient, and secure development environment. Combined with GitHub Copilot's AI-assisted programming capabilities, Codespaces is redefining the way modern software development works.
For beginners, it's recommended to start with the following steps:
- Choose a simple open source repository and create your first Codespace
- Familiarize yourself with the basic operations of VS Code Web and terminal usage
- Try modifying
devcontainer.jsonto customize the development environment - Use GitHub CLI to manage your Codespace
- Create
devcontainer.jsonconfiguration for your own projects - Explore advanced features like Prebuilds, Secrets, and more
Through continuous practice and exploration, you'll be able to fully leverage Codespaces' powerful features, improve development efficiency, and enjoy the convenience of cloud-based development.
Previous: GitHub Packages Introduction | Next: GitHub Mobile Introduction