okuma süresi : 8 minutes

Neden VS Code içinde kurmak`/opt`veya aracılığıyla`apt`Kendi ev dizininize bir şey koyup, IDE’nizi yazmadan oyun alanı haline getirebildiğiniz zaman`sudo`İşte yerel bir kurulumun ardından menü ve Dosya Gezgini yazı tiplerini büyültmek için yapılan şiddetli mücadele hakkında hikâye

Parcours genel bakışı

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

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

package "Home Kullanıcı (~)" #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 : İndir ve kur
dev --> script : Güncellemeyi başlat
script --> download : wget son sürüm
script --> vscode : Değiştir + yeniden yama CSS
agent --> settings : Écrit config
agent --> customcss : Écrit zoom CSS
agent --> vscode : Patch workbench CSS

note right of vscode
Home içinde kurulum
= sudo kullanmadan tam kontrol
end note
@enduml

Neden: VS Code ev/Home

Sistem kurulumundaki sorun

VS Code kurulu via`apt`, dnf`veya içinde/opt`Doğal CSS’deki tüm değişiklikler, de`product.json`veya kurulum klasörü gerektirir`sudo`.

Ancak, kullanırkenopencode(Kodunuz üzerindeki bir LLM’yi pilotlamak için CLI aracı), ajanın yapabilmesi gereken:

  • Yapılandırma dosyalarına yazmak`~/.config/Code/User/settings.json`) — ça, bu zaten evde.

  • Değiştir IDE varlıklarını (workbench CSS,product.json) gelişmiş özelleştirmeler için — bu, sudo olmadan engelleniyor

Çözüm: yerel bir kurulum

Resmi tarball arşivi indirilir ve doğrudan içinde açılır.~/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

İkili dosya şu anda`~/apps/VSCode-linux-x64/bin/code`. Hiçbiri`sudo`Herhangi bir dosyayı okumak, düzenlemek veya değiştirmek için gerekli yok.~/apps/VSCode-linux-x64/.

Somut avantajlar

@startuml
skinparam backgroundColor #FEFEFE

rectangle "Kurulum Sistemin(/opt, apt, dnf)" #LightCoral {
    card "VS Code kök sahibi" {
        [CSS du workbench : sudo requis]
        [product.json : sudo requis]
        [Dossier d'install : non modifiable]
    }
}

rectangle "Kurulum Evn(~/apps)" #LightGreen {
    card "VS Code kullanıcı sahibi" {
        [CSS du workbench : libre]
        [product.json : libre]
        [Dossier d'install : libre]
        [Script update maison]
    }
}

"Kurulum Sistemin(/opt, apt, dnf)" -right-> "Kurulum Evn(~/apps)" : **Non, merci**\nJe prends le home

note bottom of "Kurulum Evn(~/apps)"
opencode+LLM ajan, IDE dosyalarını herhangi bir ayrıcalık artışı olmadan değiştirebilir.
end note
@enduml
Avantaj Ayrıntı

Sudo yok

IDE’deki tüm dosyalar kullanıcıya aittir.

Doğrudan CSS Düzenlemesi

Yamalanabilir`workbench.desktop.main.css`yetki yükseltme olmadan

Kendi yapımı güncelleme komut dosyası

Basit bir kabuk betiği, otomatik olarak indirir, değiştirir ve tekrar yama

İzolasyon

Sistem kurulumu temiz; rollback = klasörü sil

Ana menü yazı tipini özelleştir

tespit

Menü çubuğunun (Dosya, Düzenle, Görünüm…) ve açılır menülerinin varsayılan yazı tipi çok küçük; VS Code bunu değiştirmek için herhangi bir ayar sunmaz.

Teknik: doğrudan CSS yaması

Dosyanın sonuna CSS eklenir.workbench.desktop.main.css(empty)

@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 : Kurallar ekle font-size\n(.menubar-menu-title, etc.)
dev -> vscode : VS Code'u yeniden başlat
vscode -> vscode : CSS yamalı yükle
vscode --> dev : Menüler ve açılır menüler 23px'te/22px ✓

