읽는 시간 : 8 minutes

왜 VS Code를 설치하나요?/opt`또는 통해`apt`당신이 그것을 홈에 놓을 수 있고 IDE를 놀이터로 바꾼 뒤에도 절대 타이핑하지 않을 때`sudo?여기서는 로컬 설치의 이야기와 메뉴와 파일 탐색기의 글꼴을 확대하기 위한 치열한 싸움이 이어집니다.

똑

[]

과정 개요

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

actor Développeur as dev
actor "python
print("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
(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
  Installation dans le home
  = contrôle total sans sudo
end note
@enduml

왜냐하면: 홈에서 VS Code

시스템 설치의 문제

VS Code를 통해 설치된`apt`, dnf`또는 안에서/opt`앱 파일을 루트 권한 뒤에 잠급니다. 네이티브 CSS의 모든 수정, de`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의 루트 속성" {
        [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`특권 상승 없이

집에서 만든 업데이트 스크립트

간단한 셸 스크립트가 자동으로 다운로드하고, 대체하고, 재패치합니다

고립

시스템 설치는 오염되지 않았습니다; 롤백 = 폴더 삭제

메인 메뉴 글꼴 사용자 정의

확인

메인 메뉴(File, Edit, View…​)와 드롭다운의 기본 폰트가 너무 작습니다. VS Code에는 이를 변경할 수 있는 설정 옵션이 없습니다.

기법: 직접 CSS 패치

파일 끝에 CSS를 추가합니다.workbench.desktop.main.css(Empty)

@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 : 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)

재시작 후, 경고가 더 이상 없고 메뉴가 finally 읽을 수 있습니다.

탐색기 창의 글꼴 사용자 지정 — 전투

시도 1: 존재하지 않는 매개변수

먼저 네이티브 매개변수를 시도합니다.workbench.tree.fontSize`안에`settings.json:

{
    "workbench.tree.fontSize": 20
}

결과 :효과 없음. 이 설정은 VS Code에 존재하지 않습니다. 인식되지 않는 설정은 조용히 무시된다는 증거.

시도 2: Custom CSS and JS Loader 확장 프로그램

확장을 설치합니다`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;
}

그리고 우리는 이 파일을 설정에서 참조합니다:

{
    "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 + font-size" #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

자바스크립트 레이아웃과 싸우는 대신, 속성을 사용합니다.`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

효과 없음 (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 타볼\n(code.visualstudio.com)" as remote
participant "~/apps/\nVSCode-linux-x64/" as local
participant "~/apps/\nvscode-backup" as backup
participant "작업대\n.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`무결성 경고를 피하기 위해

참고: 맞춤 CSS 확장 및 파일을 통한 Explorer 창 맞춤 설정`~/.vscode-custom-css/custom.css`설치 폴더 밖에 있기 때문에 업데이트를 살아남는다.

관련 파일 — 개요

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

rectangle "설치 VS Code
(~/apps/VSCode-linux-x64/)" #LightCoral {
    component "workbench.desktop\n.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 "지속적인 커스터마이징\n(~/.vscode-custom-css/)" #SkyBlue {
    component "custom.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

워크벤치 CSS (메뉴, 드롭다운)

아니요 (스크립트에 의해 재패치됨)

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

무결성 체크섬

아니 (스크립트에 의해 재정리됨)

~/apps/vscode-update.sh

자동 업데이트 스크립트

예

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

사용자 설정 (fontSize, custom CSS)

예

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

Explorer용 커스텀 CSS (줌)

예

배운 교훈

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

rectangle "**로컬 설치**\n 홈에" as install #LightGreen {
    card "sudo 없이
 CSS/config을 수정하기 위해" as i1
    card "opencode+LLM은
 모든 것을 수정할 수 있다" as i2
    card "롤백 = 복원
 타임스탬프가 적용된 백업" as i3
}

rectangle "CSS 커스터마이징
줌 vs 글꼴 크기" as css #LightYellow {
    card "줌 > 폰트 크기
 컴포넌트 목록을 위한" as c1
    card "JS 레이아웃 오버라이드
높이/줄간격" as c2
    card "확장 Custom CSS
활성화가 필요합니다
수동 (Ctrl+Shift+P)" as c3
}

rectangle "**자동화**
 업데이트 스크립트" as auto #LightCoral {
    card "재패치 CSS 후
 각 MAJ" as a1
    card "체크섬 삭제\n product.json" as a2
    card "타임스탬프가 있는 백업\n 교체 전" 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`부모 컨테이너를 비율대로 확대하면 이 문제를 피할 수 있다.

Custom 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

  • 확장 프로그램 Custom CSS 및 JS 로더 :`be5invis.vscode-custom-css`

  • VS Code Explorer 폰트 네이티브 설정을 요청하는 이슈 :https://github.com/microsoft/vscode/issues/149[github.com/microsoft/vscode#149]

관련 기사