VS Code 생산성 확장 프로그램 TOP 10

선정 기준

• 실제 일상 업무에서 매일 사용하는 것
• 설정 없이 바로 효과를 볼 수 있는 것
• 성능에 부담이 적은 것

1. Error Lens

에러와 경고를 코드 라인 옆에 인라인으로 표시합니다. Problems 패널을 열 필요 없이 바로 확인 가능.

설치 후 달라지는 점: 타이핑하면서 실시간으로 에러를 확인할 수 있어 피드백 루프가 짧아집니다.

2. Pretty TypeScript Errors

TypeScript 에러 메시지를 읽기 쉽게 포맷팅합니다. 복잡한 제네릭 타입 에러를 트리 구조로 보여줌.

사용 전: Type 'X' is not assignable to type 'Y & Z & ...' 사용 후: 트리 형태로 어디가 다른지 시각적으로 표시

3. GitLens

git blame, 파일 히스토리, 브랜치 비교를 에디터 안에서 바로 봅니다.

핵심 기능:

• 코드 라인마다 최근 커밋 정보 표시
• 파일별 변경 히스토리
• 브랜치 간 diff

4. GitHub Copilot

AI 코드 자동완성. 월 $10이지만 개발 속도 대비 ROI가 높습니다.

팁: Tab으로 전체 수락, Ctrl+→로 단어 단위 수락

5. Auto Rename Tag

HTML/JSX 여는 태그를 수정하면 닫는 태그도 자동 수정. 단순하지만 매일 쓰는 기능.

6. Tailwind CSS IntelliSense

Tailwind 클래스 자동완성, 미리보기, 정렬. Tailwind 사용자 필수.

기능:

• 클래스명 자동완성
• 호버 시 CSS 미리보기
• @apply에서도 작동

7. Import Cost

import 문 옆에 번들 크기를 표시합니다. 무거운 라이브러리를 실수로 가져오는 것을 방지.

// date-fns의 format → 5.2K (gzipped)
// moment 전체 → 72.1K (gzipped) ← 주의!

8. Toggle Boolean

커서 위의 boolean 값을 단축키 하나로 토글. true ↔ false.

작아 보이지만 조건문 디버깅할 때 매번 쓰게 됩니다.

9. Console Ninja

console.log 결과를 에디터 안에서 인라인으로 표시합니다. 터미널과 에디터를 왔다갔다할 필요가 없음.

10. REST Client

.http 파일에서 직접 HTTP 요청을 보내고 응답을 확인합니다. Postman 대체.

### 사용자 목록 조회
GET https://api.example.com/users
Authorization: Bearer {{token}}

### 사용자 생성
POST https://api.example.com/users
Content-Type: application/json

{
  "name": "홍길동",
  "email": "hong@example.com"
}

보너스: 설정 동기화

VS Code 내장 Settings Sync를 켜두면 여러 PC에서 동일한 환경을 유지할 수 있습니다.

Settings → Turn on Settings Sync → GitHub 로그인