== Suppression warning ==
vscode --> dev : ⚠️ "Kurulumunuz bozuk
dev -> product : Anahtar "checksums"\n(python3 -c ...)
dev -> vscode : VS Code'u yeniden başlat
vscode --> dev : Daha fazla uyarı yok ✓

note over css, product
İki dosya __~/apps/ içinde
= sudo olmadan düzenlenebilir
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

Bütünlük uyarısını kaldır

VS Code dosyalarındaki değişiklikleri algılar ve "Your installation is corrupt" uyarı çubuğunu gösterir. Bunun önüne geçmek için checksumları sileriz.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)

Yeniden başlatıldıktan sonra artık uyarı kalmadı ve menüler artık okunabilir hâle geldi.

Gezgini Bölmesi Yazı Tipini Özelleştir — Mücadele

Deneme 1 : var olmayan bir parametre

İlk önce yerel parametreyi deneriz`workbench.tree.fontSize`içinde`settings.json`I’m sorry, but I didn’t see any French text to translate. Could you please provide the content you’d like translated from French to Turkish?

{
    "workbench.tree.fontSize": 20
}

Sonuç :Etki yok. Bu ayar VS Code’da bulunmaz. Tanınmayan ayarların sessizce yoksayıldığı kanıtı.

2. Deneme: Custom CSS and JS Loader uzantısı

Uzantıyı kuruyoruz`be5invis.vscode-custom-css`:

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

Bir CSS dosyası içinde oluşturuyoruz.`~/.vscode-custom-css/custom.css`Dosya Gezgini’nin öğelerini hedefleyen seçicilerle

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

Ve bu dosyayı ayarlar içinde gösteririz:

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

Sonuç :Değişiklikler geçerli değil.

Tuzağı: her zamanki gibi uzantıyı etkinleştirmek zorundayız. (No, that’s not correct.)

Let’s produce concise translation:

"Tuzağı: her seferinde eklentiyi etkinleştirmek gerekir."

But we might choose exact phrase: "Tuzak: her zaman uzantıyı etkinleştirmek zorundayız."

Pick one: "Tuzağı: her zaman uzantıyı etkinleştirmek gerekir."

Will go with that.

</think>

Tuzağı: her zaman uzantıyı etkinleştirmek gerekir.

Eklenti dokümantasyonu bu kritik noktada net değildir: Her özel CSS değişikliğinde yapmanız gerekiyorkesinliklePaletten komutunu çalıştır :

  1. Ctrl+Shift+P→ yazÖzel CSS ve JS’yi Etkinleştir

  2. VS Code yeniden başlatma istiyor → kabul et

Bu adım olmadan, CSS hiçbir zaman IDE’ye enjekte edilmez.

Deneme 3 : çizgiler üst üste geliyor.

ile birlikte bile`font-size: 22px` et line-height: 36px, jambali harfler (g, p, f, b) komşu satırlara taşarlar. Eklemeye çalışılıyor`height` et min-height(Empty)

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

Sonuç :hiçbir değişiklik. VS Code satır yüksekliğini JavaScript kullanarak hesaplar ve CSS değerlerini geçersiz kılar.

Çözüm: zoom ana kapsayıcı

@startuml
skinparam backgroundColor #FEFEFE

rectangle "Deneme 1\nParamètre olayan" #LightCoral {
    card "workbench.tree.fontSize" as t1 {
        [VS Code ignore le paramètre]
    }
}

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

rectangle "Deneme 3\nfont-size + line-height + height" #LightYellow {
    card "height: 36px !important" as t3 {
        [VS Code override\npar JavaScript]
        [Aucun effet]
    }
}

rectangle "Çözüm\nparent kapsayıcı üzerinde zoom" #LightGreen {
    card ".monaco-list-rows { zoom: 1.25 }" as t4 {
        [Texte + espacement\nproportionnels]
        [Layout JS respecté]
        [✓ Résultat conforme]
    }
}

