وقت پڑھنے کا : 8 minutes

VS Code کو ان میں کیوں انسٹال کریں`/opt`یا via`apt`جب آپ اسے apne home میں رکھ سکتے ہیں اور apne IDE کو کھیل کا میدان بن سکتے ہیں، کبھی بھی ٹائپ نہیں کرتے۔sudo? یہی ایک مقامی انسٹالیشن کی کہانی ہے، جس کے بعد مینو اور فائل ایکسپلورر کے فونٹوں کو بڑھانے کے لیے محنتی جنگ جاری رہی۔

مسیر کا جائزہ

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

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

package "ہوم یوزر (~)" #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 : 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
ہوم میں انسٹالیشن
= `sudo` کے بغیر مکمل کنٹرول
end note
@enduml

کیوں: VS Code گھر میں

نظام کی ان اسٹالیشن کا مسئلہ

VS Code انسٹال ذریعے`apt`, dnf`یا میں/opt`یہ ایپلیکیشن فائلوں کو ریشه کے حقوق کے پیچے بند کر دیتا ہے۔ نیٹیف CSS کی کوئی بھی تبدیلی،product.json`یا انسٹالیشن فولڈر ضرورت رکھتا ہے`sudo.

اب، جب کسی اسے استعمال کرتا ہےopencode(tool CLI اپنی کوڈ پر ایک LLM چلانے کے لیے) ایجنٹ کو کر سکنے کی ضرورت ہے :

  • لکھنا تنصیب فائلوں میں (~/.config/Code/User/settings.json) — یہ، یہ پہلے سے ہی ہوم میں ہے

  • IDE کے ایسیٹس (workbench کی CSS),product.json) ادوار سیٹنگز کے لیے — یہ، سudo کے بغیر بلاک ہے

حل : ایک مقامی انسیٹلیشن

ہم رسمی tarball آرکائیو ڈاؤنلوڈ کرتے ہیں اور اسے direct طور پر decompress کرتے ہیں داخل`~/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`. کوئی نہیں`sudo`کسی فائل کو پڑھنے، ترمیم کرنے یا بدلنے کے لیے ضروری نہیں ہے زیر`~/apps/VSCode-linux-x64/`.

ملموس فائدے

@startuml
skinparam backgroundColor #FEFEFE

rectangle "Installation Système\n(/opt, apt, dnf)" #LightCoral {
    card "VS Code propriété de root" {
        [CSS du workbench : sudo requis]
        [product.json : sudo requis]
        [Dossier d'install : non modifiable]
    }
}

rectangle "Installation Home\n(~/apps)" #LightGreen {
    card "VS Code propriété de l'utilisateur" {
        [CSS du workbench : libre]
        [product.json : libre]
        [Dossier d'install : libre]
        [Script update maison]
    }
}

"Installation Système\n(/opt, apt, dnf)" -right-> "Installation Home\n(~/apps)" : **Non, merci**\nJe prends le home

note bottom of "Installation Home\n(~/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`امتیازات کی اوپر اٹھانے کے بغیر

ghar ka update script

ایک سادہ شیل سکرپٹ خودکار طور پر ڈاؤن لوڈ کرتا ہے، بدلتا ہے اور دوبارہ پچ لگاتا ہے

عزلہ

نظام کی ان‑اسٹالیشن ملوث نہیں ہے؛ رول‑بیک = فولڈر حذف کریں

اصلی منو کی فونٹ کستومائز کریں

نتیجہ

مینیو (File, Edit, View…​) اور ڈراپ ڈاؤنز کی ڈیفالٹ فونٹ بہت چھوٹی ہے۔ VS Code اسے تبدیل کرنے کے لیے کوئی سِٹنگ/پارامٹر نہیں فراہم کرتا۔

تقنیت : 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 Code" 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 : ⚠️ "Your installation is corrupt"
dev -> product : Supprimer clé "checksums"\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 apni files ki taghyīrāt ka izhar karta hai aur ek banner dikhata hai "Your installation is corrupt". Iss se bachne ke liye, hum checksums ko hata dete hain.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)

