tempo de leitura : 8 minutes

Por que instalar o VS Code em`/opt`ou via`apt`Quando pode colocá‑lo no diretório home e transformar sua IDE num playground sem nunca digitar`sudo`? Aqui está o relato de uma instalação local seguida de um combate feroz para aumentar as fontes do menu e do explorador de arquivos.

Visão geral do percurso

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

actor Développeur as dev
actor "opencode\n+ LLM" as agent

package "Início Usuário (~)" #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 : Baixe & instale
dev --> script : Lance a atualização
script --> download : wget última versão
script --> vscode : Substitua + reaplique CSS
agent --> settings : Écrit config
agent --> customcss : Écrit zoom CSS
agent --> vscode : Patch workbench CSS

note right of vscode
Instalação no home
= controle total sem sudo
end note
@enduml

O Porquê: VS Code no Home

O problema com a instalação do sistema

VS Code instalado via`apt`, dnf`ou em/opt`bloqueia os arquivos do aplicativo por trás dos privilégios root. Qualquer modificação ao CSS nativo, de`product.json`ou da pasta de instalação exige`sudo`.

Ou, quando se usaopencode(tool CLI pour piloter un LLM sur son code), o agente precisa poder :

  • Escrever nos arquivos de configuração`~/.config/Code/User/settings.json`) — isso, já está em casa

  • Modificar os assets da IDE (CSS do workbench`product.json`) para as personalizações avançadas — isso está bloqueado sem sudo

A solução: uma instalação local

Baixamos o arquivo tarball oficial e o descompactamos diretamente em`~/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

O binário então se encontra em`~/apps/VSCode-linux-x64/bin/code`nenhum`sudo`não é necessário para ler, modificar ou substituir qualquer arquivo sob`~/apps/VSCode-linux-x64/`.

Vantagens concretas

@startuml
skinparam backgroundColor #FEFEFE

rectangle "Instalação do Sistema\n(/opt, apt, dnf)" #LightCoral {
    card "VS Code propriedade do root" {
        [CSS du workbench : sudo requis]
        [product.json : sudo requis]
        [Dossier d'install : non modifiable]
    }
}

rectangle "Instalação Home\n(~/apps)" #LightGreen {
    card "VS Code propriedade do usuário" {
        [CSS du workbench : libre]
        [product.json : libre]
        [Dossier d'install : libre]
        [Script update maison]
    }
}

"Instalação do Sistema\n(/opt, apt, dnf)" -right-> "Instalação Home\n(~/apps)" : **Non, merci**\nJe prends le home

note bottom of "Instalação Home\n(~/apps)"
O agente opencode+LLM pode modificar os arquivos do IDE sem elevação de privilégios
end note
@enduml
Vantagem detalhe

Sem sudo

Todos os arquivos do IDE pertencem ao usuário

Modificação direta do CSS

É possível aplicar um patch`workbench.desktop.main.css`sem elevação de privilégios

Script de atualização caseiro

Um script shell simples baixa, substitui e reaplica o patch automaticamente.

Isolamento

A instalação do sistema não está poluída; rollback = remover o diretório

Personalizar a fonte do menu principal

O constatou

A fonte padrão do menu principal (File, Edit, View…​) e dos menus suspensos é muito pequena. O VS Code não oferece nenhuma opção para modificá‑la.

A técnica: patch CSS direto

Adicionamos CSS ao final do arquivo`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 : Adicionar regras font-size\n(.menubar-menu-title, etc.)
dev -> vscode : Reiniciar o VS Code
vscode -> vscode : Carrega o CSS corrigido
vscode --> dev : Menus e dropdowns em 23px/22px ✓

== Suppression warning ==
vscode --> dev : ⚠️ "Sua instalação está corrompida"
dev -> product : Supprimer clé "somas de verificação"\n(python3 -c ...)
dev -> vscode : Reiniciar o VS Code
vscode --> dev : Sem mais avisos ✓

note over css, product
Dois arquivos em ~/apps/

= editáveis sem 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

Remover o aviso de integridade

