# Customizing your codespace

By [Suyi](https://paragraph.com/@suyi-cn) · 2022-12-08

---

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
    

Links
-----

[https://containers.dev/](https://containers.dev/)

---

*Originally published on [Suyi](https://paragraph.com/@suyi-cn/customizing-your-codespace)*