매일 쓰는 VS Code 생산성 확장 5가지: GitLens, Path Intellisense, Import Cost, Thunder Client, TODO Tree

이 시리즈의 마지막 글이에요. 이전 편에서 ESLint, Prettier, Tailwind, React 관련 확장을 세팅했고, 이번에는 프레임워크에 상관없이 매일 손이 가는 생산성 확장 다섯 가지를 다룹니다.

React든 Vue든, Vite든 Next.js든 가리지 않아요. 프로젝트 종류와 관계없이 쓸 수 있는 범용 도구입니다.

시작하기 전에

• VS Code가 설치되어 있어야 합니다
• Git이 설치되어 있어야 합니다 (GitLens 사용에 필요)
• 예상 소요 시간: 약 15분

---

1. GitLens — Git을 편집기 안에서 제대로 보기

왜 필요한가요?

VS Code에도 기본 Git 기능이 있지만 커밋 기록을 자세히 보려면 터미널에서 git log를 치거나 외부 도구를 써야 했어요. GitLens는 이 과정을 편집기 안으로 가져옵니다. 코드를 읽다가 "이 줄을 누가 왜 이렇게 바꿨지?" 싶을 때, 마우스만 올리면 답이 나와요.

1-1. 설치

마켓플레이스에서 GitLens — Git supercharged를 설치합니다.

설치하면 바로 동작합니다.

1-2. 주요 기능

인라인 블레임 (Inline Blame)

코드를 열면 각 줄 오른쪽에 회색 텍스트로 "누가, 언제, 어떤 커밋 메시지로 수정했는지"가 자동으로 뜹니다. 커서가 위치한 줄의 정보가 실시간으로 바뀌어요.

예를 들어 이런 식으로 보입니다:

복사
const API_URL = 'https://api.example.com'    // 홍길동, 3일 전 • API URL을 환경변수에서 상수로 변경

이 기능 하나만으로도 GitLens를 설치할 가치가 있어요. 코드 리뷰할 때 특히 좋습니다.

파일 히스토리

사이드바의 GitLens 아이콘을 클릭하면 현재 파일의 커밋 히스토리를 볼 수 있습니다. 각 커밋을 클릭하면 diff(변경 내용)가 나와요. 터미널에서 git log --follow -p 파일명을 치는 것보다 훨씬 보기 편합니다.

브랜치 비교

두 브랜치 사이에 어떤 파일이 바뀌었는지도 사이드바에서 확인할 수 있어요. PR을 올리기 전에 내가 뭘 바꿨는지 한눈에 점검하기 좋습니다.

1-3. 알아두면 좋은 설정

인라인 블레임이 코드 읽기에 방해가 된다면 끌 수 있어요.

복사
{
  "gitlens.currentLine.enabled": false
}

필요할 때만 보고 싶다면 명령 팔레트(Ctrl+Shift+P)에서 "GitLens: Toggle Line Blame"을 검색해서 켜고 끌 수 있습니다.

1-4. 동작 확인

Git으로 관리되는 프로젝트 파일을 열어 보세요. 커밋 기록이 있는 줄에 회색 텍스트로 블레임 정보가 뜨면 정상입니다. 아직 커밋한 적 없는 새 프로젝트라면 아무것도 안 나오는 게 정상이에요.

---

2. Path Intellisense — 파일 경로 자동완성

왜 필요한가요?

import 문이나 이미지 경로를 적을 때 폴더 이름이나 파일명을 하나하나 타이핑하면 오타가 나기 쉽습니다. Path Intellisense는 경로를 쓰기 시작하면 폴더와 파일을 자동완성으로 보여 줘요.

2-1. 설치

마켓플레이스에서 Path Intellisense를 설치합니다.

설치만 하면 바로 동작해요.

2-2. 사용 방법

import 문에서 './ 까지 타이핑하면 현재 폴더의 파일 목록이 드롭다운으로 뜹니다.

복사
import Header from './components/Header'
//                    ↑ 여기서 자동완성이 뜹니다

./를 치면 현재 폴더, ../를 치면 상위 폴더의 파일이 나와요. 방향키로 선택하고 Enter를 누르면 됩니다.

2-3. tsconfig.json의 path alias와 함께 쓰기

프로젝트에서 @/처럼 경로 별칭을 쓴다면 tsconfig.json에 설정이 필요합니다.

복사
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

이렇게 설정하면 import Header from '@/components/Header'처럼 쓸 수 있고, Path Intellisense가 @/ 뒤에서도 자동완성을 제공해요.

2-4. 동작 확인

아무 .tsx 파일에서 import something from './을 타이핑해 보세요. 현재 폴더의 파일 목록이 드롭다운으로 나타나면 잘 동작하고 있는 겁니다.

---

3. Import Cost — 패키지 크기 실시간 확인

왜 필요한가요?

라이브러리를 설치하고 import할 때 그 패키지가 번들에 얼마나 영향을 주는지 모르고 쓰는 경우가 많잖아요. Import Cost는 import 줄 옆에 패키지 크기를 숫자로 띄워 줍니다. 번들이 불필요하게 커지는 것을 미리 방지할 수 있어요.

3-1. 설치

마켓플레이스에서 Import Cost (Wix)를 설치합니다.

설치 후 바로 동작합니다.

3-2. 사용 방법

라이브러리를 import하면 해당 줄 오른쪽에 크기가 표시돼요.

복사
import _ from 'lodash'           // 70.7K (gzipped: 25.2K)
import { debounce } from 'lodash' // 70.7K (gzipped: 25.2K)
import debounce from 'lodash/debounce' // 1.2K (gzipped: 0.6K)

위 예시에서 lodash 전체를 import하면 70KB인데, lodash/debounce만 가져오면 1.2KB로 줄어들어요. 이런 차이를 눈으로 바로 확인할 수 있습니다.

3-3. 크기 기준

• 초록색 — 작은 패키지 (걱정 없음)
• 노란색 — 중간 크기 (확인 필요)
• 빨간색 — 큰 패키지 (대안을 검토해 볼 것)

숫자가 50KB를 넘으면 "정말 이 라이브러리 전체가 필요한가?" 한번 생각해 보는 게 좋습니다.

3-4. 동작 확인

아무 라이브러리를 import하는 줄 옆에 크기 숫자가 뜨면 정상입니다. 계산하는 데 시간이 조금 걸릴 수 있으니, 줄을 쓴 직후 1~2초 기다리면 나타나요.

---

4. Thunder Client — VS Code 안에서 API 테스트

왜 필요한가요?

프론트엔드를 만들다 보면 백엔드 API를 호출해서 응답을 확인해야 하는 순간이 자주 옵니다. 보통은 Postman을 따로 띄우거나 curl 명령을 쓰는데, Thunder Client를 쓰면 VS Code 안에서 바로 할 수 있어요. 창 전환 없이 코드를 보면서 API를 테스트할 수 있습니다.

4-1. 설치

마켓플레이스에서 Thunder Client를 설치합니다.

4-2. 사용 방법