VS Code detecta as modificações dos seus arquivos e exibe um banner 'Your installation is corrupt'. Para evitá-lo, removemos os checksums de`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)

Depois do reinício, não há mais aviso e os menus finalmente estão legíveis.

Personalizar a fonte do painel Explorer — o combate

Tentativa 1: um parâmetro que não existe

Primeiramente tentamos o parâmetro nativo.workbench.tree.fontSize

em

settings.json:

{
    "workbench.tree.fontSize": 20
}

Resultado :nenhum efeito. Este parâmetro não existe no VS Code. A prova de que os parâmetros não reconhecidos são silenciosamente ignorados.

Tentativa 2: a extensão Custom CSS and JS Loader

Instalamos a extensão`be5invis.vscode-custom-css`(no response)

~/apps/VSCode-linux-x64/bin/code --install-extension be5invis.vscode-custom-css

Cria-se um arquivo CSS em`~/.vscode-custom-css/custom.css`com seletores direcionados aos elementos do explorador :

.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;
}

E referenciamos esse arquivo nas configurações :

{
    "vscode_custom_css.imports": [
        "file:///home/user/.vscode-custom-css/custom.css"
    ]
}

Resultado :as alterações não se aplicam.

A armadilha: é preciso ativar a extensão a cada vez

A documentação da extensão é discreta sobre este ponto crucial : após cada modificação do CSS personalizado, é precisoimperativamenteExecutar o comando a partir da paleta:

  1. Ctrl+Shift+P→ digitarAtivar CSS e JS personalizados

  2. VS Code pede um reinício → aceitar

Sem esta etapa, o CSS nunca é injetado na IDE.

Tentativa 3: as linhas se sobrepõem

Mesmo com`font-size: 22px` et line-height: 36px, as letras com caudilho (g, p, f, b) transbordam para as linhas vizinhas. Tenta-se acrescentar`height` et min-height:

.monaco-list-row {
    height: 36px !important;
    min-height: 36px !important;
}

Resultado :nenhuma mudança. O VS Code calcula as alturas das linhas em JavaScript e substitui os valores CSS.

A solução : zoom no contêiner pai

@startuml
skinparam backgroundColor #FEFEFE

rectangle "Tentative 1\nParâmetro inexistente" #LightCoral {
    card "workbench.tree.fontSize" as t1 {
        [VS Code ignore le paramètre]
    }
}

rectangle "Tentative 2\nCustom CSS + font-size" #LightYellow {
    card ".monaco-list-row { font-size: 22px }" as t2 {
        [Texte plus grand\nmais lignes superposées]
    }
}

rectangle "Tentative 3\nfont-size + line-height + height" #LightYellow {
    card "height: 36px !important" as t3 {
        [VS Code override\npar JavaScript]
        [Aucun effet]
    }
}

rectangle "Solution\nzoom no contêiner pai" #LightGreen {
    card ".monaco-list-rows { zoom: 1.25 }" as t4 {
        [Texte + espacement\nproportionnels]
        [Layout JS respecté]
        [✓ Résultat conforme]
    }
}

t1 -down-> t2 : Sem parâmetro ?\nTestamos o CSS
t2 -down-> t3 : Linhas sobrepostas ?\nForçamos a altura
t3 -down-> t4 : Override JS ?\nUtilizamos zoom

@enduml

Em vez de lutar contra o layout JavaScript, utiliza-se a propriedade`zoom`no contêiner das linhas:

.explorer-viewlet .monaco-list-rows,
.sidebar .monaco-list-rows {
    zoom: 1.25;
}

`zoom`agranda uniformemente a renderização do contêiner — texto e espaçamento — sem quebrar o layout calculado pelo motor JavaScript do VS Code. O fator 1.25 corresponde aproximadamente a uma passagem de 13px para 16px.

Resultado :os nomes dos arquivos são finalmente legíveis, as linhas estão corretamente espaçadas.

Resumo dos seletores e do que funciona

Abordagem CSS Resultado

font-size`sobre.monaco-list-row`

font-size: 22px !important

Texto maior mas linhas sobrepostas

line-height+height`sobre.monaco-list-row`

line-height: 36px; height: 36px

Nenhum efeito (override JS)

zoom`sobre.monaco-list-rows`

zoom: 1.25

Sucesso — texto + espaçamento proporcional

O script de atualização automática

@startuml
skinparam backgroundColor #FEFEFE
autonumber

actor "Desenvolvedor\nou 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 : Ler versão atual
script -> remote : wget última versão
script -> script : Compare versões

alt Version identique
    script --> dev : "Já está atualizado!"
else Nouvelle version
    script -> backup : Salvar instalação atual\n(data e hora)
    script -> local : rm -rf instalação antiga
    script -> local : mv nova instalação
    script -> css : Adicionar patch CSS\n(barra de menus 23px, menu suspenso 22px)
    script -> product : Remover checksums\n(python3)
    script --> dev : "Atualização concluída\n1.xx.yy → 1.zz.ww"
end note
@enduml

O problema

Quando o VS Code é atualizado, ele substitui o diretório de instalação eapaga todos os patches CSS. É necessário reaplicar manualmente as modificações a cada vez.

O script `vscode-update.sh

Criamos`~/apps/vscode-update.sh`(Empty output)

#!/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 ==="

O script :

  1. Baixe a última versão estável

  2. Verifica se a versão difere da atual

  3. Salva a instalação atual (timestamp) em`~/apps/vscode-backup/`

  4. Substitua o diretório de instalação

  5. Reaplicao patch CSS do menu principal

  6. Remova os checksums de `product.json`para evitar o aviso de integridade

