VS Code Home dizini : yerel kurulum ve font özelleştirmesi sudo kullanılmadan
Yayınlandı: 17 April 2026
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 :
-
Ctrl+Shift+P→ yazÖzel CSS ve JS’yi Etkinleştir -
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ç |
|---|---|---|
|
|
Metin daha büyük ancak satırlar üst üste |
|
|
Etki yok (JS geçersiz) |
|
|
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:
-
En son stabil sürümü indir
-
Mevcut sürümle farklı olup olmadığını kontrol et
-
Yedekle geçerli kurulumu (zaman damgalı) içinde`~/apps/vscode-backup/`
-
Kurulum klasörünü değiştir
-
Tekrar uygularana menünün CSS yaması
-
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ı? |
|---|---|---|
|
IDE kurulumu |
Hayır (değiştirildi) |
|
workbench CSS (menu, dropdowns) |
Non (script tarafından yeniden yamalandı) |
|
Bütünlük kontrol toplamları |
Hayır (script tarafından yeniden temizlendi) |
|
Otomatik güncelleme betiği |
Evet |
|
Kullanıcı ayarları (fontSize, özel CSS) |
Evet |
|
Ö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]