होम में VS Code: स्थानीय इंस्टॉलेशन और फ़ॉन्ट कस्टमाइज़ेशन बिना sudo के
प्रकाशित: 17 April 2026
VS Code को क्यों स्थापित करें में`/opt`या द्वारा`apt`quand हम इसे अपने घर में रख सकते हैं और अपने 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 कोड\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(ज़ूम: 1.25)" as customcss #Lavender
}
}
cloud "code.visualstudio.com" as download
dev --> vscode : डाउनलोड करें & इंस्टॉल करें
dev --> script : अपडेट शुरू करें
script --> download : wget अंतिम संस्करण
script --> vscode : बदलें + रीपैच 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 का कोई भी संशोधन, de`product.json`या इंस्टॉलेशन फ़ोल्डर की आवश्यकता है`sudo`.
अब, जब कोई उपयोग करता हैओपेन्कोड(टूल CLI अपने कोड पर एक LLM को नियंत्रित करने के लिए), एजेंट को सक्षम होने की आवश्यकता है :
-
कॉन्फ़िगरेशन फ़ाइलों में लिखना (
~/.config/Code/User/settings.json) — यह पहले से ही होमपेज में है -
IDE के एसेट्स को संशोधित करें (वर्कबेंच CSS,
product.json) उन्नत कस्टमाइज़ेशन के लिए — यह sudo के बिना ब्लॉक है
समाधान : एक स्थानीय स्थापना
हम आधिकारिक टैरबॉल आर्काइव डाउनलोड करते हैं और उसे सीधे therein में निकालते हैं`~/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 "इंस्टॉलेशन प्रणाली\n(/opt, apt, dnf)" #LightCoral {
card "VS Code रूट का स्वामित्व" {
[CSS du workbench : sudo requis]
[product.json : sudo requis]
[Dossier d'install : non modifiable]
}
}
rectangle "इंस्टॉलेशन होम\n(~/apps)" #LightGreen {
card "VS Code उपयोगकर्ता का स्वामित्व" {
[CSS du workbench : libre]
[product.json : libre]
[Dossier d'install : libre]
[Script update maison]
}
}
"इंस्टॉलेशन प्रणाली\n(/opt, apt, dnf)" -right-> "इंस्टॉलेशन होम\n(~/apps)" : **Non, merci**\nJe prends le home
note bottom of "इंस्टॉलेशन होम\n(~/apps)"
एजेंट opencode+LLM IDE की फ़ाइलों को बिना किसी विशेषाधिकार वृद्धि के संशोधित कर सकता है।
end note
@enduml
| लाभ | विवरण |
|---|---|
sudo नहीं |
IDE के सभी फ़ाइल उपयोगकर्ता के हैं। |
CSS का सीधा संशोधन |
पैच किया जा सकता है`workbench.desktop.main.css`विशेषाधिकार वृद्धि के बिना |
घरेलू अपडेट स्क्रिप्ट |
एक साधारण शेल स्क्रिप्ट स्वचालित रूप से डाउनलोड, प्रतिस्थापित और पुनः पैच करती है |
अलगाव |
सिस्टम इंस्टॉलेशन प्रदूषित नहीं है ; rollback = फ़ोल्डर हटाएँ |
मुख्य मेनू के फ़ॉन्ट को अनुकूलित करें
निरीक्षण
मुख्य मेनू (फ़ाइल, संपादन, दृश्य …) और ड्रॉप‑डाउन का डिफ़ॉल्ट फ़ॉन्ट बहुत छोटा है। VS Code में इसे बदलने के लिए कोई सेटिंग नहीं है।
तकनीक : सीधा सीएसएस पैच
फ़ाइल के अंत में 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 "वीएस कोड" as vscode == Patch CSS == dev -> css : नियम जोड़ें font-size\n(.menubar-menu-title, etc.) dev -> vscode : VS कोड रीस्टार्ट करें vscode -> vscode : पैच किया हुआ CSS लोड करें। vscode --> dev : मेनू और ड्रॉपडाउन 23px/22px == Suppression warning == vscode --> dev : ⚠️ "आपकी इंस्टॉलेशन दूषित है" dev -> product : Supprimer clé "चेकसम"\n(python3 -c ...) dev -> vscode : VS कोड रीस्टार्ट करें vscode --> dev : ज़्यादा चेतावनी नहीं ✓ note over css, product दो फ़ाइलें ~/apps/ में = 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"। इससे बचने के लिए, हम चेकसम हटा देते हैं`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)
रीस्टार्ट के बाद, कोई चेतावनी नहीं रहती और मेनू अंततः पढ़ने योग्य हो जाते हैं।
एक्सप्लोरर पैनल का फ़ॉन्ट कस्टमाइज़ करें — लड़ाई
टेंटेटिव 1: ऐसा पैरामीटर जो नहीं मौजूद है
पहले हम स्वाभाविक पैरामीटर का प्रयास करते हैं`workbench.tree.fontSize`में`settings.json`:
{
"workbench.tree.fontSize": 20
}
परिणाम :कोई प्रभाव नहीं. यह सेटिंग VS Code में मौजूद नहीं है। इसका सबूत यह है कि अनमान्य सेटिंग्स चुपचाप अनदेखी कर दिए जाते हैं।
प्रयास 2 : एक्सटेंशन 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 को रीस्टार्ट की आवश्यकता है → स्वीकार करें
इस चरण के बिना, सीएसएस कभी भी 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\nपैरामीटर अस्तित्वहीन" #LightCoral {
card "workbench.tree.fontSize" as t1 {
[VS Code ignore le paramètre]
}
}
rectangle "प्रयास 2\nकस्टम CSS + font-size" #LightYellow {
card ".monaco-list-row { font-size: 22px }" as t2 {
[Texte plus grand\nmais lignes superposées]
}
}
rectangle "प्रयास 3\nfont-size + line-height + height" #LightYellow {
card "height: 36px !important" as t3 {
[VS Code override\npar JavaScript]
[Aucun effet]
}
}
rectangle "हल\nपैरेंट कंटेनर पर ज़ूम" #LightGreen {
card ".monaco-list-rows { zoom: 1.25 }" as t4 {
[Texte + espacement\nproportionnels]
[Layout JS respecté]
[✓ Résultat conforme]
}
}
t1 -down-> t2 : कोई पैरामीटर नहीं ?\nहम कोशिश कर रहे हैं CSS
t2 -down-> t3 : ओवरलेप लाइनों?\nहम ऊँचाई बल देते हैं
t3 -down-> t4 : Override JS ?\nहम ज़ूम का उपयोग करते हैं
@enduml
JavaScript लेआउट के खिलाफ लड़ने के बजाय, हम प्रॉपर्टी का उपयोग करते हैं`zoom`लाइनों के कंटेनर पर :
.explorer-viewlet .monaco-list-rows,
.sidebar .monaco-list-rows {
zoom: 1.25;
}
`zoom`समान रूप से कंटेनर का रेंडर बढ़ाता है — टेक्स्ट और स्पेसिंग — VS Code के JavaScript इंजन द्वारा गणना किए गए लेआउट को तोड़े बिना। 1.25 का कारक लगभग 13px से 16px के परिवर्तन के अनुरूप है।
परिणाम :फ़ाइल के नाम अंततः पढ़ने योग्य हैं, लाइनें सही अंतराल वाली हैं.
सेलेक्टर्स का सारांश और क्या काम करता है
| पहुँच | CSS | परिणाम |
|---|---|---|
|
|
बड़ा पाठ लेकिन रेखाएँ अ overlap |
|
|
कोई प्रभाव नहीं (override JS) |
|
|
सफल — पाठ + अनुपातिक अंतराल |
ऑटोमैटिक अपडेट स्क्रिप्ट
@startuml
skinparam backgroundColor #FEFEFE
autonumber
actor "डेवलपर\nया 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 : वर्तमान संस्करण पढ़ें
script -> remote : wget अंतिम संस्करण
script -> script : संस्करणों की तुलना
alt Version identique
script --> dev : "अभी तक अद्यतन!"
else Nouvelle version
script -> backup : सहेजें स्थापना courante\n(horodatée)
script -> local : rm -rf पुरानी स्थापना
script -> local : mv नई स्थापना
script -> css : पैच जोड़ें CSS\n(menubar 23px, dropdown 22px)
script -> product : हटाएँ 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 ==="
स्क्रिप्ट :
-
लेटेस्ट स्थिर संस्करण डाउनलोड करें
-
जाँच करें कि क्या संस्करण वर्तमान से अलग है
-
वर्तमान स्थापना (समयांकित) में सहेजें`~/apps/vscode-backup/`
-
इंस्टॉलेशन फ़ोल्डर बदलें
-
फिर से लागू करेंमुख्य मेनू का CSS पैच
-
Supprime les checksums de `product.json`अखंडता चेतावनी से बचने के लिए
| कस्टमाइज़ेशन एक्सप्लोरर पैन का Custom CSS एक्सटेंशन के माध्यम से और फ़ाइल`~/.vscode-custom-css/custom.css`वे अपडेट के कारण बच जाते हैं क्योंकि वे इंस्टॉलेशन फ़ोल्डर के बाहर रहते हैं। |
संबंधित फाइलें — अवलोकन
@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle
rectangle "इंस्टॉलेशन VS Code\n(~/apps/VSCode-linux-x64/)" #LightCoral {
component "workbench.desktop\n.main.css" as css #LightCoral
component "product.json" as product #LightCoral
component "बाइनरी\nbin/code" as binary #LightCoral
}
rectangle "कॉन्फ़िगरेशन उपयोगकर्ता\n(~/.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 "स्वचालन\n(~/apps/)" #LightYellow {
component "vscode-update.sh" as script #LightYellow
component "vscode-backup/" as backup #LightYellow
}
script ..> css : re-patch के बाद MAJ
script ..> product : checksums\nके बाद MAJ हटाइए
settings --> customcss : संदर्भ via\nvscode_custom_css.imports
extensions ..> css : Custom CSS Loader\n इन्ज़ेक्टेड custom.css
note bottom of css
**अपडेट्स के साथ नहीं बचता**
स्क्रिप्ट द्वारा री-पैच किया गया
end note
note bottom of customcss
अद्ययनों के साथ जीवित रहता है
इंस्टॉलेशन फ़ोल्डर के बाहर रहता है
end note
note bottom of settings
**जीवित** अपडेट्स
~/.config/ में रहता है
end note
@enduml
| पथ | भूमिका | अपडेट्स से जीवित रहता है? |
|---|---|---|
|
IDE की स्थापना |
नहीं (बदली गई) |
|
वर्कबेंच CSS (मेन्यू, ड्रॉपडाउन) |
नहीं (स्क्रिप्ट द्वारा पुनः पैच किया गया) |
|
इंटेग्रिटी चेकसम |
नहीं (स्क्रिप्ट द्वारा फिर से साफ किया गया) |
|
स्वचालित अपडेट स्क्रिप्ट |
हाँ |
|
उपयोगकर्ता सेटिंग्ज़ (fontSize, custom CSS) |
हाँ |
|
एक्सप्लोरर के लिए कस्टम CSS (ज़ूम) |
हाँ |
सीखे हुए सबक
@startuml
skinparam backgroundColor #FEFEFE
skinparam defaultFontName sans-serif
skinparam ArrowColor #444444
rectangle "स्थानीय स्थापना\n होम में" as install #LightGreen {
card "सुडो\n के बिना CSS/config को संशोधित करें" as i1
card "opencode+LLM \n सब कुछ बदल सकता है" as i2
card "Rollback = पुनर्स्थापित\n टाइमस्टैम्प्ड बैकअप" as i3
}
rectangle "**कस्टमाइज़ेशन CSS**\n ज़ूम बनाम फ़ॉन्ट-आकार" as css #LightYellow {
card "ज़ूम > फ़ॉन्ट-आकार\n कंपोनेंट्स सूची के लिए" as c1
card "ले-आउट JS ओवरराइड\n ऊँचाई/line-height" as c2
card "एक्सटेंशन कस्टम CSS\n को सक्रियण\n मैनुअल की आवश्यकता है (Ctrl+Shift+P)" as c3
}
rectangle "**ऑटोमेशन**\n अपडेट स्क्रिप्ट" as auto #LightCoral {
card "री-पैच CSS के बाद\n प्रत्येक MAJ" as a1
card "चेकसम\n हटाएं product.json" as a2
card "टाइमस्टैम्प्ड बैकअप\n प्रतिस्थापन से पहले" as a3
}
install -right-> css : फ़िर
css -right-> auto : अंततः
note top of install
विशेषाधिकार वृद्धि के बिना पूर्ण नियंत्रण
विशेषाधिकार का
end note
note top of auto
स्क्रिप्ट के बिना, प्रत्येक MAJ पैच 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 फ़ाइल में बदलाव करने के लिए Enable Custom CSS and JS को कमांड पैलेट से फिर से चलाना आवश्यक है। (Ctrl+Shift+P).
एक अपडेट स्क्रिप्ट आवश्यक है
स्क्रिप्ट के बिना, VS Code के प्रत्येक अपडेट वर्कबेंच के CSS पैच को मिटा देता है। स्क्रिप्ट`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]