NOTA: As personalizações do painel Explorer via a extensão Custom CSS e o arquivo`~/.vscode-custom-css/custom.css`sobrevivem às atualizações porque elas vivem fora da pasta de instalação

Arquivos envolvidos — visão geral

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

rectangle "Instalação VS Code\n(~/apps/VSCode-linux-x64/)" #LightCoral {
    component "workbench.desktop\n.main.css" as css #LightCoral
    component "product.json" as product #LightCoral
    component "binário\nbin/code" as binary #LightCoral
}

rectangle "Configuração utilizador\n(~/.config/Code/)" #LightGreen {
    component "settings.json" as settings #LightGreen
    component "extensions/" as extensions #LightGreen
}

rectangle "Customização persistente\n(~/.vscode-custom-css/)" #SkyBlue {
    component "custom.css\n(zoom: 1.25)" as customcss #SkyBlue
}

rectangle "Automação\n(~/apps/)" #LightYellow {
    component "vscode-update.sh" as script #LightYellow
    component "vscode-backup/" as backup #LightYellow
}

script ..> css : Repatcher após MAJ
script ..> product : Apague checksums\napós MAJ
settings --> customcss : Referência via\nvscode_custom_css.imports
extensions ..> css : Personalizado CSS Carregador\ninjetado custom.css

note bottom of css
Não sobrevive às atualizações
Repatchado pelo script
end note

note bottom of customcss
**Sobrevive** às atualizações
Fora da pasta de instalação
end note

note bottom of settings
Vive em ~/.config/
Sobrevive** às atualizações
end note
@enduml
Caminho Papel Sobrevive às atualizações?

~/apps/VSCode-linux-x64/

Instalação do IDE

Não (substituída)

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

CSS do workbench (menu, dropdowns)

Não (repachado pelo script)

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

Checksums de integridade

Não (re-limpado por o script)

~/apps/vscode-update.sh

Script de atualização automática

Sim

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

Definições do usuário (fontSize, CSS personalizado)

Sim

~/.vscode-custom-css/custom.css

CSS personalizado para o Explorer (zoom)

Sim

Lições aprendidas

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

rectangle "Instalação local\n no home" as install #LightGreen {
    card "Sem sudo\n para modificar CSS/config" as i1
    card "opencode+LLM pode\n tudo modificar" as i2
    card "Rollback = restaurar\n o backup horodatado" as i3
}

rectangle "**Personalização CSS**\n zoom vs tamanho da fonte" as css #LightYellow {
    card "zoom > tamanho-da-fonte\n para lista de componentes" as c1
    card "Layout JS sobrescrita\n altura/line-height" as c2
    card "Extensão Personalizada CSS\n requer ativação\n manual (Ctrl+Shift+P)" as c3
}

rectangle "**Automação**\n script de atualização" as auto #LightCoral {
    card "Re-aplicar CSS depois\n cada MAJ" as a1
    card "Remover checksums\n product.json" as a2
    card "Backup horodatado\n antes da substituição" as a3
}

install -right-> css : depois
css -right-> auto : finalmente

note top of install
Controle total sem elevação de privilégios
end note

note top of auto
Sem script, cada MAJ
apaga os patches CSS
end note
@enduml

Instalar no home libera tudo

Uma instalação local em`~/apps`dado controle total sobre o VS Code :

  • Sem`sudo`para modificar o CSS ou a configuração

  • O agente opencode+LLM pode escrever nos arquivos de config e nos ativos da IDE

  • Rollback trivial : restaurar o backup timestampado

zoom` > font-size para os componentes da lista

O VS Code controla a altura das linhas por meio do JavaScript. Modifique`font-size`sem poder ajustar a altura alocada pelo motor de layout resulta em textos que transbordam. A propriedade`zoom`No contêiner pai amplia tudo proporcionalmente e contorna este problema.

A extensão Custom CSS necessita de uma ativação explícita.

Não é um parâmetro "set and forget". Cada modificação do arquivo CSS personalizado exige que você execute novamente "Enable Custom CSS and JS" a partir da paleta de comandos.Ctrl+Shift+P)

Um script de atualização é indispensável

Sem script, cada atualização do VS Code apaga os patches CSS da workbench. O script`vscode-update.sh`automatiza o download, a substituição, o reaplicar os patches e a limpeza dos checksums.

Referências rápidas

  • Download VS Code : https://code.visualstudio.com/Download

  • Extension Custom CSS and JS Loader :`be5invis.vscode-custom-css`

  • Issue VS Code solicitando um parâmetro nativo para a fonte do Explorer :https://github.com/microsoft/vscode/issues/149[github.com/microsoft/vscode#149]

Artigos relacionados