ریسٹارت کے بعد warnings نہیں ہیں اور منو واضح ہیں۔

ایکسپلورر پین کی فونٹ کو ترتیب دیں — جگڑا

آزمائش 1 : پیرامیٹر جو موجود نہیں

ہم اصل پارامٹر کو پہلے کوشش کرتے ہیں`workbench.tree.fontSize`میں`settings.json`(Empty output)

{
    "workbench.tree.fontSize": 20
}

نتیجہ :کوئیاثر نہیں. یہ سیٹنگ VS Code میں موجود نہیں ہے۔ دلیل یہ ہے کہ معترف نہیں ہونے والی سیٹنگ‌ها خاموشی سے نادیده کر دی جاتی ہیں۔

تجربہ 2 : کاسٹم 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`explorer کے عناصر کو نشانہ بنانے والے سلیکٹر کے ساتھ :

.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 custom کی ترمیم کے بعد، کرنا ضروری ہےضروری طور پرپالیٹ سے کمانڈ چلائیں :

  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 لائنوں کی اونچائیں جاواسکریپٹ میں حساب کرتا ہے اور CSS کی قيمتیں اووررائیڈ کرتا ہے۔

حل: zoom پر والد کنٹینر

@startuml
skinparam backgroundColor #FEFEFE

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

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

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

rectangle "Solution\nzoom sur conteneur parent" #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`لائنوں کے کنٹینر پر:

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

`zoom`یہ کٹینر کے رینڈرنگ — متنی اور فاصلہ — کویکساں طور پر بڑھاتا ہے، VS Code کے جاواسکریپٹ انجن کے حساب سے لگئی لاوٹ کو توڑا نہیں۔ عامل 1.25 تقریباً 13px سے 16px کے转换 کے مساوی ہے۔

نتیجہ :فائل کے نام اب پڑھنے کے قابل ہیں، اور لائن صحیح طور پر فاصلے رکھتی ہیں.

سیلیکٹورز کا خلاصہ اور جو کام کرتا ہے

اپروچ CSS نتیجہ

font-size`پر.monaco-list-row`

font-size: 22px !important

بڑا متن لیکن overlap والی لائنیں

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 "Développeur\nou 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 : Lire version courante
script -> remote : wget dernière version
script -> script : Comparer versions

alt Version identique
    script --> dev : "Already up to date!"
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 : "Update complete\n1.xx.yy → 1.zz.ww"
end note
@enduml

مشکل

VS Code کے اپ ڈیٹ ہونے پر، وہ انسٹال کرنے والے فولڈر کو بدل دیتا ہے اورتمام CSS پچوں کو حذف کرتا ہےہر بار دستی طور پر ترمیمات کو دوبارہ لاگو کرنا ضروری ہے۔

