Pixel Branch Diff

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

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

주요 기능

🌿 브랜치 비교 모드

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

🌲 로컬 모드

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

새로운 기능: 로컬 모드에서도 비교 대상을 변경할 수 있어요! HEAD 대신 다른 브랜치와도 비교해봐용 'ㅅ'

🔍 파일 검색

상단 검색창에 파일명을 입력하면 실시간으로 필터링됩니다. 검색어는 노란색으로 하이라이트되어 쉽게 찾을 수 있어요.

☑️ 다중 파일 선택

각 파일 옆 체크박스로 여러 파일을 선택할 수 있습니다. 전체선택 체크박스를 사용하면 필터링된 파일을 한 번에 선택/해제할 수 있어요.

선택 카운트: 전체선택 체크박스 옆에 3/15 형식으로 현재 선택된 파일 수가 표시됩니다.

Open 버튼: 선택한 파일들을 한 번에 에디터로 열 수 있습니다.

📄 인라인 diff 패널

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

🖊️ 에디터 diff 열기

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

🏷️ 파일 상태 배지

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

📁 파일 타입 카테고리

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

필터 버튼: 상단의 카테고리 버튼을 클릭하면 해당 타입의 파일만 표시됩니다. 전체선택은 필터링된 파일에만 적용돼요.

🔀 베이스 브랜치 변경

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

시작하기

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

사용법

모드 전환

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

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

베이스 브랜치 변경

• BRANCH 모드: 점선 태그(예: ✎ main)를 클릭하면 로컬 브랜치 목록이 나타납니다.
• LOCAL 모드: 점선 태그(예: ✎ HEAD)를 클릭하면 비교 대상 브랜치를 변경할 수 있습니다.

최근 체크아웃 순으로 브랜치가 정렬됩니다.

파일 검색 및 필터링

1. 검색: 상단 검색창에 파일명 입력 (실시간 필터링)
2. 카테고리 필터: JSX, CSS, IMG 등의 버튼 클릭
3. 조합: 검색 + 카테고리 필터를 함께 사용 가능

다중 파일 작업

1. 체크박스로 원하는 파일들 선택
2. 전체선택 체크박스로 필터링된 모든 파일 선택
3. Open 버튼으로 선택한 파일들 한 번에 열기

예시:

• CSS 필터 클릭 → 전체선택 → Open = 모든 CSS 파일 열기
• "header" 검색 → 관련 파일 체크 → Open = header 관련 파일만 열기

diff 보기

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

에디터에서 열기

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

• ≠ DIFF — 사이드바에서 인라인 diff 보기
• ↗ EDITOR — VS Code 기본 diff 에디터로 좌우 비교 보기

명령어

요구 사항

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

익스텐션 설정

팁

• 패널 상태 유지: 패널을 숨겼다가 다시 열어도 상태가 유지됩니다
• 이름 변경 파일: diff 헤더에 이전 경로 → 새 경로 형태로 표시됩니다
• 이미지 파일: diff 대신 VS Code 이미지 미리보기로 열립니다
• 선택 카운트: 3/15 형식으로 필터링된 파일 중 몇 개가 선택되었는지 실시간 표시
• 필터 + 검색: 카테고리 필터와 검색을 동시에 사용하면 더 정확한 결과를 얻을 수 있어요

라이선스

MIT

Pixel Branch Diff를 사용해주셔서 감사합니다! 🎨✨