t1 -down-> t2 : Parametre yok mu? \nOn dener CSS
t2 -down-> t3 : Üst üste bindirgen çizgiler? \\nOn yüksekliği zorunlu kılar.
t3 -down-> t4 : Override JS ?\nOn kullanır zoom

@enduml

JavaScript düzeniyle mücadele etmek yerine, özelliği kullanırız.`zoom`satır konteyneri üzerinde :

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

`zoom`Konteynerin renderini metin ve boşluk birlikte uniform olarak büyütür; VS Code’un JavaScript motorunun hesapladığı layout’u bozmadan. 1.25 faktörü yaklaşık olarak 13px’ten 16px’e geçişe denk geliyor.

Sonuç :dosya isimleri artık okunabilir, satırlar doğru şekilde aralıklı.

Seçicilerin özeti ve çalışan şeyler

Yaklaşım CSS Sonuç

font-size`üzerine.monaco-list-row`

font-size: 22px !important

Metin daha büyük ancak satırlar üst üste

line-height+height`üstte.monaco-list-row`

line-height: 36px; height: 36px

Etki yok (JS geçersiz)

zoom`üzerine.monaco-list-rows`

zoom: 1.25

Başarılı — metin + boşluk orantısal

Otomatik güncelleme skripti

@startuml
skinparam backgroundColor #FEFEFE
autonumber

actor "Geliştirici\nveya 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 : Geçerli sürümü oku
script -> remote : wget son sürüm
script -> script : Versiyonları karşılaştır

alt Version identique
    script --> dev : "Zaten güncel!"
else Nouvelle version
    script -> backup : Mevcut kurulumu kaydet\n(horodatée)
    script -> local : rm -rf eski kurulum
    script -> local : mv yeni kurulum
    script -> css : patch ekle CSS\n(menubar 23px, dropdown 22px)
    script -> product : checksums\n(python3) sil
    script --> dev : "Güncelleme tamamlandın1.xx.yy → 1.zz.ww"
end note
@enduml

Sorun

VS Code güncellendiğinde, kurulum klasörünü değiştirir veTüm CSS yamalarını siler. Değişiklikleri her zaman manuel olarak yeniden uygulamamız gerekiyor.

Komut dosyası `vscode-update.sh

Oluşturuyoruz`~/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 ==="

Betik:

  1. En son stabil sürümü indir

  2. Mevcut sürümle farklı olup olmadığını kontrol et

  3. Yedekle geçerli kurulumu (zaman damgalı) içinde`~/apps/vscode-backup/`

  4. Kurulum klasörünü değiştir

  5. Tekrar uygularana menünün CSS yaması

  6. Checksumları sil de `product.json`entegrite uyarısından kaçınmak için

Gezin bölmesindeki özelleştirme(ler), özel CSS eklentisi ve dosya aracılığıyla`~/.vscode-custom-css/custom.css`Güncellemeleri hayatta kalırlar çünkü kurulum klasörünün dışında yaşıyorlar.

İlgili Dosyalar — Genel Bakış

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

rectangle "VS Code Kurulumu\n(~/apps/VSCode-linux-x64/)" #LightCoral {
    component "workbench.desktop\n.main.css" as css #LightCoral
    component "product.json" as product #LightCoral
    component "ikili\nbin/code" as binary #LightCoral
}

rectangle "Kullanıcı yapılandırması\n(~/.config/Code/)" #LightGreen {
    component "settings.json" as settings #LightGreen
    component "uzantılar/" as extensions #LightGreen
}

rectangle "Kalici özelleştirme\n(~/.vscode-custom-css/)" #SkyBlue {
    component "custom.css\n(zoom: 1.25)" as customcss #SkyBlue
}

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

script ..> css : MAJ sonrası yeniden yama
script ..> product : Checksum'leri sil\nMAJ sonra
settings --> customcss : Referans via\nvscode_custom_css.imports
extensions ..> css : Custom CSS Loader\nenjekte custom.css

