время чтения : 8 minutes

Зачем устанавливать VS Code в`/opt`или через`apt`Когда его можно положить в свой home и превратить свой 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
Установка в home
= полный контроль без sudo
end note
@enduml

Почему: VS Code в Home

Проблема с установкой системы

VS Code установлен через`apt`, dnf`или в/opt`блокирует файлы приложения за правами root. Любое изменение нативного CSS, de`product.json`или из папки установки требуется`sudo`.

Однако, когда используютopencode(tool CLI для управления LLM на своём коде), агенту необходимо уметь:

  • Записывать в файлы конфигурации (~/.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`. Никакой`sudo`необходимо для чтения, изменения или замены любого файла под`~/apps/VSCode-linux-x64/`.

Конкретные преимущества

@startuml
skinparam backgroundColor #FEFEFE

rectangle "Установка Система\n(/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]
    }
}

"Установка Система\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`без повышения привилегий

скрипт домашнего обновления

Простой скрипт оболочки автоматически загружает, заменяет и перепачивает

Изоляция

Системная установка не загрязнена; откат = удалить папку

Настроить шрифт главного меню

Констатация

Шрифт по умолчанию основного меню (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 : Добавить правила font-size\n(.menubar-menu-title, и т.д.)
dev -> vscode : Перезапустить VS Code
vscode -> vscode : Загрузи патченый CSS
vscode --> dev : Меню и выпадающие списки в 23px/22px ✓

== Suppression warning ==
vscode --> dev : ⚠️ "Ваша установка повреждена"
dev -> product : Supprimer clé "контрольные суммы"\n(python3 -c ...)
dev -> vscode : Перезапустить VS Code
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`python

~/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, необходимо.обязательновыполнить команду из палитры:

  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(Empty)

.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\nCustom CSS + размер шрифта" #LightYellow {
    card ".monaco-list-row { font-size: 22px }" as t2 {
        [Texte plus grand\nmais lignes superposées]
    }
}

rectangle "Попытка 3\nразмер шрифта + межстрочный интервал + высота" #LightYellow {
    card "height: 36px !important" as t3 {
        [VS Code override\npar JavaScript]
        [Aucun effet]
    }
}

rectangle "Решение\nzoom по родительскому контейнеру" #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`равномерно увеличивает отображение контейнера — текст и отступы — не ломая layout, рассчитанный JavaScript-движком VS Code. Фактор 1.25 примерно соответствует переходу с 13 px до 16 px.

Результат :Имена файлов наконец читаемы, строки правильно расставлены.

Сводка селекторов и того, что работает

Подход CSS Результат

font-size`на.monaco-list-row`

font-size: 22px !important

Большой текст, но перекрывающиеся строки

line-height+height`на.monaco-list-row`

line-height: 36px; height: 36px

Нет эффекта (переопределение JS)

zoom`на.monaco-list-rows`

zoom: 1.25

Успешно — текст + пропорциональный интервал

Скрипт автоматического обновления

@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 : Сохранить текущую установку\n(с отметкой времени)
    script -> local : rm -rf старая установка
    script -> local : mv новая установка
    script -> css : Добавить патч CSS\n(менюбар 23px, выпадающий список 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 ==="

Скрипт:

  1. Скачай последнюю стабильную версию

  2. Проверь, отличается ли версия от текущей

  3. Сохранить текущую установку (с отметкой времени) в`~/apps/vscode-backup/`

  4. Замени папку установки

  5. Повторно нанесипатч CSS главного меню

  6. Удалите контрольные суммы 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 : Перепатч после MAJ
script ..> product : Удали checksums\nпосле MAJ
settings --> customcss : Ссылка через\nvscode_custom_css.imports
extensions ..> css : Пользовательский CSS загрузчик\nвнедряет custom.css

note bottom of css
Не выдерживает обновления
Перепатчено скриптом
end note

note bottom of customcss
**выживает** при обновлениях
Расположен вне каталога установки
end note

note bottom of settings
**Переживает** обновления
Живёт в ~/.config/
end note
@enduml
Путь Роль Выдерживает обновления?

~/apps/VSCode-linux-x64/

Установка IDE

Нет (заменена)

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

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

Пользовательский CSS для Explorer (зум)

Да

Извлеченные уроки

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

rectangle "**Локальная установка**\n в домашней директории" as install #LightGreen {
    card "Без sudo\n для изменения CSS/конфига" as i1
    card "opencode+LLM может\n изменить всё" as i2
    card "Rollback = восстановление\n бэкапа с меткой времени" as i3
}

rectangle "**Кастомизация CSS**\n zoom против font-size" as css #LightYellow {
    card "zoom > font-size\n для компонентов списка" as c1
    card "Layout JS override\n height/line-height" as c2
    card "Расширение Custom CSS\n требует ручной\n активации (Ctrl+Shift+P)" as c3
}

rectangle "**Автоматизация**\n скрипт обновления" as auto #LightCoral {
    card "Повторный патч CSS после\n каждого обновления" as a1
    card "Удалить контрольные суммы\n product.json" 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 может записывать в файлы конфигурации и assets IDE

  • Откат тривиальный: восстановить резервную копию с отметкой времени

zoom` > font-size для компонентов list

VS Code управляет высотой строк через JavaScript. Изменить`font-size`Невозможность изменить высоту, выделенную движком компоновки, приводит к переполнению текста. Свойство`zoom`На родительском контейнере увеличивает всё пропорционально и обходит эту проблему.

Расширение Custom CSS требует явной активации

Это не параметр "set and forget". Каждое изменение файла CSS custom требует повторного выполнения "Enable Custom CSS and JS" из палитры команд (Ctrl+Shift+P).

Скрипт обновления необходим

Без скрипта каждое обновление VS Code удаляет патчи CSS из workbench. Скрипт`vscode-update.sh`Автоматизирует загрузку, замену, повторное патчивание и очистку контрольных сумм.

Быстрые ссылки

  • Скачивание VS Code : https://code.visualstudio.com/Download

  • Расширение Custom CSS и JS Loader :`be5invis.vscode-custom-css`

  • Проблема VS Code, требующая нативный параметр для шрифта обозревателя :https://github.com/microsoft/vscode/issues/149[github.com/microsoft/vscode#149]

Похожие статьи