زمان خواندن : 8 minutes

چرا VS Code را در`/opt`یا از طریق`apt`وقتی می‌توان آن را در خانه قرار داد و IDE خود را به یک زمین بازی تبدیل کند، بدون اینکه هرگز چیزی تایپ کند`sudo`? این داستان نصب محلی است و سپس یک جنگ سفت و سخت برای بزرگ کردن فونت‌های منو و یکسپلورر فایل

توک

[]

بررسی کلی مسیر

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

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

package "خانه کاربر (~)" #LightGreen {
    package "~/apps/" {
        component "VS Code
(بسته tar)" 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

چرا: VS Code در Home

مشکل با نصب سیستم

VS Code نصب شده از طریق`apt`, dnf`یا در/opt`قفل می‌کند فایل‌های برنامه را پشت مجوزهای root. هرگونه تغییر در CSS بومی،product.json`یا پوشه نصب نیاز دارد`sudo.

اما، وقتی که استفاده می‌کنندopencode(tool CLI pour piloter un LLM sur son code), عامل نیاز دارد تا بتواند :

  • نوشتن در فایل‌های پیکربندی`~/.config/Code/User/settings.json`) — این، قبلاً در خانه است

  • تغییر دارایی‌های 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`.". هیچ" ? Wait we need period then space then translation. So output: ". هیچ". Ensure no extra spaces at start or end. So exactly: ". هیچ". Let’s output that.

</think> .". هیچ"? Actually we need a space after period: ". nichts"? No. So: ". هیچ". Let’s output exactly that.sudo`برای خواندن، ویرایش یا جایگزینی هیچ فایلی زیر لازم نیست~/apps/VSCode-linux-x64/`.

مزایات ملموس

@startuml
skinparam backgroundColor #FEFEFE

rectangle "نصب سیستم\n(/opt, apt, dnf)" #LightCoral {
    card "VS Code مالک ریشه" {
        [CSS du workbench : sudo requis]
        [product.json : sudo requis]
        [Dossier d'install : non modifiable]
    }
}

rectangle "نصب خانه
(~/apps)" #LightGreen {
    card "VS Code متعلق به کاربر" {
        [CSS du workbench : libre]
        [product.json : libre]
        [Dossier d'install : libre]
        [Script update maison]
    }
}

"نصب سیستم\n(/opt, apt, dnf)" -right-> "نصب خانه
(~/apps)" : **Non, merci**\nJe prends le home

note bottom of "نصب خانه
(~/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`بدون ارتقای دسترسی

اسکریپت به‌روزرسانی خانگی

یک اسکریپت شل ساده، به‌طور خودکار دانلود، جایگزین و ری‌پاتچ می‌کند

عزلت

نصب سیستم آلوده نیست؛ rollback = حذف پوشه

فونت منوی اصلی را سفارشی کنید

نتیجه

قلم پیش‌فرض منوی اصلی (File, Edit, View…​) و منوهای کشویی بسیار کوچک است. VS Code هیچ تنظیماتی برای تغییر آن ارائه نمی‌دهد.

تکنیک: patch CSS مستقیم

CSS را به انتهای فایل اضافه می‌کنیم.workbench.desktop.main.css(Empty output)

@startuml
skinparam backgroundColor #FEFEFE
autonumber

actor Développeur as dev
participant "workbench.desktop
.main.css" as css
participant "product.json" as product
participant "وی اس کد" 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 : ⚠️ "نصب شما خراب است"
dev -> product : Supprimer clé "چک‌سمرها"\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)

بعد از راه‌اندازی دوباره، هیچ warningی نیست و منوها در نهایت قابل خواندن هستند.

فونت پنل Explorer را سفارشی کنید — مبارزه

تلاش 1: پارامتری که وجود ندارد

اولاً پارامتر بومی را امتحان می‌کنیم`workbench.tree.fontSize`در`settings.json`:

{
    "workbench.tree.fontSize": 20
}

نتیجه :هیچ اثر. این پارامتر در VS Code موجود نیست. شواهد نشان می‌دهد که پارامترهای ناشناخته به‌طور ساکت نادیده گرفته می‌شوند.

تلاش ۲ : افزونه 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"
    ]
}

نتیجه :تغییرات اعمال نمی‌شوند.

فخ: باید هر بار افزونه را فعال کنید

مستندات افزونه در این نکته مهم مخفی است : پس از هر تغییر در 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 "تلاش 1
پارامتر وجود ندارد" #LightCoral {
    card "workbench.tree.fontSize" as t1 {
        [VS Code ignore le paramètre]
    }
}

rectangle "آزمایش 2
CSS سفارشی + font-size" #LightYellow {
    card ".monaco-list-row { font-size: 22px }" as t2 {
        [Texte plus grand\nmais lignes superposées]
    }
}

rectangle "تلاش ۳
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

به جای مبارزه با چیدمان جاوا اسکریپت، ما از ویژگی استفاده می‌کنیم`zoom`sur le conteneur des lignes : becomes

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

`zoom`یکنواختانه rendu conteneur را — متن و فاصله — بدون اینکه layout محاسبه‌شده توسط موتور JavaScript VS Code را بشکند، بزرگ می‌سازد. ضریب 1.25 تقریباً معادل تغییر از 13px به 16px است.

نتیجه :در نهایت نام‌های فایل‌ها قابل خواندن هستند، خط‌ها به درستی فاصله‌گذاری شده‌اند.

