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

Instructions.md

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 Bluefin. 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

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

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

3. 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

2. Install code package:

rpm-ostree install code

3. Reboot your system:

systemctl reboot

If you prefer VSCode packaged for Homebrew (Universal Blue tap)

When using a Universal Blue system (e.g. Bluefin, Aurora, Bazzite), you may prefer to install VSCode using Homebrew:

1. Add Homebrew tap from Universal Blue team:

brew tap ublue-os/tap

2. Install VSCode:

brew install --cask visual-studio-code-linux

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

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

• https://github.com/owtaylor/toolbox-vscode
• https://github.com/daw1012345/vscode-for-toolbox

https://github.com/AISCGre-BR/modelo-editorial-cnbb

Hmm, I don't see /.devcontainer folder here?

Refresh your page. I've just pushed the .devcontainer folder.

To get GUI apps working, I had to passthrough XAUTHORITY as well.