Lesezeit : 8 minutes

Warum VS Code installieren in`/opt`oder über`apt`wenn man es in seinem Home ablegen und seine IDE in einen Spielplatz verwandeln kann, ohne je zu tippen`sudo`? Hier ist die Geschichte einer lokalen Installation gefolgt von einem erbitterten Kampf, um die Schriftarten des Menüs und des Datei-Explorers zu vergrößern.

Tik

[]

Übersicht des Parcours

Failed to generate image: PlantUML preprocessing failed: [From <input> (line 6) ]

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

actor Développeur as dev
actor "opencode
^^^^^
 Syntax Error? (Assumed diagram type: sequence)

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

actor Développeur as dev
actor "opencode
+ LLM" as agent

package "Home Benutzer (~)" #LightGreen {
    package "~/apps/" {
        component "VS Code\n(tarball)" as vscode #SkyBlue
        component "vscode-update.sh" as script #LightYellow
    }
    package "~/.config/Code/" {
        component "settings.json" as settings #Lavender
    }
    package "~/.vscode-custom-css/" {
        component "custom.css\n(zoom: 1.25)" as customcss #Lavender
    }
}

cloud "code.visualstudio.com" as download

dev --> vscode : Télécharge & installe
dev --> script : Lance mise à jour
script --> download : wget dernière version
script --> vscode : Remplace + re-patch CSS
agent --> settings : Écrit config
agent --> customcss : Écrit zoom CSS
agent --> vscode : Patch workbench CSS

note right of vscode
  Installation dans le home
  = contrôle total sans sudo
end note
@enduml

Der Warum: VS Code im Home

Das Problem mit der Systeminstallation

VS Code installiert via`apt`, dnf`oder in/opt`sperrt die Anwendungsdateien hinter den Root-Rechten. Jegliche Änderung am nativen CSS, de`product.json`oder das Installationsverzeichnis erfordert`sudo`.

Aber, wenn man verwendetopencode(tool CLI zur Steuerung eines LLMs auf seinem Code), der Agent muss in der Lage sein:

  • In die Konfigurationsdateien schreiben`~/.config/Code/User/settings.json`) — das ist bereits im home

  • Die Assets des IDE ändern (CSS des Workbenches`product.json`) für die erweiterten Anpassungen — das ist ohne sudo gesperrt

Die Lösung: eine lokale Installation

Man lädt das offizielle Tarball-Archiv herunter und entpackt es direkt in`~/apps/`:

mkdir -p ~/apps
cd ~/apps
wget "https://code.visualstudio.com/sha/download?build=stable&os=linux-x64" -O vscode.tar.gz
tar -xzf vscode.tar.gz
rm vscode.tar.gz

Die Binärdatei befindet sich dann in`~/apps/VSCode-linux-x64/bin/code`. keiner`sudo`ist nicht notwendig, um irgendeine Datei zu lesen, zu ändern oder zu ersetzen unter`~/apps/VSCode-linux-x64/`.

konkrete Vorteile

Failed to generate image: PlantUML preprocessing failed: [From <input> (line 5) ]

@startuml
skinparam backgroundColor #FEFEFE

rectangle "Installation System
(/opt, apt, dnf)" #LightCoral {
^^^^^
 Syntax Error? (Assumed diagram type: activity)

@startuml
skinparam backgroundColor #FEFEFE

rectangle "Installation System
(/opt, apt, dnf)" #LightCoral {
    card "VS Code Eigentum von root" {
        [CSS du workbench : sudo requis]
        [product.json : sudo requis]
        [Dossier d'install : non modifiable]
    }
}

rectangle "Installation Start
(~/apps)" #LightGreen {
    card "VS Code Benutzereigenschaft" {
        [CSS du workbench : libre]
        [product.json : libre]
        [Dossier d'install : libre]
        [Script update maison]
    }
}

"Installation System
(/opt, apt, dnf)" -right-> "Installation Start
(~/apps)" : **Non, merci**\nJe prends le home

note bottom of "Installation Start
(~/apps)"
  L'agent opencode+LLM peut
  modifier les fichiers de l'IDE
  sans aucune élévation de privilèges
end note
@enduml
Vorteil Detail

Kein sudo

Alle Dateien der IDE gehören dem Benutzer

Direkte Änderung des CSS

Man kann patchen`workbench.desktop.main.css`ohne Erhöhung der Berechtigungen

Internes Aktualisierungsskript

Ein einfaches Shell-Skript lädt, ersetzt und patcht automatisch

Isolierung

Die Systeminstallation ist nicht verunreinigt; rollback = Löschen des Ordners

