Skip to content

Instantly share code, notes, and snippets.

@lbssousa
Last active August 21, 2024 18:41
Show Gist options
  • Save lbssousa/bb081e35d483520928033b2797133d5e to your computer and use it in GitHub Desktop.
Save lbssousa/bb081e35d483520928033b2797133d5e to your computer and use it in GitHub Desktop.
VSCode + Dev Containers and Toolbx/Distrobox setup for Fedora Silverblue

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

Steps

If you prefer VSCode Flatpak

  1. Install VSCode Flatpak from Flathub:
flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
flatpak install com.visualstudio.code
  1. 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
  1. 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)

  1. 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
  1. Install code package:
rpm-ostree install code
  1. Reboot your system:
systemctl reboot

Preparing your VSCode for working with containers

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

If you want to work with Dev Containers

  1. (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. (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.

  2. (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).

  1. 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}"
  }
}
  1. 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

Related projects

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment