확장 프로그램 없이 VS Code 내장 Git Blame으로 코드 작성자 및 커밋 이력 확인하기

# VS Code 기본 Git Blame 기능 활성화 가이드

## 1. 내장 Git Blame 기능 개요

### 1-1. 기능 소개 및 도입 배경

+ 외부 확장 프로그램 의존성 제거

```text

GitLens와 같은 대형 확장 프로그램을 설치하지 않고도 코드 작성자와 커밋 정보를 즉시 확인할 수 있다.

```

+ 가벼운 개발 환경 유지

```text

추가적인 리소스 소모를 방지하여 VS Code의 구동 속도와 쾌적한 에디터 성능을 보장한다.

```

+ 에디터 내 라인별 인라인 데코레이션 제공

```text

커서가 위치한 코드 라인의 끝에 커밋 작성자, 작성 시간, 커밋 해시 등의 메타데이터가 흐린 텍스트 형태로 자동 렌더링된다.

```

---

## 2. 설정 활성화 방법

### 2-1. GUI 설정 메뉴를 통한 활성화

#### 2-1-1. 설정 화면 진입 및 옵션 검색

+ 설정 화면 열기

```text

단축키 [Ctrl + ,] (macOS: [Cmd + ,])를 입력하여 설정(Settings) 인터페이스를 호출한다.

```

+ 옵션 검색어 입력

```text

상단 검색창에 'git.blame.editorDecoration.enabled'를 입력한다.

```

+ 체크박스 활성화

```text

[Git > Blame > Editor Decoration: Enabled] 항목을 찾아 체크박스를 활성화(true) 상태로 전환한다.

```

### 2-2. settings.json 직접 수정을 통한 활성화

#### 2-2-1. 설정 파일 수정 절차

+ 명령 팔레트 실행

```text

단축키 [Ctrl + Shift + P] (macOS: [Cmd + Shift + P])를 입력하여 명령 팔레트를 실행한다.

```

+ 설정 파일 열기

```text

'Preferences: Open User Settings (JSON)'을 검색하여 사용자의 settings.json 파일을 연다.

```

+ 설정 프로퍼티 추가

```json

{

    "git.blame.editorDecoration.enabled": true

}

```

---

## 3. 고급 세부 설정

### 3-1. 상태 표시줄(Status Bar) 및 표시 서식 제어

#### 3-1-1. 주요 옵션 구성

+ 상태 표시줄 Blame 표시 활성화

```json

"git.blame.statusBarItem.enabled": true

```

+ 인라인 텍스트 포맷 커스터마이징

```json

"git.blame.editorDecoration.template": "${authorName}, ${authorDateAgo} • ${commitMessage}"

```

+ 템플릿 변수 설명

```text

- ${authorName}: 커밋 작성자 이름

- ${authorDateAgo}: 상대적 작성 시점(예: 3 days ago)

- ${commitMessage}: 커밋 메시지 요약본

- ${hash}: 커밋 해시 식별자

```

---

## 4. 동작 확인 및 활용

### 4-1. 에디터 내 동작 검증

#### 4-1-1. 인라인 블레임 렌더링 확인

+ 파일 탐색 및 커서 이동

```typescript

const handleKeypadInput = (key: string) => {

    // 커서를 해당 코드 라인에 위치시킨다.

};

```

+ 표시 결과 확인

```text

코드 라인 우측 끝에 다음과 같은 형태로 Git Blame 정보가 비활성 텍스트로 표시되는지 확인한다:

Hong Gildong, 2 weeks ago • refactor(ui): update keypad input logic

```

+ 상세 정보 호버

```text

표시된 텍스트 위에 마우스 포인터를 올려(Hover) 전체 커밋 메시지 및 Diff 변경 사항 확인 팝업이 정상 출력되는지 검증한다.

```