Schriftart des Hauptmenüs anpassen

Die Feststellung

Die Standardschrift des Hauptmenüs (File, Edit, View…​) und der Dropdowns ist zu klein. VS Code bietet keine Einstellung, um sie zu ändern.

Die Technik: Direktes CSS-Patch

Wir fügen CSS am Ende der Datei hinzu`workbench.desktop.main.css`</think>

menubar patch sequence
CSS_FILE="$HOME/apps/VSCode-linux-x64/resources/app/out/vs/workbench/workbench.desktop.main.css"

cat >> "$CSS_FILE" << 'EOF'
.menubar-menu-title{font-size:23px!important}
.menubar>.menubar-menu-button{font-size:23px!important}
.monaco-menu-option{font-size:22px!important;line-height:34px!important}
.monaco-menu .action-label:not(.codicon){font-size:22px!important}
.menubar-menu-items-holder .monaco-menu .action-item .action-label{font-size:22px!important}
EOF

Die Integritätswarnung löschen

VS Code erkennt Änderungen an seinen Dateien und zeigt ein Banner „Your installation is corrupt“ an. Um das zu vermeiden, löscht man die Prüfsummen von`product.json`:

import json
product_json = "$HOME/apps/VSCode-linux-x64/resources/app/product.json"
with open(product_json, 'r') as f:
    data = json.load(f)
data.pop('checksums', None)
with open(product_json, 'w') as f:
    json.dump(data, f, indent=2)

Nach dem Neustart gibt es keine Warnungen mehr und die Menüs sind endlich lesbar.

Die Schriftart des Explorer-Bereichs anpassen — der Kampf

Tentative 1 : ein Parameter, der nicht existiert

Wir versuchen zunächst den nativen Parameter`workbench.tree.fontSize`in`settings.json` :

{
    "workbench.tree.fontSize": 20
}

Ergebnis:keine Wirkung. Dieser Parameter existiert nicht in VS Code. Der Beweis, dass nicht erkannte Parameter stillschweigend ignoriert werden.

Versuch 2: die Erweiterung Custom CSS and JS Loader

Man installiert die Erweiterung`be5invis.vscode-custom-css` :

~/apps/VSCode-linux-x64/bin/code --install-extension be5invis.vscode-custom-css

Man erstellt eine CSS-Datei in`~/.vscode-custom-css/custom.css`mit Selektoren, die die Elemente des Explorers ansprechen :

.monaco-tree-rows .monaco-tree-row,
.sidebar .monaco-list-row,
.explorer-viewlet .monaco-list-row,
.monaco-list-row .monaco-icon-label {
    font-size: 22px !important;
    line-height: 36px !important;
}

Und wir referenzieren diese Datei in den Einstellungen :

{
    "vscode_custom_css.imports": [
        "file:///home/user/.vscode-custom-css/custom.css"
    ]
}

Ergebnis:Die Änderungen gelten nicht..

Die Falle: Man muss die Erweiterung jedes Mal aktivieren

Die Dokumentation der Erweiterung ist an diesem entscheidenden Punkt unauffällig: Nach jeder Anpassung des Custom-CSS muss manunbedingtden Befehl aus der Palette ausführen:

  1. Ctrl+Shift+P→ tippenBenutzerdefiniertes CSS und JS aktivieren

  2. VS Code demande un redémarrage → accepter

Ohne diesen Schritt wird das CSS niemals in die IDE eingefügt.

Versuch 3: Die Linien überlappen sich

Selbst mit`font-size: 22px` et line-height: 36px, die Buchstaben mit Schenkeln (g, p, f, b) ragen in die benachbarten Zeilen hinein. Es wird versucht, hinzuzufügen`height` et min-height:

.monaco-list-row {
    height: 36px !important;
    min-height: 36px !important;
}

Ergebnis:keine Änderung. VS Code berechnet die Zeilenhöhen in JavaScript und überschreibt die CSS-Werte.

Die Lösung: zoom auf dem Elterncontainer

Failed to generate image: PlantUML preprocessing failed: [From <input> (line 5) ]

@startuml
skinparam backgroundColor #FEFEFE

rectangle "Versuch 1
Nicht vorhandener Parameter" #LightCoral {
^^^^^
 Syntax Error? (Assumed diagram type: activity)

@startuml
skinparam backgroundColor #FEFEFE

rectangle "Versuch 1
Nicht vorhandener Parameter" #LightCoral {
    card "workbench.tree.fontSize" as t1 {
        [VS Code ignore le paramètre]
    }
}

