Dev Container — TypeScript

Name: typescript
Rating: 92
Author: Tyler-R-Kendrick

Overview

Configure a dev container for TypeScript and Node.js development using the official Node feature or base image. Supports version selection, package manager configuration (npm, pnpm, yarn), and frontend tooling.

Node Feature

jsonc

{
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "22"
    }
  }
}

Feature Options

Option	Default	Description
`version`	`lts`	Node.js version (`22`, `20`, `lts`, `latest`, `none`)
`nodeGypDependencies`	`true`	Install native build dependencies for node-gyp
`pnpmVersion`	`none`	Install pnpm (`latest`, `9`, specific version, `none`)
`nvmVersion`	`latest`	nvm version

Full Example

jsonc

{
  "name": "TypeScript Development",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:22",
  "forwardPorts": [3000, 5173],
  "portsAttributes": {
    "3000": { "label": "API", "onAutoForward": "notify" },
    "5173": { "label": "Vite Dev Server", "onAutoForward": "openBrowser" }
  },
  "postCreateCommand": "npm ci",
  "postStartCommand": "npm run dev",
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "bradlc.vscode-tailwindcss"
      ],
      "settings": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true,
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": "explicit"
        },
        "typescript.tsdk": "node_modules/typescript/lib"
      }
    }
  }
}

Using the Base Image vs Feature

Approach	When to Use
`"image": "mcr.microsoft.com/devcontainers/javascript-node:22"`	Node/TS-only projects
`"image": "mcr.microsoft.com/devcontainers/typescript-node:22"`	TypeScript-specific image
Base image + `ghcr.io/devcontainers/features/node:1`	Multi-language projects

Package Managers

pnpm

jsonc

{
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "22",
      "pnpmVersion": "latest"
    }
  },
  "postCreateCommand": "pnpm install --frozen-lockfile"
}

Yarn

jsonc

{
  "postCreateCommand": "corepack enable && yarn install --immutable"
}

Monorepo Setup (Turborepo / Nx)

jsonc

{
  "name": "Monorepo",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:22",
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "pnpmVersion": "latest"
    }
  },
  "postCreateCommand": "pnpm install --frozen-lockfile",
  "postStartCommand": "pnpm dev",
  "forwardPorts": [3000, 3001, 5173]
}

Frontend Framework Ports

Framework	Default Port
Vite	5173
Next.js	3000
Angular	4200
Create React App	3000
Remix	5173
Astro	4321

Best Practices

•Use npm ci or pnpm install --frozen-lockfile in postCreateCommand for deterministic installs.
•Use postStartCommand for dev servers so they restart on Codespace resume.
•Forward the dev server port and set "onAutoForward": "openBrowser" for quick feedback.
•Set typescript.tsdk to the workspace TypeScript for consistent version behavior.
•Add both ESLint and Prettier extensions and configure formatOnSave for consistent code style.
•Pin Node.js to a major version (22, 20) rather than lts for reproducibility.
•Use corepack enable for Yarn v2+ to use the project-local version.