ホームディレクトリでの VS Code : ローカルインストールとフォントのカスタマイズ sudo なし
公開日: 17 April 2026
なぜ VS Code をインストールするのか`/opt`または経由で`apt`いつでもそれを自分のホームに置き、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
(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
(ズーム: 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はホームに
システムのインストールの問題
VS Code が経由でインストール`apt`, dnf`それから中/opt`アプリケーションのファイルはroot権限で保護されます。 ネイティブCSSのあらゆる変更は、の`product.json`またはインストールフォルダーが必要です`sudo`。
しかし、使用するときオープンコード(tool CLI そのコードでLLMを操作するため), エージェントは次のことができる必要があります:
-
設定ファイルに書き込む(
~/.config/Code/User/settings.json) — それは、もうホームにある -
IDEのアセット(ワークベンチのCSS)を変更する`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。 なし`sudo`読む、編集する、または置き換えるために、どのファイルでも下では必要ありません`~/apps/VSCode-linux-x64/`。
具体的なメリット
@startuml
skinparam backgroundColor #FEFEFE
rectangle "システムインストール
(/opt, apt, dnf)" #LightCoral {
card "VS Code の root プロパティ" {
[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]
}
}
"システムインストール
(/opt, apt, dnf)" -right-> "インストール ホーム\n(~/apps)" : **Non, merci**\nJe prends le home
note bottom of "インストール ホーム\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`特権昇格なし |
家庭用アップデートスクリプト |
シンプルなシェルスクリプトが自動的にダウンロード、置換、再パッチを行います |
隔離 |
システムのインストールは汚染されていない;ロールバック=フォルダーの削除 |
メインメニューのフォントをカスタマイズ
事実
メインメニュー(ファイル、編集、表示…)およびドロップダウンのデフォルトフォントが小さすぎます。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コード" 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"というバナーを表示します。これを避けるため、チェックサムを削除します。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:拡張機能 カスタム CSS と JS ローダー
拡張機能をインストールします`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;
}
そして、このファイルをsettingsで参照します:
{
"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+フォントサイズ" #LightYellow {
card ".monaco-list-row { font-size: 22px }" as t2 {
[Texte plus grand\nmais lignes superposées]
}
}
rectangle "試行 3
font-size + line-height + height" #LightYellow {
card "高さ: 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
JavaScript のレイアウトに抵抗するのではなく、プロパティを使用します。`zoom`行のコンテナ上 :
.explorer-viewlet .monaco-list-rows,
.sidebar .monaco-list-rows {
zoom: 1.25;
}
`zoom`コンテナのレンダリングをテキストと間隔の両方を均一に拡大し、VS CodeのJavaScriptエンジンが計算したレイアウトを壊さずに済みます。係数1.25は、おおよそ13pxから16pxへの変更に相当します。
結果 :ファイル名がようやく読み取り可能になり、行が適切に間隔を開けて配置されています。
セレクターのまとめと機能するもの
| アプローチ | CSS | 結果 |
|---|---|---|
|
|
テキストは大きいですが、行が重複しています |
|
|
効果なし (override JS) |
|
|
成功 — テキスト + 比例間隔 |
自動更新スクリプト
@startuml
skinparam backgroundColor #FEFEFE
autonumber
actor "開発者
または cron" as dev
participant "vscode-update.sh" as script
participant "VSCode ターボール
(code.visualstudio.com)" as remote
participant "~/apps/\nVSCode-linux-x64" as local
participant "~/apps/\nvscode-backup" as backup
participant "ワークベンチ
.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 : "アップデート完了
1.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パッチ
-
チェックサムを削除 de `product.json`整合性の警告を避けるために
注: Explorerペインのカスタマイズは、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
.main.css" as css #LightCoral
component "product.json" as product #LightCoral
component "バイナリ
bin/code" as binary #LightCoral
}
rectangle "ユーザー設定\n(~/.config/Code/)" #LightGreen {
component "settings.json" as settings #LightGreen
component "�拡張/" as extensions #LightGreen
}
rectangle "永続的なカスタマイズ
(~/.vscode-custom-css/)" #SkyBlue {
component "カスタムCSS
(ズーム: 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のインストール |
いいえ (置き換えられた) |
|
WorkbenchのCSS (メニュー, ドロップダウン) |
いいえ (スクリプトによって再パッチされた) |
|
整合性チェックサム |
いいえ (スクリプトによって再クリーニングされました) |
|
自動更新スクリプト |
はい |
|
ユーザー設定 (fontSize, カスタム CSS) |
はい |
|
Explorer用のカスタムCSS(ズーム) |
はい |
学んだ教訓
@startuml
skinparam backgroundColor #FEFEFE
skinparam defaultFontName sans-serif
skinparam ArrowColor #444444
rectangle "**ローカルインストール**
ホーム内" as install #LightGreen {
card "sudoを使わずに
CSS/configを変更する" as i1
card "opencode+LLM できます
すべてを変更" as i2
card "ロールバック =
タイムスタンプ付きバックアップを復元する" as i3
}
rectangle "**CSS カスタマイズ**\nズーム vs フォントサイズ" as css #LightYellow {
card "ズーム > フォントサイズ
コンポーネントリスト" as c1
card "Layout JS オーバーライド
height/line-height" as c2
card "拡張機能 Custom CSS
有効化が必要
手動 (Ctrl+Shift+P)" as c3
}
rectangle "**自動化**
アップデートスクリプト" as auto #LightCoral {
card "再パッチ CSS
各アップデート後" as a1
card "チェックサムを削除
product.json" as a2
card "タイムスタンプ付きバックアップ
置換前に" 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
ホームへのインストールはすべてを解放する
ローカルインストールの`~/apps`VS Code を完全に制御します :
-
なし`sudo`CSSまたは設定を変更するために
-
opencode+LLMエージェントは、IDEの設定ファイルとアセットに書き込むことができます
-
簡単なロールバック : タイムスタンプ付きバックアップを復元
zoom` > font-size リストコンポーネントのために
VS Code は JavaScript を使って行の高さを制御します。変更`font-size`レイアウトエンジンが割り当てた高さに変更を加えることができないと、テキストがはみ出します。 プロパティ`zoom`親コンテナ上で全てを比例的に拡大し、この問題を回避します。
カスタム 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]
関連記事
31 May 2026
14 May 2026