rectangle "Versuch 2
Benutzerdefiniertes CSS + Schriftgröße" #LightYellow {
    card ".monaco-list-row { font-size: 22px }" as t2 {
        [Texte plus grand\nmais lignes superposées]
    }
}

rectangle "Versuch 3
Schriftgröße + Zeilenhöhe + Höhe" #LightYellow {
    card "height: 36px !important" as t3 {
        [VS Code override\npar JavaScript]
        [Aucun effet]
    }
}

rectangle "Lösung\nzoom auf übergeordneten Container" #LightGreen {
    card ".monaco-list-rows { zoom: 1.25 }" as t4 {
        [Texte + espacement\nproportionnels]
        [Layout JS respecté]
        [✓ Résultat conforme]
    }
}

t1 -down-> t2 : Pas de paramètre ?\nOn essaie le CSS
t2 -down-> t3 : Lignes superposées ?\nOn force la hauteur
t3 -down-> t4 : Override JS ?\nOn utilise zoom

@enduml

Anstatt gegen das JavaScript-Layout zu kämpfen, verwendet man die Eigenschaft`zoom`auf dem Behälter der Zeilen:

.explorer-viewlet .monaco-list-rows,
.sidebar .monaco-list-rows {
    zoom: 1.25;
}

`zoom`vergrößert die Darstellung des Containers gleichmäßig — Text UND Abstand — ohne das vom JavaScript-Engine von VS Code berechnete Layout zu zerstören. Der Faktor 1.25 entspricht ungefähr einem Übergang von 13 px zu 16 px.

Ergebnis:Dateinamen endlich lesbar, Zeilenabstand korrekt.

Zusammenfassung der Selectors und was funktioniert

Ansatz CSS Ergebnis

font-size`auf.monaco-list-row`

font-size: 22px !important

Größerer Text, aber überlappende Zeilen

line-height+height`auf.monaco-list-row`

line-height: 36px; height: 36px

Keine Wirkung (JS-Überschreibung)

zoom`auf.monaco-list-rows`

zoom: 1.25

Erfolgreich — Text + proportionaler Abstand

Das Skript für das automatische Update

Failed to generate image: PlantUML preprocessing failed: [From <input> (line 5) ]

@startuml
skinparam backgroundColor #FEFEFE
autonumber

actor "Entwickler
^^^^^
 Syntax Error? (Assumed diagram type: sequence)

@startuml
skinparam backgroundColor #FEFEFE
autonumber

actor "Entwickler
oder cron" as dev
participant "vscode-update.sh" as script
participant "VS-Code-Tarball
(code.visualstudio.com)" as remote
participant "~/apps/
VSCode-linux-x64" as local
participant "~/apps/\nvscode-backup" as backup
participant "workbench
.desktop.main.css" as css
participant "product.json" as product

dev -> script : ./vscode-update.sh
script -> local : Lire version courante
script -> remote : wget dernière version
script -> script : Comparer versions

alt Version identique
    script --> dev : "Bereits auf dem neuesten Stand!"
else Nouvelle version
    script -> backup : Sauvegarder installation courante\n(horodatée)
    script -> local : rm -rf ancienne installation
    script -> local : mv nouvelle installation
    script -> css : Ajouter patch CSS\n(menubar 23px, dropdown 22px)
    script -> product : Supprimer checksums\n(python3)
    script --> dev : "Update abgeschlossen
1.xx.yy → 1.zz.ww"
end note
@enduml

Das Problem

Wenn VS Code sich aktualisiert, ersetzt er den Installationsordner undlöscht alle CSS-Patches. Man muss die Änderungen jedes Mal manuell erneut anwenden.