خلاصه selectorها و آنچه کار می‌کند

رویکرد 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 "توسعه‌دهنده
یا cron" as dev
participant "vscode-update.sh" as script
participant "vscode tarball
(code.visualstudio.com)" as remote
participant "~/apps/\nVSCode-linux-x64" as local
participant "~/apps/\nvscode-backup/" as backup
participant "workbench
.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 : "به‌روزرسانی کامل\n1.xx.yy → 1.zz.ww"
end note
@enduml

مشکل

هنگامی که VS Code به‌روز می‌شود، پوشه نصب آن را جایگزین می‌کند وتمام پچ‌های CSS را حذف کن. باید تغییرات را به صورت دستی در هر بار دوباره اعمال کرد

اسکریپت `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. پشتیبان بگیر از نصب فعلی (دارای timestamp) در`~/apps/vscode-backup/`

  4. پوشه نصب را جایگزین کنید

  5. دوباره اعمال کنپاتچ CSS منو اصلی

  6. چک‌سام‌ها را حذف کن de `product.json`برای جلوگیری از هشدار یکپارچگی

سفارشی‌سازی‌های پنل کاوینده از طریق افزونه Custom CSS و فایل`~/.vscode-custom-css/custom.css`آنها به دلیل اینکه خارج از پوشهٔ نصب قرار دارند، به‌روزرسانی‌ها را پشت سر می‌گذارند.

فایل‌های مورد استفاده — نمای کلی

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

rectangle "نصب 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 "پیکربندی کاربر
(~/.config/Code/)" #LightGreen {
    component "settings.json" as settings #LightGreen
    component "افزونه‌ها/" as extensions #LightGreen
}

rectangle "سفارشی‌سازی پایدار\n(~/.vscode-custom-css/)" #SkyBlue {
    component "custom.css\n(zoom: 1.25)" as customcss #SkyBlue
}

rectangle "اتوماسیون
(~/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 (منوی کشویی)

خیر (دوباره پچ شده توسط اسکریپت)

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

چک‌سام‌های یکپارچگی

نه (باز پاکسازی شده توسط اسکریپت)

~/apps/vscode-update.sh

اسکریپت به‌روزرسانی خودکار

بله

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

تنظیمات کاربر (fontSize, CSS سفارشی)

بله

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

CSS سفارشی برای اکسپلورر (بزرگ‌نمایی)

بله

دروس آموختگی

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

rectangle "**نصب محلی**\n در خانه" as install #LightGreen {
    card "sudo نیست
 برای ویرایش CSS/config" as i1
    card "opencode+LLM می‌تواند\n همه چیز را تغییر دهد" as i2
    card "Rollback = بازگردانی
 بکاپ با timestamp" as i3
}

rectangle "**CSS سفارشی**
بزرگنمایی vs اندازه فونت" as css #LightYellow {
    card "بزرگنمایی > اندازه-فونت\n برای لیست کامپوننت‌ها" as c1
    card "Layout JS override
 height/line-height" as c2
    card "CSS سفارشی افزونه
نیاز به فعال‌سازی
دستی (Ctrl+Shift+P)" as c3
}

rectangle "اتوماسیون
اسکریپت به‌روزرسانی" as auto #LightCoral {
    card "بازپatch CSS پس از
هر به‌روزرسانی" as a1
    card "حذف جمع‌بررسی‌ها\n product.json" as a2
    card "بکاپ با timestamp
قبل از جایگزینی" 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

نصب در home همه چیز را آزاد می‌کند

یک نصب محلی در`~/apps`کنترل کامل بر VS Code را می‌دهد:

  • نه`sudo`برای تغییر CSS یا تنظیمات

  • آjánک opencode+LLM می‌تواند در فایل‌های تنظیمات و منابع IDE بنویسد.

  • بازگرداندن trivial: بازگرداندن بکاپ دارای تاریخ و زمان

zoom` > font-size برای اجزای لیست

VS Code از طریق JavaScript ارتفاع خطوط را کنترل می‌کند. ویرایش`font-size`عدم توانایی در دسترس کردن به ارتفاع اختصاص‌یافته توسط موتور چیدمان، منجر به débord شدن متن می‌شود. ویژگی`zoom`بر روی والد conteneur، بزرگ کردن همه به صورت نسبتی این مشکل را دور می‌زند.

افزونه Custom CSS نیاز به فعال‌سازی صریح دارد

این یک پارامتر 'set and forget' نیست. هر تغییری در فایل CSS سفارشی نیاز به اجرای مجدد «Enable Custom CSS and JS» از تلوی فرمان دارد (Ctrl+Shift+P)

یک اسکریپت به‌روزرسانی ضروری است

بدون اسکریپت، هر به‌روزرسانی از VS Code، پچ‌های CSS workbench را پاک می‌کند. اسکریپت`vscode-update.sh`اتوماتیک می‌کند دانلود، جایگزینی، بازپچ و پاکسازی چک‌سمرها.

مراجع سریع

  • دانلود VS Code : https://code.visualstudio.com/Download

  • بارگیر CSS و JS سفارشی افزونه :`be5invis.vscode-custom-css`

  • مسئله VS Code که یک تنظیم بومی برای فونت کاویژه می‌خواهد:https://github.com/microsoft/vscode/issues/149[github.com/microsoft/vscode#149]

مقالات مرتبط