Πίνακας περιεχομένων
χρόνος ανάγνωσης : 8 minutes

Γιατί να εγκαταστήσετε 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, πρέπειυποχρεωτικάΕκτέλεση της εντολής από τη παλέτα :

  1. Ctrl+Shift+P→ πληκτρολογώΕνεργοποίηση Προσαρμοσμένου CSS και JS

  2. Το 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 Αποτέλεσμα

font-size`σε.monaco-list-row`

font-size: 22px !important

Μεγαλύτερο κείμενο αλλά επικάλυπτες γραμμές

line-height+height`σε.monaco-list-row`

line-height: 36px; height: 36px

Καμία επίπτωση (override JS)

zoom`σε.monaco-list-rows`

zoom: 1.25

Επιτυχώς — κείμενο + αναλογικό διάστημα

Το σενάριο αυτόματης ενημέρωσης

@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 ==="

Το σενάριο :

  1. Κατέβασε την τελευταία σταθερή έκδοση

  2. Έλεγξε εάν η έκδοση διαφέρει από την τρέχουσα

  3. Αποθήκευε την τρέχουσα εγκατάσταση (χρονοσημανισμένη) σε`~/apps/vscode-backup/`

  4. Αντικατέστησε τον φάκελο εγκατάστασης

  5. Επανεφαρμόσουτο πατς CSS του κύριου μενού

  6. Διαγράψε τα 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
δρόμος ρόλος Διαμένει στις ενημερώσεις;

~/apps/VSCode-linux-x64/

Εγκατάσταση του IDE

Όχι (αντικατεστημένη)

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

CSS του workbench (μενού, ανπτυσσόμενα)

Όχι (επαναπαραχθέν από το script)

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

Συνοπτικοί έλεγχοι ακεραιότητας

Όχι (επανακαθαρισμένο από το script)

~/apps/vscode-update.sh

Σενάριο αυτόματης ενημέρωσης

Ναι

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

Ρυθμίσεις χρήστη (fontSize, custom CSS)

Ναι

~/.vscode-custom-css/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]

Σχετικά άρθρα