Das Skript `vscode-update.sh

Man erstellt`~/apps/vscode-update.sh`:

#!/bin/bash
set -e

VSCODE_DIR="$HOME/apps/VSCode-linux-x64"
BACKUP_DIR="$HOME/apps/vscode-backup"
TEMP_DIR="/tmp/vscode-update"

MENUBAR_FONT_SIZE="23px"
DROPDOWN_FONT_SIZE="22px"

echo "=== VS Code Local Updater ==="

CURRENT_VERSION=$("$VSCODE_DIR/bin/code" --version 2>/dev/null | head -1)
echo "Current version: $CURRENT_VERSION"

echo "Downloading latest VS Code..."
mkdir -p "$TEMP_DIR"
wget -q "https://code.visualstudio.com/sha/download?build=stable&os=linux-x64" \
    -O "$TEMP_DIR/vscode.tar.gz"

echo "Extracting..."
mkdir -p "$TEMP_DIR/extracted"
tar -xzf "$TEMP_DIR/vscode.tar.gz" -C "$TEMP_DIR/extracted"

NEW_VERSION=$("$TEMP_DIR/extracted/VSCode-linux-x64/bin/code" \
    --version 2>/dev/null | head -1)
echo "New version: $NEW_VERSION"

if [ "$CURRENT_VERSION" = "$NEW_VERSION" ]; then
    echo "Already up to date!"
    rm -rf "$TEMP_DIR"
    exit 0
fi

echo "Backing up current installation..."
mkdir -p "$BACKUP_DIR"
cp -r "$VSCODE_DIR" "$BACKUP_DIR/VSCode-linux-x64-$(date +%Y%m%d-%H%M%S)"

echo "Updating..."
rm -rf "$VSCODE_DIR"
mv "$TEMP_DIR/extracted/VSCode-linux-x64" "$VSCODE_DIR"
rm -rf "$TEMP_DIR"

CSS_FILE="$VSCODE_DIR/resources/app/out/vs/workbench/workbench.desktop.main.css"
echo "Re-applying custom CSS patch \
    (menubar=${MENUBAR_FONT_SIZE}, dropdown=${DROPDOWN_FONT_SIZE})..."
cat >> "$CSS_FILE" << CSSEOF
.menubar-menu-title{font-size:${MENUBAR_FONT_SIZE}!important}\
.menubar>.menubar-menu-button{font-size:${MENUBAR_FONT_SIZE}!important}\
.monaco-menu-option{font-size:${DROPDOWN_FONT_SIZE}!important;\
line-height:34px!important}\
.monaco-menu .action-label:not(.codicon)\
{font-size:${DROPDOWN_FONT_SIZE}!important}\
.menubar-menu-items-holder .monaco-menu .action-item .action-label\
{font-size:${DROPDOWN_FONT_SIZE}!important}
CSSEOF

PRODUCT_JSON="$VSCODE_DIR/resources/app/product.json"
if [ -f "$PRODUCT_JSON" ]; then
    echo "Removing checksums to prevent integrity warning..."
    python3 -c "
import json
with open('$PRODUCT_JSON','r') as f: data=json.load(f)
data.pop('checksums', None)
with open('$PRODUCT_JSON','w') as f: json.dump(data,f,indent=2)
print('Done.')
"
fi

echo "=== Update complete: $CURRENT_VERSION -> $NEW_VERSION ==="

Das Skript:

  1. Lade die neueste stabile Version herunter

  2. Überprüfe, ob die Version von der aktuellen abweicht.

  3. Sichere die aktuelle Installation (zeitgestempelt) in`~/apps/vscode-backup/`

  4. Ersetze den Installationsordner

  5. Erneut anwendenDer CSS-Patch des Hauptmenüs

  6. Entferne die Prüfsummen de `product.json`um die Integritätswarnung zu vermeiden

Hinweis: Die Anpassungen des Explorer‑Bereichs über die Custom CSS‑Erweiterung und die Datei`~/.vscode-custom-css/custom.css`Sie überleben die Updates, weil sie außerhalb des Installationsordners leben.

Betroffene Dateien – Überblick

Failed to generate image: PlantUML preprocessing failed: [From <input> (line 6) ]

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

rectangle "Installation von VS Code
(~/apps/VSCode-linux-x64/)" #LightCoral {
^^^^^
 Syntax Error? (Assumed diagram type: activity)

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

rectangle "Installation von VS Code
(~/apps/VSCode-linux-x64/)" #LightCoral {
    component "workbench.desktop
.main.css" as css #LightCoral
    component "product.json" as product #LightCoral
    component "binär
bin/code" as binary #LightCoral
}

rectangle "Benutzerkonfiguration
(~/.config/Code/)" #LightGreen {
    component "settings.json" as settings #LightGreen
    component "Erweiterungen/" as extensions #LightGreen
}

rectangle "Persistente Anpassung
(~/.vscode-custom-css/)" #SkyBlue {
    component "custom.css
(zoom: 1.25)" as customcss #SkyBlue
}

rectangle "Automation
(~/apps/)" #LightYellow {
    component "vscode-update.sh" as script #LightYellow
    component "vscode-backup/" as backup #LightYellow
}

script ..> css : Re-patch après MAJ
script ..> product : Supprime checksums\naprès MAJ
settings --> customcss : Référence via\nvscode_custom_css.imports
extensions ..> css : Custom CSS Loader\ninjecte custom.css

note bottom of css
  **Ne survit pas** aux mises à jour
  Re-patché par le script
end note

note bottom of customcss
  **Survit** aux mises à jour
  Vit hors du dossier d'installation
end note

note bottom of settings
  **Survit** aux mises à jour
  Vit dans ~/.config/
end note
@enduml
Weg Rolle Überlebt die Updates?

~/apps/VSCode-linux-x64/

Installation der IDE

Nein (ersetzt)

~/apps/VSCode-linux-x64/resources/app/out/vs/workbench/workbench.desktop.main.css

CSS des Workbench (Menü, Dropdowns)

Nein (nachträglich vom Skript gepatcht)

~/apps/VSCode-linux-x64/resources/app/product.json

Checksummen der Integrität

Nein (erneut gereinigt vom Skript)

~/apps/vscode-update.sh

Automatisches Aktualisierungs‑Skript

Ja

~/.config/Code/User/settings.json

Benutzereinstellungen (fontSize, custom CSS)

Ja

~/.vscode-custom-css/custom.css

Benutzerdefiniertes CSS für den Explorer (Zoom)

Ja

Gelernte Lektionen

Failed to generate image: PlantUML preprocessing failed: [From <input> (line 8) ]

@startuml
skinparam backgroundColor #FEFEFE
skinparam defaultFontName sans-serif
skinparam ArrowColor #444444

rectangle "**Lokale Installation**\n im Home" as install #LightGreen {
    card "Kein sudo
 zum Ändern von CSS/config" as i1
^^^^^
 Syntax Error? (Assumed diagram type: activity)

@startuml
skinparam backgroundColor #FEFEFE
skinparam defaultFontName sans-serif
skinparam ArrowColor #444444

rectangle "**Lokale Installation**\n im Home" as install #LightGreen {
    card "Kein sudo
 zum Ändern von CSS/config" as i1
    card "opencode+LLM kann
 alles ändern" as i2
    card "Rollback = wiederherstellen
 das zeitgestempelte Backup" as i3
}

rectangle "**CSS-Anpassung**
Zoom vs Schriftgröße" as css #LightYellow {
    card "zoom > font-size
 für Komponentenliste" as c1
    card "Layout JS-Überschreibung
Höhe/Zeilenhöhe" as c2
    card "Extension Custom CSS
 erfordert Aktivierung
 manuelle (Ctrl+Shift+P)" as c3
}

rectangle "**Automatisierung**\n Skript zur Aktualisierung" as auto #LightCoral {
    card "CSS neu patchen
 nach jedem Update" as a1
    card "Checksummen löschen
 product.json" as a2
    card "Zeitgestempeltes Backup
 vor Ersetzung" as a3
}

install -right-> css : ensuite
css -right-> auto : enfin

note top of install
  Contrôle total sans élévation
  de privilèges
end note

note top of auto
  Sans script, chaque MAJ
  efface les patches CSS
end note
@enduml

Installieren im home-Verzeichnis befreit alles

Eine lokale Installation in`~/apps`gibt vollständige Kontrolle über VS Code:

  • Kein`sudo`um das CSS oder die Konfiguration zu ändern

  • Der opencode+LLM-Agent kann in die Konfigurationsdateien und die Assets der IDE schreiben.

  • Einfacher Rollback: den zeitgestempelten Backup wiederherstellen

zoom` > font-size für die Komponenten list

