VS Code в Домашней директории : локальная установка и настройка шрифтов без sudo
Опубликовано 17 April 2026
Зачем устанавливать 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, необходимо.обязательновыполнить команду из палитры:
-
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(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 | Результат |
|---|---|---|
|
|
Большой текст, но перекрывающиеся строки |
|
|
Нет эффекта (переопределение 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 : Сохранить текущую установку\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 ==="
Скрипт:
-
Скачай последнюю стабильную версию
-
Проверь, отличается ли версия от текущей
-
Сохранить текущую установку (с отметкой времени) в`~/apps/vscode-backup/`
-
Замени папку установки
-
Повторно нанесипатч CSS главного меню
-
Удалите контрольные суммы 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
| Путь | Роль | Выдерживает обновления? |
|---|---|---|
|
Установка IDE |
Нет (заменена) |
|
CSS рабочей области (меню, выпадающие списки) |
Нет (перепатченный скриптом) |
|
Контрольные суммы целостности |
Нет (переочищено скриптом) |
|
Скрипт автоматического обновления |
Да |
|
Настройки пользователя (fontSize, пользовательский 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]