Pixel Branch Diff

픽셀아트 감성의 Git diff 사이드바 패널 — 변경된 파일을 VS Code 안에서 바로 확인하세요.

Pixel Branch Diff는 현재 브랜치에서 변경된 파일을 사이드바에 항상 표시해주는 패널입니다. 인라인 diff, 파일 상태 배지, VS Code 기본 diff 에디터 연동까지 — 터미널 없이, 컨텍스트 전환 없이, 한눈에 확인할 수 있습니다.

주요 기능

🌿 브랜치 비교 모드

현재 브랜치를 기준 브랜치(예: main, develop)와 비교합니다. 시작 시 레포의 기본 브랜치를 자동으로 감지합니다.

🌲 로컬 모드

스테이징되지 않은 변경사항을 확인합니다. git status + git diff를 시각화한 모드입니다.

📄 인라인 diff 패널

파일을 클릭하면 사이드바 안에서 바로 unified diff를 확인할 수 있습니다. 새 탭 없이, 깔끔하게.

🖊️ 에디터 diff 열기

클릭 한 번으로 VS Code 기본 diff 에디터를 열어 기준 ref와 좌우로 비교할 수 있습니다.

🏷️ 파일 상태 배지

모든 파일에 Git 상태가 표시됩니다:

📁 파일 타입 카테고리

JSX, JS, CSS, MARKUP, IMG, ETC 카테고리로 분류되어 어떤 종류의 변경인지 한눈에 파악할 수 있습니다.

🔀 베이스 브랜치 변경

툴바의 베이스 브랜치 태그를 클릭하면 로컬 브랜치 중 하나를 비교 기준으로 선택할 수 있습니다. 최근에 체크아웃한 브랜치가 우선 표시됩니다.

⚡ 자동 새로고침

Git 인덱스가 변경되면 패널이 자동으로 갱신됩니다. 수동 새로고침 불필요.

시작하기

1. VS Code 마켓플레이스에서 익스텐션 설치
2. Git 레포지토리가 있는 폴더를 VS Code로 열기
3. 탐색기 사이드바에서 Pixel Branch Diff 패널 확인
4. 기본 브랜치 대비 변경 파일이 자동으로 로드됩니다

사용법

모드 전환

툴바의 ⇌ BRANCH 버튼을 클릭해 모드를 전환하세요:

• Branch Compare — 기준 브랜치와의 차이 (git diff main...HEAD)
• Working Tree — 커밋되지 않은 변경사항 (git status / git diff)

베이스 브랜치 변경

툴바의 점선 태그(예: ✎ main)를 클릭하면 로컬 브랜치 목록이 나타납니다. 최근 체크아웃 순으로 정렬됩니다.

diff 보기

파일 목록에서 파일을 클릭하면 오른쪽에 인라인 diff 패널이 열립니다. WRAP 버튼으로 긴 줄 줄바꿈을 토글할 수 있습니다.

에디터에서 열기

파일에 마우스를 올리면 액션 버튼이 나타납니다:

• OPEN — 에디터에서 파일 열기
• DIFF — VS Code 기본 diff 에디터로 좌우 비교 보기

명령어

요구 사항

• VS Code 1.70 이상
• Git 레포지토리가 있는 워크스페이스

익스텐션 설정

팁

• 패널을 숨겼다가 다시 열어도 상태가 유지됩니다 — 데이터를 다시 불러오지 않아요
• 이름이 변경된 파일은 diff 헤더에 이전 경로 → 새 경로 형태로 표시됩니다
• 이미지 파일(.png, .jpg, .webp 등)은 diff 대신 VS Code 이미지 미리보기로 열립니다