VSCode + Dev Containers and Toolbx/Distrobox setup for Fedora Silverblue

PLEASE NOTE:

I personally don't use Flatpak VSCode anymore, since I switched from Fedora Silverblue to Universal Blue's project Bluefin-DX. I'll leave the instructions here for those who want them, but be aware that Flatpak VSCode instructions won't be maintained anymore.

Steps

If you prefer VSCode Flatpak

Install VSCode Flatpak from Flathub:

flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
flatpak install com.visualstudio.code

Prepare it for spawning podman from host system:

mkdir -p ${HOME}/.var/app/com.visualstudio.code/data/node_modules/bin
ln -sf /app/bin/host-spawn ${HOME}/.var/app/com.visualstudio.code/data/node_modules/bin/podman

Inject some environment variables (if you want to use work with Toolbx/Distrobox containers):

flatpak --user override --env HOST_DISPLAY="$DISPLAY" --env HOST_SHELL="$SHELL" --env HOST_SSH_AUTH_SOCK="$SSH_AUTH_SOCK" com.visualsudio.code

If you prefer layered VSCode (RPM)

Add VSCode repository info to your system:

echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" | sudo tee /etc/yum.repos.d/vscode.repo > /dev/null

Install code package:

rpm-ostree install code

Reboot your system:

systemctl reboot

Preparing your VSCode for working with containers

Install Dev Containers extension.
Configure Dev Containers > Docker path property (dev.containers.dockerPath) to podman.

If you want to work with Dev Containers

(For both VSCode Flatpak and layered installations) Create config file ${HOME}/.config/containers/containers.conf with the following contents:

[containers]
env = ["BUILDAH_FORMAT=docker"]
label = false
userns = "keep-id"

1.1. Alternatively, these parameters can be set per-devcontainer (WARNING: it may break combatibility with Docker. You may be unable to open it in a Docker-based cloud DE such as GitHub Codespaces or GitPod.). Include the following in your project's devcontainer.json file:

{
  ...
  "runArgs": [
    "--userns=keep-id",
    "--security-opt=label=disable"
  ],
  "build": {
    "options": [
      "--format=docker"
    ]
  },
  ...
}

(For both VSCode Flatpak and layered installations) in your project's devcontainer.json file, you must set properties remoteUser and containerUser properly. For example, if you use any base image from Microsoft itself, you must set both properties to vscode.
(For VSCode Flatpak only) Give write permission to /tmp directory:

flatpak --user override --filesystem=/tmp com.visualstudio.code

If you want to work with Toolbx/Distrobox containers

In the following, replace ${XDG_CONFIG_HOME} with ${HOME}/.config (for layered VSCode) or ${HOME}/.var/app/com.visualstudio.code/config (for VSCode Flatpak).

Create file ${XDG_CONFIG_HOME}/Code/User/globalStorage/ms-vscode-remote.remote-containers/nameConfigs/${YOUR_DISTROBOX_CONTAINER_NAME}.json with the folloing minimal contents:

{
  "remoteUser": "${localEnv:USER}",
  "settings": {
    "dev.containers.copyGitConfig": false,
    "dev.containers.gitCredentialHelperConfigLocation": "none"
  },

  "terminal.integrated.profiles.linux": {
    "distrobox": {
      "path": "${localEnv:SHELL}",
      "args": [
        "-l"
      ]
    },
    "toolbx": {
      "path": "/usr/sbin/capsh",
      "args": [
        "--caps=",
        "--",
        "-c",
        "exec \"\$@\"",
        "/bin/sh",
        "${localEnv:SHELL}",
        "-l"
      ]
    }
  },
  "terminal.integrated.defaultProfile.linux": "distrobox", // Replace with "toolbx" if you're using it

  "remoteEnv": {
    "COLORTERM": "${localEnv:COLORTERM}",
    "DBUS_SESSION_BUS_ADDRESS": "${localEnv:DBUS_SESSION_BUS_ADDRESS}",
    "DESKTOP_SESSION": "${localEnv:DESKTOP_SESSION}",
    "DISPLAY": "${localEnv:DISPLAY}", // Replace with ${localEnv:HOST_DISPLAY} for Flatpak
    "LANG": "${localEnv:LANG}",
    "SHELL": "${localEnv:SHELL}", // Replace with ${localEnv:HOST_SHELL} for Flatpak
    "SSH_AUTH_SOCK": "${localEnv:SSH_AUTH_SOCK}", // Replace with ${localEnv:HOST_SSH_AUTH_SOCK} for Flatpak
    "TERM": "${localEnv:TERM}",
    "VTE_VERSION": "${localEnv:VTE_VERSION}",
    "XDG_CURRENT_DESKTOP": "${localEnv:XDG_CURRENT_DESKTOP}",
    "XDG_DATA_DIRS": "${localEnv:XDG_DATA_DIRS}",
    "XDG_MENU_PREFIX": "${localEnv:XDG_MENU_PREFIX}",
    "XDG_RUNTIME_DIR": "${localEnv:XDG_RUNTIME_DIR}",
    "XDG_SESSION_DESKTOP": "${localEnv:XDG_SESSION_DESKTOP}",
    "XDG_SESSION_TYPE": "${localEnv:XDG_SESSION_TYPE}"
  }
}

Create a folder inside your container for vscode-server data:

sudo mkdir /.vscode-server
sudo chown ${USER}:${USER} /.vscode-server
ln -sf /.vscode-server ${HOME}/.vscode-server
sudo chmod 755 /root
sudo ln -sf /.vscode-server /root/.vscode-server

lbssousa/Instructions.md