Cover photo

Customizing your codespace

You can personalize GitHub Codespaces by a devcontainer.json .

Config

we can personalize our codespaces by image or dockerfile.

Image

use a prebuilt image can be much easy. all you need to do is adding your tool by scripts or enable available dev container features .

devcontainer.json

{
  "image": "mcr.microsoft.com/devcontainers/universal:2",
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "lts"
    }
  },
  "settings": {
    "terminal.integrated.profiles.linux": {
      "zsh": {
        "path": "zsh"
      },
      "bash": {
        "path": "bash"
      },
      "fish": {
        "path": "fish"
      },
      "tmux": {
        "path": "tmux"
      },
      "pwsh": {
        "path": "pwsh"
      }
    },
    "terminal.integrated.profiles.osx": {
      "zsh": {
        "path": "zsh"
      }
    }
  },
  "postCreateCommand": "sh scripts/init-legacy.sh"
}

init-legacy.sh

#!/bin/bash

export HOME=/home/codespace

sudo apt-get update
sudo apt-get install git-extras

echo "install Oh My Zsh"
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

chsh -s /bin/zsh

Dockerfile

using a dockerfile will let you have more ability to customize a dev environment.

here we use a lts node image to build our devcontainer by adding zsh and nvs, and we enable oh-my-zsh and update prefix config for npm.

devcontainer.json

{
  "name": "GitHub Codespaces (Default)",
  "build": {
    "dockerfile": "Dockerfile"
  },
  "remoteUser": "root",
  "postCreateCommand": "/root/scripts/init.sh",
  "settings": {
    "terminal.integrated.profiles.linux": {
      "zsh": {
        "path": "zsh"
      },
      "bash": {
        "path": "bash"
      },
      "fish": {
        "path": "fish"
      },
      "tmux": {
        "path": "tmux"
      },
      "pwsh": {
        "path": "pwsh"
      }
    },
    "terminal.integrated.profiles.osx": {
      "zsh": {
        "path": "zsh"
      }
    }
  }
  // "customizations": {
  //   "vscode": {
  //     "extensions": ["dbaeumer.vscode-eslint"]
  //   }
  // },
}

Dockerfile

FROM node:lts-bullseye

WORKDIR /root

COPY scripts /root/scripts

RUN apt update \
    && export DEBIAN_FRONTEND=noninteractive \
    && export HOME=/root \
    && apt install zsh curl git git-extras vim -y \
    && echo "install Oh My Zsh" \
    && sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" \
    && chsh -s /bin/zsh

init.sh

#!/bin/bash

# nvs
export NVS_HOME="$HOME/.nvs"
git clone https://github.com/jasongin/nvs "$NVS_HOME"
sh "$NVS_HOME/nvs.sh" install

# npm
npm config set prefix ~/.npm-global
export PATH="$HOME/.npm-global/bin:$PATH"

# pnpm
export PNPM_HOME="$HOME/.pnpm"

# git
git config --unset commit.gpgsign

# source
echo "\n source $HOME/.profile" >> $HOME/.zshrc

https://containers.dev/