اسکرپٹ `vscode-update.sh

ہم بناتے ہیں`~/apps/vscode-update.sh`(Empty output)

#!/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. موجودہ انسٹالیشن (ٹائم اسٹیمپ شدہ) میں محفوظ کریں`~/apps/vscode-backup/`

  4. انسٹالنگ فولدہ بدل دیں

  5. دوبارہ لاگو کریںCSS کا پچ بنیادی منو

  6. چیک سمرز حذف کریں de `product.json`انٹیگریٹی warning سے بچنے کے لئے

نوٹ: ایکسپ्लورر پین کی کستمائزیشنز، Custom CSS ایسٹینشън اور فائل کے ذریعے`~/.vscode-custom-css/custom.css`یہ اپ ڈیٹس سے بچ جاتے ہیں کیونکہ وہ انسٹالیشن فولدر کے باہر رہتے ہیں۔

ملحق فائلز — مجموعی جائزہ

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

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

rectangle "Configuration utilisateur\n(~/.config/Code/)" #LightGreen {
    component "settings.json" as settings #LightGreen
    component "extensions/" as extensions #LightGreen
}

rectangle "Customisation persistante\n(~/.vscode-custom-css/)" #SkyBlue {
    component "custom.css\n(zoom: 1.25)" as customcss #SkyBlue
}

rectangle "Automatisation\n(~/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, custom CSS)

ہاں

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

CSS کاستم Explorer کے لیے (زوم)

ہاں

سیخے سباقات

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

rectangle "**مقامی انسٹالیشن**\n ہوم ڈائریکٹری میں" as install #LightGreen {
    card "CSS/config تبدیل کرنے کے لیے\n sudo کی ضرورت نہیں" as i1
    card "opencode+LLM سب کچھ\n تبدیل کر سکتا ہے" as i2
    card "Rollback = ٹائم سٹیمپڈ\n بیک اپ کو بحال کرنا" as i3
}

rectangle "**CSS کسٹمائزیشن**\n zoom بمقابلہ font-size" as css #LightYellow {
    card "لسٹ اجزاء (components list) کے لیے\n zoom > font-size" as c1
    card "Layout JS override\n height/line-height" as c2
    card "Custom CSS ایکسٹینشن کے لیے\n دستی فعال کاری (Manual activation)\n کی ضرورت ہے (Ctrl+Shift+P)" as c3
}

rectangle "**آٹومیشن**\n اپ ڈیٹ اسکرپٹ" as auto #LightCoral {
    card "ہر اپ ڈیٹ (MAJ) کے بعد\n CSS کو دوبارہ پیچ کریں" as a1
    card "product.json سے\n checksums حذف کریں" as a2
    card "تبدیلی سے پہلے\n ٹائم سٹیمپڈ بیک اپ لیں" as a3
}

install -right-> css : ensuite
css -right-> auto : enfin

note top of install
پریویلجز کی بڑھوتری کے بغیر مکمل کنٹرول
end note

note top of auto
اسکرپٹ کے بغیر، ہر اپ ڈیٹ
CSS پیچز کو مٹا دیتی ہے
end note
@enduml

گھر میں انسٹال کرنے سے سب چیزیں آزاد ہو جاتی ہیں

ایک مقامی انسٹالیشن میں`~/apps`VS Code پر مکمل اختیار دیتا ہے :

  • نہیں`sudo`CSS یا کنفیگریشن کو ترمیم کرنے کے لیے

  • opencode+LLM ایجنٹ IDE کے کنفیگ فائلیں اور ایسیٹس میں لکھ سکتا ہے

  • ساده رول بیک : بیکاپ کی ٹائم اسٹیمپڈ بحال کریں

zoom` > font-size لیسٹ کامپوننٹس کے لیے

VS Code JavaScript کے ذریعے لائنوں کی اونچے کو کنٹرول کرتا ہے۔ تحرير کریں`font-size`لی آؤٹ انجن کی فراہم کردہ اونچائی پر ہاتھ لگانے سے ممانعت ہونے پر یہ متنیں بناتی ہیں جو باہر نکلتے ہیں۔ خاصیت`zoom`والد کنٹینر پر سب کو تناسباً بڑھایا جاتا ہے اور اس مسئلے سے بچا جاتا ہے۔

Custom CSS ایکسٹینشن کو صریح اکٹیویشن کی ضرورت ہوتی ہے

یہ "set and forget" پارامیٹر نہیں ہے۔ CSS custom فائل کی ہر تبدیلی کے بعد "Enable Custom CSS and JS" کو کمانڈ پیلٹ سے دوبارہ چلانا ضروری ہے (Ctrl+Shift+P)

ایک اپ ڈیٹ سکرپٹ ضروری ہے

اسکرپٹ کے بغیر، VS Code کی ہر اپ ڈیٹ workbench کے CSS patches کو حذف کر دیتی ہے۔ اسکرپٹ`vscode-update.sh`یہ ڈاؤنلوڈ، تعویض، دوبارہ پیچنگ اور چیک سمرماتس کی صافکاری خودکار طور پر کرتا ہے۔

جلدی حوالے

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

  • ایسٹینشن کسٹم CSS اور JS لوڈر :`be5invis.vscode-custom-css`

  • VS Code کا ایشو Explorer کے فونٹ کے لیے ایک نativ (نظامی) سیٹنگ مانگا رہا ہے :https://github.com/microsoft/vscode/issues/149[github.com/microsoft/vscode#149]

متعلقہ مضامین