note bottom of css
Güncellemelerde hayatta kalmaz
Betik tarafından yeniden yamalandı
end note

note bottom of customcss
**Kalır** güncellemelerde
Kurulum klasörünün dışında yaşıyor.
end note

note bottom of settings
**Yaşar** güncellemelerde
~/.config/ içinde
end note
@enduml
Yol Rol Güncellemelerle hayatta kalır mı?

~/apps/VSCode-linux-x64/

IDE kurulumu

Hayır (değiştirildi)

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

workbench CSS (menu, dropdowns)

Non (script tarafından yeniden yamalandı)

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

Bütünlük kontrol toplamları

Hayır (script tarafından yeniden temizlendi)

~/apps/vscode-update.sh

Otomatik güncelleme betiği

Evet

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

Kullanıcı ayarları (fontSize, özel CSS)

Evet

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

Özel CSS Explorer (yakınlaştırma) için

Evet

Öğrenilen dersler

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

rectangle "Yerel kurulum\n ev dizini içinde" as install #LightGreen {
    card "sudo kullanmayın\nCSS/config yi değiştirin" as i1
    card "opencode+LLM\nher şeyi değiştirebilir" as i2
    card "Rollback = geri yüklemek\n zaman damgalı yedek" as i3
}

rectangle "**Özelleştirme CSS**\nölçekleme vs yazı boyutu" as css #LightYellow {
    card "zoom > font-size\n bileşenler listesi için" as c1
    card "Düzen JS geçersiz kılma\n height/line-height" as c2
    card "Custom CSS Uzantısı\n etkinleştirme gerektirir\n manuel (Ctrl+Shift+P)" as c3
}

rectangle "Otomasyon\ngüncelleme betiği" as auto #LightCoral {
    card "Yeniden yamalama CSS\n sonra her MAJ" as a1
    card "Checksumları sil\n product.json" as a2
    card "Zaman damgası eklenmiş yedekleme\ndeğiştirmeden önce" as a3
}

install -right-> css : ardından
css -right-> auto : nihayet

note top of install
Yetki yükseltimi gerekmeden tam denetim
end note

note top of auto
Scriptsiz, her MAJ
CSS yamalarını siler
end note
@enduml

Ev klasörüne kurulum yapmak her şeyi serbest bırakır

Bir yerel kurulum içinde`~/apps`sağlar bir tam kontrol üzerinde VS Code :

  • yok`sudo`CSS veya yapılandırmayı düzenlemek için

  • Opencode+LLM agenti, IDE’nin yapılandırma dosyalarına ve varlıklarına yazabilir.

  • Rollback trivi : zaman damgalı yedeği geri yükle

zoom` > font-size bileşenler listesi için

VS Code, JavaScript kullanarak satır yüksekliğini kontrol eder. Düzenle`font-size`Düzenleme motoru tarafından ayrılan yüksekliğe müdahale edilememesi, taşan metinlere sebep olur. Özellik`zoom`Ana kapsayıcıyı büyütmek, tüm içeriği orantılı olarak genişletir ve bu sorunu aşar.

Custom CSS uzantısı açıkça etkinleştirilmesi gerekiyor

Bu bir "set and forget" parametresi değil. Her CSS custom dosyasındaki değişiklik "Enable Custom CSS and JS"yi komut paletinden yeniden çalıştırmayı gerektirir (Ctrl+Shift+P).

Bir güncelleme komut dosyası zorunludur

Script olmadan, her VS Code güncellemesi workbench’ten CSS yamalarını siler. Script`vscode-update.sh`İndirme, değiştirme, yeniden yama ve checksum temizlemeyi otomatikleştirir

Hızlı referanslar

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

  • Özel CSS ve JS Yükleyici Eklentisi:`be5invis.vscode-custom-css`

  • VS Code’un keşif gezgini yazı tipi için yerel bir parametre istemesini içeren sorun :https://github.com/microsoft/vscode/issues/149[github.com/microsoft/vscode#149]

İlgili Makaleler