VS Code dans le Home : installation locale et customisation des polices sans sudo
Δημοσιεύτηκε 17 April 2026
Γιατί να εγκαταστήσετε VS Code στο`/opt`ή Via`apt`όταν μπορείς να το βάλεις στο σπίτι σου και να μετατρέψεις το IDE σου σε παιδικό χωράφι χωρίς ποτέ να πληκτρολογήσεις`sudo`Αυτή είναι η ιστορία μιας τοπικής εγκατάστασης που ακολουθούσα από μια σκληρή μάχη για την αύξηση του μεγέθους των γραματοσειρών του μενού και του εξερευνητή αρχείων.
Επισκόπηση του διαδρομή
@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle
actor Développeur as dev
actor "opencode\n+ LLM" as agent
package "Αρχική σελίδα Χρήστη (~)" #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
Εγκατάσταση στο home
= πλήρης έλεγχος χωρίς sudo
end note
@enduml
Το Γιατί: VS Code στο Home
Το πρόβλημα με την εγκατάσταση του συστήματος
VS Code εγκατεστημένο μέσω`apt`, dnf`ή σε/opt`Κλείδώνει τα αρχεία της εφαρμογής πίσω από τα δικαιώματα root. Οποιαδήποτε αλλαγή του εγγενούς CSS, του`product.json`ή του φακέλου εγκατάστασης απαιτεί`sudo`.
Αλλά, όταν κάποιος χρησιμοποιείopencode(tool CLI για να χειριστούμε ένα LLM στον κώδικά του), ο agent χρειάζεται να μπορεί να:
-
Γράψτε στα αρχεία ρύθμισης`~/.config/Code/User/settings.json`) — Το, είναι ήδη στο σπίτι
-
Τροποποιήστε τα assets του IDE (CSS του workbench,
product.json) για τις προχωρημένες παραμετροποίησης — αυτό είναι μπλοκαρισμένο χωρίς sudo
Η λύση: μια τοπική εγκατάσταση
Κατεβάζουμε την επίσημη tarball αρχειοθήκη και την αποσυμπιέζουμε άμεσα στο`~/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
Το δυαδικό είναι τότε σε`~/apps/VSCode-linux-x64/bin/code`. Κανένας`sudo`Δεν είναι απαραίτητο για να διαβάσετε, να τροποποιήσετε ή να αντικαταστήσετε οποιοδήποτε αρχείο υπό`~/apps/VSCode-linux-x64/`.
συγκεκριμένα πλεονεκτήματα
@startuml
skinparam backgroundColor #FEFEFE
rectangle "Installation Système\n(/opt, apt, dnf)" #LightCoral {
card "VS Code propriété de root" {
[CSS du workbench : sudo requis]
[product.json : sudo requis]
[Dossier d'install : non modifiable]
}
}
rectangle "Installation Home\n(~/apps)" #LightGreen {
card "VS Code propriété de l'utilisateur" {
[CSS du workbench : libre]
[product.json : libre]
[Dossier d'install : libre]
[Script update maison]
}
}
"Installation Système\n(/opt, apt, dnf)" -right-> "Installation Home\n(~/apps)" : **Non, merci**\nJe prends le home
note bottom of "Installation Home\n(~/apps)"
L'agent opencode+LLM peut
modifier les fichiers de l'IDE
sans aucune élévation de privilèges
end note
@enduml
| Πλεονέκτημα | Λεπτομέρεια |
|---|---|
Χωρίς sudo |
Όλα τα αρχεία του IDE ανήκουν στον χρήστη |
Απευθεία τροποποίηση CSS |
Μπορούμε να πατσαρίσουμε`workbench.desktop.main.css`χωρίς αύξηση δικαιωμάτων |
Σενάριο ενημέρωσης σπιτιού |
Ένας απλός script shell κατεβάζει, αντικαθιστά και επαναπατίζει αυτόματα |
Απομόνωση |
Η εγκατάσταση του συστήματος δεν είναι pollutου ; rollback = διαγραφή του φακέλου |
Προσαρμόστε τη γραμματοσειρά του κύριου μενού
Η παρατήρηση
Η προεπιλεγμένη γραμματοσειρά του κύριου μενού (File, Edit, View…) και των dropdowns είναι πολύ μικρή. VS Code δεν προσφέρει καμία ρύθμιση για να την τροποποιήσει.
Η τεχνική : patch CSS ευθύ
Προσθέτουμε CSS στο τέλος του αρχείου`workbench.desktop.main.css`:
@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 : Ajouter règles font-size\n(.menubar-menu-title, etc.) dev -> vscode : Redémarrer VS Code vscode -> vscode : Charge le CSS patché vscode --> dev : Menus et dropdowns en 23px/22px ✓ == Suppression warning == vscode --> dev : ⚠️ "Your installation is corrupt" dev -> product : Supprimer clé "checksums"\n(python3 -c ...) dev -> vscode : Redémarrer VS Code vscode --> dev : Plus de warning ✓ note over css, product Deux fichiers dans ~/apps/ = modifiables sans sudo 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
Διαγραφή της προειδοποίησης ακεραιότητας
VS Code αντιχνεύει τις αλλαγές των αρχείων του και εμφανίζει μια μπάρα ειδοποίησης "Your installation is corrupt". Για να το αποφύγουμε, αφαιρούμε τα checksums του`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)
Μετά την επανεκκίνηση, δεν υπάρχει πια προειδοποίηση και τα μενού είναι τελικά αναγνωστικά.
Προσαρμογή της γραμματοσειράς του παραθύρου Explorer — η μάχη
Προσπάθεια 1 : μια παράμετρος που δεν υπάρχει
Προσπαθούμε πρώτα το φυσικό παράμετρο`workbench.tree.fontSize`σε`settings.json` :
{
"workbench.tree.fontSize": 20
}
Αποτέλεσμα :κανένα εφέ. Αυτή η ρύθμιση δεν υπάρχει στο VS Code. Η απόδειξη ότι τα μη αναγνωρισμένα ρυθμίσεις αγνοούνται σιωπηλά.
Προσπάθεια 2: η επέκταση Custom CSS and JS Loader
Εγκαθιστούμε την επέκταση`be5invis.vscode-custom-css` :
~/apps/VSCode-linux-x64/bin/code --install-extension be5invis.vscode-custom-css
Δημιουργούμε ένα αρχείο CSS στο`~/.vscode-custom-css/custom.css`με επιλογείς που στοχεύουν τα στοιχεία του εξερευνητή :
.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;
}
Και αναферόμαστε αυτό το αρχείο στις ρυθμίσεις :
{
"vscode_custom_css.imports": [
"file:///home/user/.vscode-custom-css/custom.css"
]
}
Αποτέλεσμα :Οι αλλαγές δεν εφαρμόζονται.
Ο παγίδα : πρέπει να ενεργοποιήσετε την επέκταση κάθε φορά
Η τεκμηρίωση της επέκτασης είναι διαקרítě σε αυτό το κρίσιμο σημείο: μετά από κάθε τροποποίηση του προσαρμοσμένου CSS, πρέπειυποχρεωτικάΕκτέλεση της εντολής από τη παλέτα :
-
Ctrl+Shift+P→ πληκτρολογώΕνεργοποίηση Προσαρμοσμένου CSS και JS -
Το VS Code ζητά επανεκκίνηση → Αποδοχή
Χωρίς αυτό το βήμα, το CSS δεν ενσωματώνεται ποτέ στο IDE.
Προσπάθεια 3: οι γραμμές επικαλύπτονται
Ακόμη και με`font-size: 22px` et line-height: 36px, τα γράμματα με κάτω γραμμή (g, p, f, b) υπερβαίνουν στις γειτονικές γραμμές. Προσπαθεί να προσθέσει`height` et min-height:
.monaco-list-row {
height: 36px !important;
min-height: 36px !important;
}
Αποτέλεσμα :καμία αλλαγή. VS Code υπολογίζει τα ύψη των γραμμών σε JavaScript και αντικαθιστά τις τιμές CSS.
Η λύση : zoom στον γονικό κοντέινερ
@startuml
skinparam backgroundColor #FEFEFE
rectangle "Tentative 1\nParamètre inexistant" #LightCoral {
card "workbench.tree.fontSize" as t1 {
[VS Code ignore le paramètre]
}
}
rectangle "Tentative 2\nCustom CSS + font-size" #LightYellow {
card ".monaco-list-row { font-size: 22px }" as t2 {
[Texte plus grand\nmais lignes superposées]
}
}
rectangle "Tentative 3\nfont-size + line-height + height" #LightYellow {
card "height: 36px !important" as t3 {
[VS Code override\npar JavaScript]
[Aucun effet]
}
}
rectangle "Solution\nzoom sur conteneur parent" #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
Αντί να αγωνιζόμαστε εναντίον του layout JavaScript, χρησιμοποιούμε την ιδιότητα`zoom`στο κονтеινέρ των γραμμών :
.explorer-viewlet .monaco-list-rows,
.sidebar .monaco-list-rows {
zoom: 1.25;
}
`zoom`Αυξάνει ομοιόμορφα το rendering του container — κείμενο και διαστήματα — χωρίς να σπάσει το layout υπολογισμένο από τον JavaScript engine του VS Code. Ο παράγοντας 1.25 αντιστοιχεί σχεδόν σε μια μεταβολή από 13px σε 16px.
Αποτέλεσμα :τα ονόματα των αρχείων είναι τελικά αναγνωρίσιμα, οι γραμμές είναι σωστά διαχωρισμένες.
Περίληψη των selectors και ότι λειτουργεί
| Προσέγγιση | CSS | Αποτέλεσμα |
|---|---|---|
|
|
Μεγαλύτερο κείμενο αλλά επικάλυπτες γραμμές |
|
|
Καμία επίπτωση (override JS) |
|
|
Επιτυχώς — κείμενο + αναλογικό διάστημα |
Το σενάριο αυτόματης ενημέρωσης
@startuml
skinparam backgroundColor #FEFEFE
autonumber
actor "Développeur\nou 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 : Lire version courante
script -> remote : wget dernière version
script -> script : Comparer versions
alt Version identique
script --> dev : "Already up to date!"
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 complete\n1.xx.yy → 1.zz.ww"
end note
@enduml
Το πρόβλημα
Όταν ο VS Code ενημερώνεται, αντικαθιστά τον φάκελο εγκατάστασης καιδιαγράψε όλα τα patches CSS. Πρέπει να εφαρμόσετε ξανά τις αλλαγές χειροκίνητα κάθε φορά.
Το script `vscode-update.sh
Δημιουργούμε`~/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 ==="
Το σενάριο :
-
Κατέβασε την τελευταία σταθερή έκδοση
-
Έλεγξε εάν η έκδοση διαφέρει από την τρέχουσα
-
Αποθήκευε την τρέχουσα εγκατάσταση (χρονοσημανισμένη) σε`~/apps/vscode-backup/`
-
Αντικατέστησε τον φάκελο εγκατάστασης
-
Επανεφαρμόσουτο πατς CSS του κύριου μενού
-
Διαγράψε τα checksums de `product.json`για να αποφύγουμε την προειδοποίηση ακεραιότητας
| Οι προσαρμογές του παραθύρου Explorer μέσω της επέκτασης Custom CSS και το αρχείο`~/.vscode-custom-css/custom.css`Σορούν στις ενημερώσεις επειδή ζουν έξω από τον φάκελο εγκατάστασης. |
Αρχεία που εμπλέκονται — επισκόπηση
@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 "binaire\nbin/code" as binary #LightCoral
}
rectangle "Configuration utilisateur\n(~/.config/Code/)" #LightGreen {
component "settings.json" as settings #LightGreen
component "extensions/" as extensions #LightGreen
}
rectangle "Customisation persistante\n(~/.vscode-custom-css/)" #SkyBlue {
component "custom.css\n(zoom: 1.25)" as customcss #SkyBlue
}
rectangle "Automatisation\n(~/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
| δρόμος | ρόλος | Διαμένει στις ενημερώσεις; |
|---|---|---|
|
Εγκατάσταση του IDE |
Όχι (αντικατεστημένη) |
|
CSS του workbench (μενού, ανπτυσσόμενα) |
Όχι (επαναπαραχθέν από το script) |
|
Συνοπτικοί έλεγχοι ακεραιότητας |
Όχι (επανακαθαρισμένο από το script) |
|
Σενάριο αυτόματης ενημέρωσης |
Ναι |
|
Ρυθμίσεις χρήστη (fontSize, custom CSS) |
Ναι |
|
Προσαρμοσμένο CSS για τον Explorer (zoom) |
Ναι |
Μάθηματα που μαθήθηκαν
@startuml
skinparam backgroundColor #FEFEFE
skinparam defaultFontName sans-serif
skinparam ArrowColor #444444
rectangle "**Τοπική εγκατάσταση**\n στο home" as install #LightGreen {
card "Όχι sudo\n για τροποποίηση CSS/config" as i1
card "opencode+LLM μπορεί\n να τροποποιήσει τα πάντα" as i2
card "Rollback = επαναφορά\n του backup με χρονοσήμανση" as i3
}
rectangle "**Προσαρμογή CSS**\n zoom vs font-size" as css #LightYellow {
card "zoom > font-size\n για components list" as c1
card "Layout JS override\n height/line-height" as c2
card "Extension Custom CSS\n απαιτεί χειροκίνητη\n ενεργοποίηση (Ctrl+Shift+P)" as c3
}
rectangle "**Αυτοματοποίηση**\n script ενημέρωσης" as auto #LightCoral {
card "Re-patch CSS μετά\n από κάθε ενημέρωση" as a1
card "Διαγραφή checksums\n product.json" as a2
card "Backup με χρονοσήμανση\n πριν την αντικατάσταση" as a3
}
install -right-> css : ensuite
css -right-> auto : enfin
note top of install
Πλήρης έλεγχος χωρίς αύξηση προνομιών
end note
note top of auto
Χωρίς σενάριο, κάθε ενημέρωση
διαγράφει τα CSS patches
end note
@enduml
Η εγκατάσταση στο home ελευθερώνει όλα
Μια τοπική εγκατάσταση σε`~/apps`δίνει πλήρη έλεγχο στον VS Code :
-
δεν`sudo`για να τροποποιήσετε το CSS ή τη διαμόρφωση
-
Ο πράκτορας opencode+LLM μπορεί να γράψει στα αρχεία ρυθμίσεων και τα assets του IDE
-
Απλό rollback: επαναφορά του backup horodaté
zoom` > font-size για τα στοιχεία list
Ο VS Code ελέγχει το ύψος των γραμμών μέσω JavaScript. Τροποποιήστε`font-size`Δεν μπορεί να αλλάξει το ύψος που έχει εκχωρηθεί από το μηχανισμό διάταξης, οδηγεί σε κείμενα που εκπέφτουν. Η ιδιότητα`zoom`στον γονικό κοντέινερ, μεγεθύνει όλο ανάλογα και αποφεύγει αυτό το πρόβλημα.
Η επέκταση Custom CSS απαιτεί ρητή ενεργοποίηση
Δεν είναι μια ρύθμιση "set and forget". Κάθε αλλαγή στο αρχείο CSS προσαρμοσμένο απαιτεί την επανεκτέλεση της "Enable Custom CSS and JS" από τη παλέτα εντολών (Ctrl+Shift+P).
Ενα script ενημέρωσης είναι απαραίτητο
Χωρίς το script, κάθε ενημέρωση του VS Code διαγράφει τα patches CSS του workbench. Το script`vscode-update.sh`αυτοματοποιεί τη λήψη, την αντικατάσταση, το re-patch και το καθαρισμό των checksums.
Γρήγορες αναφορές
-
Λήψη VS Code : https://code.visualstudio.com/Download
-
Πρόσθετο φορτωτής προσαρμοσμένου CSS και JS :`be5invis.vscode-custom-css`
-
Πρόβλημα: Το VS Code ζητάει μια φυσική ρύθμιση για τη γραμματοσειρά του Explorer :https://github.com/microsoft/vscode/issues/149[github.com/microsoft/vscode#149]