Codespaces can become a game changer

TLDR: I’m very impressed about how easy it is to set up and to use! Codespaces is a remote container that can be configured for your needs and that includes VSCode to start implementing instantly. The nice part: you can start your apps remotely and get a remote port to check the result. Every runs remotely so the only requirement is a Browser (and of course a Github account). By creating a devcontainer.json in a folder called .devcontainer you can customize the created container per repository.

devcontainer.json
.devcontainer

Here’s a simple config I used for a frontend react application:

{ 
  "name": "Default Linux Universal", 
  "image": "mcr.microsoft.com/devcontainers/universal:2-linux", 
  "updateContentCommand": "pnpm i", 
  "customizations": { 
    "vscode": { 
      "extensions": [ 
        "esbenp.prettier-vscode", 
        "dbaeumer.vscode-eslint", 
        "oderwat.indent-rainbow", 
        "dracula-theme.theme-dracula", 
        "ms-vsliveshare.vsliveshare" 
      ], 
      "settings": { 
        "workbench.colorTheme": "Dracula" 
      } 
    } 
  }, 
  "features": { 
    "ghcr.io/devcontainers/features/node": "18.18.0" 
  } 
}

As you can see you can auto customize VSCode as well:

• Install extensions under customizations.vscode.extensions
• Configure settings, like a theme under customizations.vscode.settings

Personally I prefer to use a locally configured VSCode, but I see some use cases where it’s a super nice use case:

• You want to onboard someone to your code base easily
• I want to change something without my own machine with me
• Non-engineering people can easily change things by their own (like css, i18n texts, …) In all cases the user does not have to set up anything locally, because in this case the Codespace provides a working environment including git, node and all dependencies. The use just needs to do the changes and can start the application to see the outcome.