読了時間 : 8 minutes

なぜ 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を変更するたびに必ずパレットからコマンドを実行して :

  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+フォントサイズ" #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 結果

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 ターボール
(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 ==="

スクリプト :

  1. 最新の安定版をダウンロード

  2. 現在のバージョンと異なるか確認して

  3. 現在のインストール(タイムスタンプ付き)を`~/apps/vscode-backup/`

  4. インストールフォルダを置き換える

  5. 再適用メインメニューのCSSパッチ

  6. チェックサムを削除 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
道 役割 アップデートを生き残る?

~/apps/VSCode-linux-x64/

IDEのインストール

いいえ (置き換えられた)

~/apps/VSCode-linux-x64/resources/app/out/vs/workbench/workbench.desktop.main.css

WorkbenchのCSS (メニュー, ドロップダウン)

いいえ (スクリプトによって再パッチされた)

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

整合性チェックサム

いいえ (スクリプトによって再クリーニングされました)

~/apps/vscode-update.sh

自動更新スクリプト

はい

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

ユーザー設定 (fontSize, カスタム CSS)

はい

~/.vscode-custom-css/custom.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]

関連記事