VS Code در Home : نصب محلی و تنظیم فونتها بدون sudo
منتشر شده در 17 April 2026
چرا 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 سفارشی، بایدضروریاًدستور را از پالت اجرا کنید :
-
Ctrl+Shift+P→ نوشتنفعالسازی CSS و JS سفارشی -
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 | نتیجه |
|---|---|---|
|
|
متن بزرگتر اما خطوط همپوشانده |
|
|
بدون اثر (override JS) |
|
|
موفق — متن + فاصلهی متناسب |
اسکریپت بهروزرسانی خودکار
@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 ==="
اسکریپت :
-
آخرین نسخه پایدار را دانلود کن
-
بررسی کنید که آیا نسخه با فعلی تفاوت دارد
-
پشتیبان بگیر از نصب فعلی (دارای timestamp) در`~/apps/vscode-backup/`
-
پوشه نصب را جایگزین کنید
-
دوباره اعمال کنپاتچ CSS منو اصلی
-
چکسامها را حذف کن 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
| راه | نقش | بهروزرسانیها باقی میماند؟ |
|---|---|---|
|
نصب IDE |
نه (جایگزین شده) |
|
CSS workbench (منوی کشویی) |
خیر (دوباره پچ شده توسط اسکریپت) |
|
چکسامهای یکپارچگی |
نه (باز پاکسازی شده توسط اسکریپت) |
|
اسکریپت بهروزرسانی خودکار |
بله |
|
تنظیمات کاربر (fontSize, 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]