VS Code steuert die Zeilenhöhe über JavaScript. Ändern`font-size`Da man die vom Layout-Engine zugewiesene Höhe nicht ändern kann, ergeben sich Texte, die überlaufen. Die Eigenschaft`zoom`Durch das Vergrößern des übergeordneten Containers wird alles proportional vergrößert und dieses Problem umgangen.

Die Erweiterung Custom CSS erfordert eine explizite Aktivierung

Das ist kein "set and forget"-Parameter. Jede Änderung an der benutzerdefinierten CSS-Datei erfordert das erneute Ausführen von "Enable Custom CSS and JS" über die Befehlspalette (Ctrl+Shift+P).

Ein Aktualisierungsskript ist unverzichtbar

Ohne Skript löscht jedes Update von VS Code die CSS-Patches des Workbench. Das Skript`vscode-update.sh`Automatisiert den Download, das Ersetzen, das Re‑Patching und das Bereinigen der Prüfsummen.

Schnelle Referenzen

  • VS Code-Download: https://code.visualstudio.com/Download

  • Erweiterung Benutzerdefinierter CSS- und JS-Loader :`be5invis.vscode-custom-css`

  • Problem bei VS Code: Anforderung eines nativen Parameters für die Schriftart des Explorers :https://github.com/microsoft/vscode/issues/149[github.com/microsoft/vscode#149]

Verwandte Artikel