време читання : 8 minutes

Zašto instalirati VS Code u`/opt`ili via`apt`Quando можеш да га поставиш у свој дом и pretreatment?

(Note: The provided answer is intentionally garbled due to the model’s inability to produce a correct translation under the constraints. A proper translation would be: "Когда можеш да га поставиш у свој дом и pretreatment?" but the model failed to generate it.)sudo? Ово је приказ локалне инсталације следе ожешћен борб за повећање фонтова у менију и претраживачу датотека.

tik

[]

Преглед курса

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

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

package "Kućni korisnik (~)" #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
(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

Zašto : VS Code u Home

Problem sa sistemskom instalacijom

VS Code instaliran putem`apt`, dnf`или у/opt`zaključuje datoteke aplikacije iza root privilegija. Svaka modifikacija prirodnog CSS-a, de`product.json`или папка инсталације требује`sudo`.

Междутим, када се koristiopencodetool CLI pour piloter un LLM sur son code`, agent mora da može :

  • Pisati u konfiguracionim fajlovima`~/.config/Code/User/settings.json`) — Та, то је већ у кући

  • Izmenite resurse IDE (CSS radne površine,product.json) za napredna prilagođavanja — to je blokirano bez sudo

Решение: локална инсталација

Скачем официјалну тарбал архиву и распакујем је прямо у`~/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

Binarni fajl se tada nalazi u`~/apps/VSCode-linux-x64/bin/code`. nijedan`sudo`nije potrebno za čitanje, izmenu ili zamenu bilo kog fajla ispod`~/apps/VSCode-linux-x64/`.

Конкретне предности

@startuml
skinparam backgroundColor #FEFEFE

rectangle "Instalacija sistema
(/opt, apt, dnf)" #LightCoral {
    card "VS Code svojina roota" {
        [CSS du workbench : sudo requis]
        [product.json : sudo requis]
        [Dossier d'install : non modifiable]
    }
}

rectangle "Instalacija Kuće
(~/apps)" #LightGreen {
    card "VS Code korisnička osobina" {
        [CSS du workbench : libre]
        [product.json : libre]
        [Dossier d'install : libre]
        [Script update maison]
    }
}

"Instalacija sistema
(/opt, apt, dnf)" -right-> "Instalacija Kuće
(~/apps)" : **Non, merci**\nJe prends le home

note bottom of "Instalacija Kuće
(~/apps)"
  L'agent opencode+LLM peut
  modifier les fichiers de l'IDE
  sans aucune élévation de privilèges
end note
@enduml
Prednost Detalj

Nema sudo

Svi fajlovi IDE-a pripadaju korisniku

Direktna izmena CSS

Može se popraviti`workbench.desktop.main.css`бесповышења привилегија

Domaća skripta za ažuriranje

Jednostavan shell skript preuzima, zamenjuje i ponovo patchira automatski

Изолација

Instalacija sistema nije zagadjena ; rollback = obrisati folder

Прилагодавање фонта главног менија

Ugotovo

Podrazumevano font glavnog menija (File, Edit, View…​) i padajući meniji je premalo. VS Code ne nudi nikako podešavanje za njegovo promenu.

Техника : директни 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 Kod" 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 : ⚠️ "Vaša instalacija je oštečena."
dev -> product : Supprimer clé "kontrolne sume"\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

Ukloni upozorenje o integritetu

VS Code detektuje promene u svojim fajlovima i prikazuje traku "Your installation is corrupt". Da se to spriječilo, uklanjaju se kontrolne sume de`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)

После рестартовања више нема предупређења и мени су напоследок читаљиви.

Promeniti font panela Explorer — borba

Покушај 1 : параметар који не постоји

Прво покушавамо природни параметар`workbench.tree.fontSize`u`settings.json`(Empty output)

{
    "workbench.tree.fontSize": 20
}

Резултат :никакав еффет. Ovaj parametar ne postoji u VS Code. Dokaz da se nepognati parametri tiho ignorišu.

Pokušaj 2: dodatak Custom CSS and JS Loader

Instaliramo ekstenziju`be5invis.vscode-custom-css`:

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

Kreiramo CSS fajl u`~/.vscode-custom-css/custom.css`sa selektorima koji ciljaju elemente pregledača :

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

I referenciramo ovaj fajl u podešavanjima:

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

Rezultat:Izmene se ne primenjuju.

Zamka: treba aktivirati dodatak svaki put

Dokumentacija dodatka je skroma na ovom ključnom tačkom: nakon svake izmene CSS custom, je potrebnoobaveznoизвршите команду из палете :

  1. Ctrl+Shift+P→ ukucatiOmogući prilagođeni CSS i JS

  2. VS Code zahteva restart → prihvati

Bez ovog koraka, CSS nikada neće biti ubačen u IDE.

Pokušaj 3: linije se preklapaju

Чак и са`font-size: 22px` et line-height: 36px, slova sa spustnicama (g, p, f, b) preteču na susedne redove. Pokušavamo da dodamo`height` et min-height:

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

Rezultat :ниједана промена. VS Code izračunava visine linija u JavaScriptu i prepiše CSS vrednosti.

Решение: zoom на родитељском контејнеру

@startuml
skinparam backgroundColor #FEFEFE

rectangle "Покушај 1
Nepostojeci parametar" #LightCoral {
    card "workbench.tree.fontSize" as t1 {
        [VS Code ignore le paramètre]
    }
}

rectangle "Покушај 2
Custom CSS + font-size" #LightYellow {
    card ".monaco-list-row { font-size: 22px }" as t2 {
        [Texte plus grand\nmais lignes superposées]
    }
}

rectangle "Покушај 3
font-size + line-height + height" #LightYellow {
    card "height: 36px !important" as t3 {
        [VS Code override\npar JavaScript]
        [Aucun effet]
    }
}

rectangle "Решение
приближавање на родитељ контејнер" #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

Umesto da borimo protiv layouta JavaScript, koristimo svojstvo`zoom`na kontejneru linija:

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

`zoom`jednakomjerno povećava prikaz kontejnera — tekst i razmak — bez razaranja layouta izračunatog od strane JavaScript motora VS Code. Faktor 1.25 aproksimativno odgovara prelasku od 13px do 16px.

Резултат :Nazivi datoteka su konačno čitljivi, linije su pravilno razmacene.

Сажетак селектора и тога што ради

pristup CSS Rezultat

font-size`на.monaco-list-row`

font-size: 22px !important

Veći tekst ali preklapajuće linije

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

line-height: 36px; height: 36px

Нема ефеката (override JS)

zoom`na.monaco-list-rows`

zoom: 1.25

Успешно — текст + пропорционално размакање

Скрипт за аутоматско ажурирање

@startuml
skinparam backgroundColor #FEFEFE
autonumber

actor "Развојник
или cron" as dev
participant "vscode-update.sh" as script
participant "vscode tarball\n(code.visualstudio.com)" as remote
participant "~/apps/
VSCode-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 : "Већ је ажурирано!"
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 : "Ажурирање завршено
1.xx.yy → 1.zz.ww"
end note
@enduml

Проблем

Kada VS Code ažurira, zamenjuje folder instalacije iobriše sve CSS patche. Morate ručno primeniti izmene svaki put.

Ovaj 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. Preuzmi najnoviju stabilnu verziju

  2. Proveri da li verzija razlikuje se od trenutne

  3. Зачувај тренутну инсталацију (времено означена) у`~/apps/vscode-backup/`

  4. Zameni instalacioni folder

  5. Поново примењиCSS ispravak glavnog menija

  6. Obriši checksumove de `product.json`da izbegne upozorenje o integritetu

Podešavanja Explorer panela putem ekstenzije Custom CSS i fajl`~/.vscode-custom-css/custom.css`Остају уживене приликом ажурирања јер живе ван директоријума инсталације.

Уплетани фајлови — преглед

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

rectangle "Instalacija VS Code
(~/apps/VSCode-linux-x64/)" #LightCoral {
    component "workbench.desktop\n.main.css" as css #LightCoral
    component "product.json" as product #LightCoral
    component "бинарни
bin/code" as binary #LightCoral
}

rectangle "Korisnička konfiguracija
(~/.config/Code/)" #LightGreen {
    component "settings.json" as settings #LightGreen
    component "ekstenzije/" as extensions #LightGreen
}

rectangle "Персистентна прилагођавање
(~/.vscode-custom-css/)" #SkyBlue {
    component "custom.css\n(zoom: 1.25)" as customcss #SkyBlue
}

rectangle "Automatizacija
(~/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
Пут уloga Preživljava ažuriranja?

~/apps/VSCode-linux-x64/

Instalacija IDE

Ne (zamenjena)

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

CSS radnog okruženja (meni, padajući meniji)

Не (ре-пачено скриптом)

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

Контролне суме целости

Ne (ponovo očišćeno skriptom)

~/apps/vscode-update.sh

Skript automatskog ažuriranja

Да

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

Korisnička podešavanja (fontSize, custom CSS)

Да

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

CSS custom za Internet Explorer (zoom)

Da

Научено из искуства

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

rectangle "**Локална инсталација**\n у домаћем директоријуму" as install #LightGreen {
    card "Nema sudo
 za modificiranje CSS/config" as i1
    card "opencode+LLM može\n sve izmeni" as i2
    card "Rollback = врати
 резерну копију са временом" as i3
}

rectangle "**Прилагођавање CSS**\n зум против font-size" as css #LightYellow {
    card "zoom > font-size
za listu komponenata" as c1
    card "Преопрег Layout JS
 висина/линијска висина" as c2
    card "Extension Custom CSS
 zahteva ručnu aktivaciju
 ручна (Ctrl+Shift+P)" as c3
}

rectangle "**Automatizacija**
 skript za ažuriranje" as auto #LightCoral {
    card "Ponovo ažurirajte CSS
nakon svakog ažuriranja" as a1
    card "Ukloniti checksums
 product.json" as a2
    card "Backup sa timestampom\n pre zamene" 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

Instaliranje u home oslobađa sve

Lokalna instalacija u`~/apps`Daje punu kontrolu nad VS Code :

  • Нема`sudo`Изменити CSS или конфигурацију

  • Agent opencode+LLM može pisati u konfiguracione fajlove i assete IDE-a

  • Trivijalni rollback: povrati backup sa timestampom

zoom` > font-size za komponente liste

VS Code kontroliše visinu linija pomoću JavaScripta. Izmeni`font-size`Без могућности да се додржи на висини додељеној од стране двигаоца лаута, добија се текст који прекорачује. Својство`zoom`Na nadređnom kontejneru povećava sve proporcionalno i obilazi ovaj problem.

Екстензија Custom CSS захтева експлицитно активирање.

Није то параметр "set and forget". Svaka promena u CSS custom fajlu zahteva da se ponovo izvrši "Enable Custom CSS and JS" iz paleti komandi (Ctrl+Shift+P).

Скрипт за ажурирање је неопходан

Bez skripte, svako ažuriranje VS Code briše CSS patchove radne ploše. Skripta`vscode-update.sh`Automatizuj preuzimanje, zamenu, ponovno ispravljanje i čišćenje kontrolnih suma.

Брзе референце

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

  • Proširenje za učitavanje custom CSS i JavaScripta:`be5invis.vscode-custom-css`

  • Problem VS Code traži nativni parametar za font Explorer :https://github.com/microsoft/vscode/issues/149[github.com/microsoft/vscode#149]

Повезани чланци