1. 왼쪽 사이드바에 번개 아이콘이 생깁니다. 클릭하세요
2. "New Request"를 누릅니다
3. URL을 입력합니다 (예: https://jsonplaceholder.typicode.com/posts/1)
4. HTTP 메서드를 선택합니다 (GET, POST, PUT, DELETE 등)
5. "Send"를 누르면 응답이 아래에 표시됩니다

GET 요청 예시:

복사
GET https://jsonplaceholder.typicode.com/posts/1

응답:

복사
{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit..."
}

4-3. POST 요청 보내기

1. 메서드를 POST로 바꿉니다
2. "Body" 탭을 클릭합니다
3. "JSON"을 선택하고 보낼 데이터를 입력합니다

복사
{
  "title": "테스트 글",
  "body": "Thunder Client에서 보낸 요청입니다",
  "userId": 1
}

4. "Send"를 누르면 서버 응답이 나옵니다

4-4. 요청 저장하기

자주 쓰는 API 요청은 "Collections"에 저장해 둘 수 있어요. 폴더별로 정리해 두면 Postman처럼 관리할 수 있습니다.

4-5. 동작 확인

사이드바의 번개 아이콘을 클릭하고, https://jsonplaceholder.typicode.com/posts/1에 GET 요청을 보내 보세요. JSON 응답이 뜨면 정상입니다.

---

5. TODO Tree — 미뤄 둔 작업 한눈에 보기

왜 필요한가요?

코딩하다가 "여기 나중에 고쳐야지" 싶으면 // TODO: 수정 필요 같은 주석을 남기잖아요. 문제는 이런 주석이 여러 파일에 흩어지면 잊어버린다는 거예요. TODO Tree는 프로젝트 전체에서 TODO, FIXME, NOTE 같은 주석을 찾아서 사이드바에 트리로 모아 줍니다.

5-1. 설치

마켓플레이스에서 Todo Tree를 설치합니다.

설치 후 바로 동작해요.

5-2. 사용 방법

코드 어딘가에 주석을 남겨 보세요.

복사
function App() {
  // TODO: 로딩 상태 추가
  // FIXME: 화면 깜빡임 이슈
  // NOTE: API 응답 구조가 바뀔 수 있음

  return <div>App</div>
}

왼쪽 사이드바에 나무 아이콘이 새로 생깁니다. 클릭하면 프로젝트 전체에서 위 태그가 붙은 주석이 파일별로 정리되어 나와요. 항목을 클릭하면 해당 줄로 바로 이동합니다.

5-3. 태그별 의미

팀에서 이렇게 약속해 두면 편합니다.

5-4. 커스텀 태그 추가

기본 태그 외에 팀에서 쓰는 태그를 추가할 수 있어요. .vscode/settings.json에 넣으면 됩니다.

복사
{
  "todo-tree.general.tags": [
    "TODO",
    "FIXME",
    "NOTE",
    "HACK",
    "REVIEW"
  ]
}

5-5. 동작 확인

아무 파일에 // TODO: 테스트 주석을 추가하고, 사이드바의 나무 아이콘을 클릭해 보세요. 해당 항목이 트리에 나타나면 잘 동작하고 있는 겁니다.

---

추천 확장 목록 최종본

이 시리즈에서 다룬 모든 확장을 .vscode/extensions.json에 정리한 최종 버전입니다.

복사
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "usernamehw.errorlens",
    "yoavbls.pretty-ts-errors",
    "bradlc.vscode-tailwindcss",
    "stivo.tailwind-fold",
    "dsznajder.es7-react-js-snippets",
    "formulahendry.auto-rename-tag",
    "vincaslt.highlight-matching-tag",
    "eamodio.gitlens",
    "christian-kohler.path-intellisense",
    "wix.vscode-import-cost",
    "rangav.vscode-thunder-client",
    "Gruntfuggly.todo-tree"
  ]
}

시리즈 네 편에 걸쳐 총 14개의 확장을 세팅했어요.

---

시리즈 전체 정리

이 14개 확장을 세팅하면 React + TypeScript + Tailwind 프로젝트를 위한 VS Code 환경이 완성돼요. .vscode/extensions.json과 .vscode/settings.json을 Git에 커밋해 두면 팀원도 같은 환경을 바로 쓸 수 있고요.

문제 해결

GitLens 블레임 정보가 표시되지 않습니다

1. 프로젝트가 Git으로 관리되고 있는지 확인하세요 (git status가 동작하는지)
2. 해당 파일에 커밋 기록이 있어야 합니다. 새로 만든 파일은 커밋 전에는 블레임 정보가 없어요
3. .gitignore에 포함된 파일은 블레임이 안 뜹니다

Import Cost 숫자가 안 나옵니다

1. 해당 패키지가 node_modules에 설치되어 있어야 합니다 (npm install 실행)
2. 계산에 1~2초 걸릴 수 있어요. 잠시 기다려 보세요
3. 일부 패키지는 크기 계산 기능을 지원하지 않을 수 있습니다

Thunder Client가 사이드바에 안 보입니다

1. 확장이 설치되어 있는지 확인하세요
2. 사이드바 아이콘이 숨겨져 있을 수 있어요. 사이드바에서 마우스 오른쪽 버튼을 클릭하면 표시할 항목을 선택할 수 있습니다

TODO Tree에 아무것도 안 나옵니다

1. 프로젝트 파일에 // TODO, // FIXME 같은 주석이 있는지 확인하세요
2. node_modules 폴더 안의 주석은 기본적으로 제외됩니다 (정상)
3. 사이드바의 나무 아이콘이 보이지 않으면 VS Code를 재시작해 보세요