VS Code im Home-Verzeichnis: lokale Installation und Anpassung der Schriftarten ohne sudo
Veröffentlicht am 17 April 2026
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.
Übersicht des Parcours
@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle
actor Développeur as dev
actor "opencode\n+ LLM" as agent
package "Benutzer-Home (~)" #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 im Home-Verzeichnis
= volle Kontrolle ohne 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
@startuml
skinparam backgroundColor #FEFEFE
rectangle "Installation System\n(/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 Home\n(~/apps)" #LightGreen {
card "VS Code Eigentum des Benutzers" {
[CSS du workbench : libre]
[product.json : libre]
[Dossier d'install : libre]
[Script update maison]
}
}
"Installation System\n(/opt, apt, dnf)" -right-> "Installation Home\n(~/apps)" : **Non, merci**\nJe prends le home
note bottom of "Installation Home\n(~/apps)"
Der Agent opencode+LLM kann die Dateien des IDE ohne Erhöhung der Berechtigungen ändern
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>
@startuml skinparam backgroundColor #FEFEFE autonumber actor Développeur as dev participant "workbench.desktop\n.main.css" as css participant "product.json" as product participant "VS Code" as vscode == Patch CSS == dev -> css : Regeln hinzufügen `font-size\n(.menubar-menu-title, etc.) dev -> vscode : VS Code neu starten vscode -> vscode : Lade den gepatchten CSS vscode --> dev : Menüs und Dropdowns bei 23px/22px ✓ == Suppression warning == vscode --> dev : ⚠️ "Ihre Installation ist beschädigt" dev -> product : Supprimer clé "Prüfsummen"\n(python3 -c ...) dev -> vscode : VS Code neu starten vscode --> dev : Keine Warnungen mehr ✓ note over css, product Zwei Dateien in ~/apps/ = lässt sich ohne sudo bearbeiten end note @enduml
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:
-
Ctrl+Shift+P→ tippenBenutzerdefiniertes CSS und JS aktivieren -
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
@startuml
skinparam backgroundColor #FEFEFE
rectangle "Versuch 1\nParameter nicht existent" #LightCoral {
card "workbench.tree.fontSize" as t1 {
[VS Code ignore le paramètre]
}
}
rectangle "Versuch 2\nBenutzerdefiniert CSS + font-size" #LightYellow {
card ".monaco-list-row { font-size: 22px }" as t2 {
[Texte plus grand\nmais lignes superposées]
}
}
rectangle "Versuch 3\nfont-size + Zeilenhöhe + Höhe" #LightYellow {
card "height: 36px !important" as t3 {
[VS Code override\npar JavaScript]
[Aucun effet]
}
}
rectangle "Lösung\nzoom übergeordneten Container" #LightGreen {
card ".monaco-list-rows { zoom: 1.25" as t4 {
[Texte + espacement\nproportionnels]
[Layout JS respecté]
[✓ Résultat conforme]
}
}
t1 -down-> t2 : Kein Parameter?\nWir versuchen das CSS
t2 -down-> t3 : Überlappende Linien?\nWir erzwingen die Höhe
t3 -down-> t4 : Override JS ?\nWir verwenden 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 |
|---|---|---|
|
|
Größerer Text, aber überlappende Zeilen |
|
|
Keine Wirkung (JS-Überschreibung) |
|
|
Erfolgreich — Text + proportionaler Abstand |
Das Skript für das automatische Update
@startuml
skinparam backgroundColor #FEFEFE
autonumber
actor "Entwickler\noder cron" as dev
participant "vscode-update.sh" as script
participant "vscode tarball\n(code.visualstudio.com)" as remote
participant "~/apps/\nVSCode-linux-x64/" as local
participant "~/apps/\nvscode-backup/" as backup
participant "workbench\n.desktop.main.css" as css
participant "product.json" as product
dev -> script : ./vscode-update.sh
script -> local : Aktuelle Version lesen
script -> remote : wget neueste Version
script -> script : Versionen vergleichen
alt Version identique
script --> dev : "Bereits auf dem neuesten Stand!"
else Nouvelle version
script -> backup : Aktuelle Installation sichern\n(zeitgestempelt)
script -> local : rm -rf alte Installation
script -> local : mv neue installation
script -> css : Patch hinzufügen CSS\n(Menüleiste 23px, Dropdownliste 22px)
script -> product : Entfernen checksums\n(python3)
script --> dev : "Update abgeschlossen\n1.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:
-
Lade die neueste stabile Version herunter
-
Überprüfe, ob die Version von der aktuellen abweicht.
-
Sichere die aktuelle Installation (zeitgestempelt) in`~/apps/vscode-backup/`
-
Ersetze den Installationsordner
-
Erneut anwendenDer CSS-Patch des Hauptmenüs
-
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
@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle
rectangle "Installation VS Code\n(~/apps/VSCode-linux-x64/)" #LightCoral {
component "workbench.desktop\n.main.css" as css #LightCoral
component "product.json" as product #LightCoral
component "binär\nbin/code" as binary #LightCoral
}
rectangle "Benutzerkonfiguration\n(~/.config/Code/)" #LightGreen {
component "settings.json" as settings #LightGreen
component "erweiterungen/" as extensions #LightGreen
}
rectangle "persistente Anpassung\n(~/.vscode-custom-css/)" #SkyBlue {
component "custom.css\n(zoom: 1.25)" as customcss #SkyBlue
}
rectangle "Automatisierung\n(~/apps/)" #LightYellow {
component "vscode-update.sh" as script #LightYellow
component "vscode-backup/" as backup #LightYellow
}
script ..> css : Erneut patchen nach MAJ
script ..> product : Entferne checksums\nnach MAJ
settings --> customcss : Referenz via\nvscode_custom_css.imports
extensions ..> css : Benutzerdefiniert CSS Loader\neingefügt custom.css
note bottom of css
Überlebt nicht
Vom Skript neu gepatcht
end note
note bottom of customcss
**überlebt** Updates
Lebt außerhalb des Installationsordners
end note
note bottom of settings
**Übersteht die Updates**
Lebt in ~/.config/
end note
@enduml
| Weg | Rolle | Überlebt die Updates? |
|---|---|---|
|
Installation der IDE |
Nein (ersetzt) |
|
CSS des Workbench (Menü, Dropdowns) |
Nein (nachträglich vom Skript gepatcht) |
|
Checksummen der Integrität |
Nein (erneut gereinigt vom Skript) |
|
Automatisches Aktualisierungs‑Skript |
Ja |
|
Benutzereinstellungen (fontSize, custom CSS) |
Ja |
|
Benutzerdefiniertes CSS für den Explorer (Zoom) |
Ja |
Gelernte Lektionen
@startuml
skinparam backgroundColor #FEFEFE
skinparam defaultFontName sans-serif
skinparam ArrowColor #444444
rectangle "**Lokale Installation**\n im Home-Verzeichnis" as install #LightGreen {
card "Kein sudo\n zum Ändern von CSS/config" as i1
card "opencode+LLM kann\n alles ändern" as i2
card "Rollback = Wiederherstellen\n des zeitgestempelten Backups" as i3
}
rectangle "**CSS-Customisierung**\n zoom vs font-size" as css #LightYellow {
card "zoom > font-size\n für Listen-Komponenten" as c1
card "Layout JS override\n height/line-height" as c2
card "Extension Custom CSS\n erfordert manuelle\n Aktivierung (Ctrl+Shift+P)" as c3
}
rectangle "**Automatisierung**\n Update-Skript" as auto #LightCoral {
card "CSS nach jedem\n Update neu patchen" as a1
card "Checksums in\n product.json entfernen" as a2
card "Zeitgestempeltes Backup\n vor dem Ersetzen" as a3
}
install -right-> css : ensuite
css -right-> auto : enfin
note top of install
Vollständige Kontrolle ohne Rechteausweitung
end note
note top of auto
Ohne Skript löscht jedes Update
die CSS-Patches
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]