🚀 VS Code 확장 프로그램 추천 20선

혹시 VS Code를 쓰고 계시지만 기본 기능만 사용하고 계신가요? 🤔 저도 처음엔 그랬는데, 확장 프로그램의 세계를 알게 된 후로는 개발 효율이 몇 배나 올랐습니다!

VS Code의 진짜 매력은 수천 개의 확장 프로그램에 있어요. 하지만 너무 많아서 어떤 걸 설치해야 할지 막막하시죠? 제가 5년간 사용하면서 정말 도움이 된 확장 프로그램 20개를 엄선해서 소개해드리겠습니다. 각각의 활용 팁까지 함께 알려드릴게요! 🎯

🏆 생산성 향상 확장 프로그램 (1-5위)

1. GitHub Copilot

설치 명령: ext install GitHub.copilot

정말 혁신적인 도구예요! 저는 이걸 사용한 후로 코딩 속도가 2배는 빨라졌습니다. AI가 제 생각을 읽는 것처럼 정확한 코드를 제안해주거든요.

주요 기능:

• AI 기반 코드 자동 완성
• 함수 전체를 한 번에 생성
• 주석 기반 코드 생성
• 다양한 언어 지원

# 사용 예시
# 주석으로 설명하면 코드를 자동 생성
# create a function that calculates fibonacci numbers
def fibonacci(n):
    # Copilot이 자동으로 완성해줍니다
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

실전 팁: Tab 키로 제안 수락, Esc로 거절하시면 되고, Alt+]로 다음 제안을 확인하실 수 있어요. 주석을 자세히 쓸수록 더 정확한 코드를 만들어줍니다!

2. GitLens

설치 명령: ext install eamodio.gitlens

팀 프로젝트를 할 때 "이 코드 누가 짰지?"라고 궁금하셨던 적 있으신가요? GitLens가 딱 그런 궁금증을 해결해줍니다. 저는 코드 리뷰할 때 정말 유용하게 쓰고 있어요.

주요 기능:

• 코드 라인별 Git blame 정보
• 커밋 히스토리 시각화
• 파일/라인 변경 이력 추적
• 브랜치 비교 및 관리

추천 설정:

{
  "gitlens.hovers.currentLine.over": "line",
  "gitlens.codeLens.enabled": true,
  "gitlens.blame.avatars": true
}

3. Live Server

설치 명령: ext install ritwickdey.LiveServer

웹 개발하시는 분들께는 정말 필수템이에요! HTML 파일을 수정하면 바로바로 브라우저에 반영되니까 새로고침 누르는 스트레스가 없어집니다. 저는 이걸 쓰기 전에는 F5 키가 닳을 정도로 눌렀거든요. 😅

주요 기능:

• 실시간 브라우저 새로고침
• 로컬 개발 서버 자동 실행
• HTTPS 지원
• 포트 설정 가능

사용법:

// 1. HTML 파일에서 우클릭
// 2. "Open with Live Server" 선택
// 또는 상태바에서 "Go Live" 클릭

// settings.json 설정
{
  "liveServer.settings.port": 5500,
  "liveServer.settings.CustomBrowser": "chrome",
  "liveServer.settings.donotShowInfoMsg": true
}

4. Thunder Client

설치 명령: ext install rangav.vscode-thunder-client

API 테스트를 위해 Postman을 별도로 열어야 했던 번거로움, 이제 그만하시면 좋겠습니다! Thunder Client는 VS Code 안에서 모든 API 테스트를 할 수 있어요. 저는 이걸 쓴 후로 화면 전환하는 시간이 정말 많이 줄었어요.

주요 기능:

• VS Code 내장 REST API 클라이언트
• Postman 대체 가능
• 환경 변수 관리
• 테스트 스크립트 지원

활용 예시:

// Collections 탭에서 새 요청 생성
// 1. Method: GET/POST/PUT/DELETE 선택
// 2. URL 입력: https://api.example.com/users
// 3. Headers, Body, Auth 설정
// 4. Send 버튼 클릭

5. Project Manager

설치 명령: ext install alefragnani.project-manager

여러 프로젝트를 동시에 진행하고 계신가요? 그럼 이 확장은 정말 필수예요! 프로젝트 간 전환이 한 번의 클릭으로 가능해집니다. 저는 클라이언트 프로젝트 5개를 동시에 관리하는데, 이거 없으면 정말 힘들 것 같아요.

주요 기능:

• 프로젝트 빠른 전환
• 즐겨찾기 프로젝트 관리
• Git, Mercurial, SVN 통합
• 태그 기반 분류

단축키:

// 프로젝트 목록 열기: Ctrl+Alt+P (Cmd+Alt+P on Mac)
// 프로젝트 저장: 현재 폴더를 프로젝트로 저장
// 프로젝트 편집: projects.json 직접 수정 가능

🤖 코딩 어시스턴트 및 자동완성 도구 (6-10위)

6. IntelliCode

설치 명령: ext install VisualStudioExptTeam.vscodeintellicode

Microsoft에서 만든 AI 코딩 어시스턴트예요. 제가 쓰는 코딩 패턴을 학습해서 점점 더 똑똑한 제안을 해주더라고요. 팀의 코딩 스타일까지 학습할 수 있어서 협업할 때 특히 좋습니다.

주요 기능:

• AI 기반 코드 추천
• 팀 코딩 패턴 학습
• 다양한 언어 지원
• 스마트 코드 완성

7. Path Intellisense

설치 명령: ext install christian-kohler.path-intellisense

파일 경로 입력할 때 오타 때문에 고생하셨던 적 있으신가요? 이 확장 프로그램이면 그런 스트레스는 안녕이에요! 파일명을 몇 글자만 쳐도 자동으로 완성해주니까 정말 편합니다.

주요 기능:

• 파일 경로 자동 완성
• 상대/절대 경로 지원
• 이미지 파일 미리보기
• 숨김 파일 표시 옵션

// 사용 예시
import something from './src/components/[자동완성]'
<img src="./assets/images/[자동완성]" />

8. Auto Rename Tag

설치 명령: ext install formulahendry.auto-rename-tag

HTML 태그 수정할 때 여는 태그는 바꿨는데 닫는 태그 바꾸는 걸 깜빡하신 적 있으신가요? 저는 이런 실수를 너무 자주 해서 이 확장 프로그램 없으면 정말 불안해요. 😅

주요 기능:

• HTML/XML 태그 자동 동기화
• 여는 태그 수정 시 닫는 태그 자동 변경
• JSX/TSX 지원

9. Bracket Pair Colorizer

참고: VS Code 1.60+ 버전부터 내장 기능으로 제공되니까 별도 설치 안 하셔도 돼요!

설정 방법:

{
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active"
}

10. Code Spell Checker

설치 명령: ext install streetsidesoftware.code-spell-checker

주석이나 문자열에 오타가 있으면 정말 창피하잖아요? 저는 영어 스펠링에 자신이 없어서 이 확장 프로그램이 정말 도움이 많이 됩니다. 특히 README 파일 작성할 때 필수예요!

주요 기능:

• 코드 내 오타 검사
• 주석, 문자열 맞춤법 검사
• 사용자 사전 추가
• 다국어 지원

// cSpell:words customword anotherword
// cSpell:disable-next-line
const someVariableWithIntentionalSpelling = true;

🐛 디버깅 및 테스팅 도구 (11-15위)

11. Error Lens

설치 명령: ext install usernamehw.errorlens

에러나 경고를 찾기 위해 문제 패널을 계속 확인하는 게 번거로우셨나요? Error Lens는 에러를 코드 바로 옆에 표시해줘서 정말 편해요. 저는 이걸 쓰고 나서 디버깅 시간이 확실히 줄었습니다.

주요 기능:

• 에러를 코드 라인에 직접 표시
• 경고, 정보 메시지 하이라이트
• 색상 커스터마이징
• 딜레이 설정 가능

12. Console Ninja

설치 명령: ext install WallabyJs.console-ninja

console.log 결과를 확인하려고 개발자 도구를 계속 열어보시는 게 번거로우셨죠? Console Ninja는 console.log 결과를 코드 바로 옆에 보여줍니다. 디버깅할 때 정말 혁신적이에요!

주요 기능:

• console.log 결과를 코드 옆에 표시
• 실시간 값 확인
• 디버깅 시간 단축
• 조건부 로깅

13. REST Client

설치 명령: ext install humao.rest-client

Thunder Client와 비슷하지만 .http 파일로 API 요청을 관리할 수 있어서 좋아요. 저는 프로젝트별로 .http 파일을 만들어서 Git에 함께 저장해두니까 팀원들과 공유하기도 편합니다.

주요 기능:

• .http 파일로 API 테스트
• 환경 변수 지원
• 응답 저장 및 비교
• GraphQL 지원

### GET request
GET https://api.github.com/users/{{username}}
Authorization: Bearer {{token}}

### POST request
POST https://api.example.com/users
Content-Type: application/json

{
  "name": "John Doe",
  "email": "[email protected]"
}

14. Test Explorer UI

설치 명령: ext install hbenl.vscode-test-explorer

테스트 코드가 많아질수록 관리가 어려워지죠? Test Explorer UI는 모든 테스트를 한눈에 보여주고 실행할 수 있게 해줍니다. 저는 TDD로 개발할 때 정말 유용하게 쓰고 있어요.

주요 기능:

• 테스트 탐색기 UI
• 테스트 실행/디버깅
• 테스트 결과 시각화
• 다양한 테스트 프레임워크 지원

15. Debugger for Chrome (Deprecated)

참고: VS Code 내장 JavaScript Debugger로 대체되었어요. 별도 설치 없이도 디버깅 기능을 사용하실 수 있습니다!

launch.json 설정:

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
}

🎨 테마 및 UI 개선 확장 (16-20위)

16. Material Icon Theme

설치 명령: ext install PKief.material-icon-theme

기본 파일 아이콘이 밋밋하다고 느끼셨나요? Material Icon Theme을 쓰면 파일 탐색기가 훨씬 예뻐지고, 파일 타입을 한눈에 구분할 수 있어요. 시각적 만족도가 정말 높아집니다!

주요 기능:

• 파일/폴더 아이콘 개선
• 1000+ 아이콘 지원
• 커스텀 아이콘 설정
• 폴더 테마 옵션

17. One Dark Pro

설치 명령: ext install zhuangtongfa.Material-theme

어두운 테마를 좋아하시는 분들께 강력 추천해요! Atom의 인기 테마를 VS Code로 포팅한 건데, 눈이 정말 편하더라고요. 저는 밤에 코딩할 때 이 테마 없으면 안 돼요.

특징:

• Atom의 인기 테마 포팅
• 눈의 피로도 감소
• Vivid, Italic 버전 제공
• 다양한 언어 최적화

18. indent-rainbow

설치 명령: ext install oderwat.indent-rainbow

Python이나 YAML 파일을 다룰 때 들여쓰기 때문에 헷갈리신 적 있으신가요? indent-rainbow는 들여쓰기 레벨을 색상으로 구분해줘서 정말 편해요. 코드 구조를 한눈에 파악할 수 있습니다!

주요 기능:

• 들여쓰기 레벨 색상 구분
• 탭/스페이스 오류 감지
• 커스텀 색상 설정
• 언어별 설정 가능

19. Better Comments

설치 명령: ext install aaron-bond.better-comments

주석도 색상으로 구분하면 훨씬 보기 좋아져요! TODO, 중요한 주석, 질문 등을 다른 색으로 표시해줘서 주석 관리가 정말 편해집니다.

주석 스타일:

// ! 중요한 정보
// ? 질문이나 확인 필요
// TODO: 할 일 목록
// * 하이라이트된 설명
// // 취소선 주석

20. Peacock

설치 명령: ext install johnpapa.vscode-peacock

여러 프로젝트를 동시에 작업할 때 창이 헷갈리신 적 있으신가요? Peacock은 프로젝트별로 다른 색상 테마를 적용해줘서 정말 편해요. 저는 클라이언트별로 다른 색상을 지정해서 쓰고 있습니다!

주요 기능:

• 워크스페이스별 색상 테마
• 여러 프로젝트 구분
• 상태바, 타이틀바 색상 변경
• 즐겨찾기 색상 저장

⚙️ 확장 프로그램 관리 팁

확장 프로그램을 많이 설치하시다 보면 VS Code가 느려질 수 있어요. 제가 사용하는 몇 가지 관리 팁을 알려드릴게요!

성능 최적화

// settings.json
{
  // 시작 시 확장 프로그램 지연 로드
  "extensions.experimental.affinity": {
    "vscodevim.vim": 1
  },
  
  // 불필요한 확장 비활성화
  "extensions.ignoreRecommendations": true,
  
  // 확장 자동 업데이트
  "extensions.autoUpdate": true
}

프로파일별 확장 관리

이 기능 정말 유용해요! 웹 개발용, Python 개발용, 글쓰기용 등으로 프로파일을 나눠서 필요한 확장만 활성화하시면 됩니다.

// 1. 설정 > 프로필 > 새 프로필 만들기
// 2. 용도별 프로필 생성 (Frontend, Backend, Python 등)
// 3. 각 프로필에 필요한 확장만 활성화

확장 프로그램 추천 설정

팀 프로젝트에서 정말 유용한 기능이에요! 프로젝트에 필요한 확장을 미리 설정해두면 새로운 팀원도 쉽게 환경을 구성할 수 있어요.

// .vscode/extensions.json
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "eamodio.gitlens"
  ],
  "unwantedRecommendations": [
    "ms-vscode.vscode-typescript-tslint-plugin"
  ]
}

동기화 설정

여러 컴퓨터에서 작업하시는 분들께 필수 기능이에요! 설정을 한 번만 해두면 어디서든 동일한 환경으로 작업하실 수 있어요.

// Settings Sync 활성화
// 1. 계정 로그인
// 2. 설정 > Settings Sync 켜기
// 3. 동기화할 항목 선택
// - 설정
// - 키보드 단축키
// - 확장
// - UI 상태
// - 스니펫

🎓 마무리

지금까지 VS Code 확장 프로그램 20개를 함께 살펴봤는데, 어떠셨나요? 🤔

VS Code의 진정한 힘은 확장 프로그램에서 나온다고 생각해요. 하지만 너무 많이 설치하면 오히려 성능이 저하될 수 있으니, 본인의 개발 환경에 꼭 필요한 것만 선별해서 사용하시면 좋겠습니다.

저의 추천 조합:

• 🌐 웹 개발: Live Server + Auto Rename Tag + Path Intellisense
• 🐍 Python: Python + Pylance + Jupyter
• ⚛️ React: ES7+ React snippets + Simple React Snippets
• 📱 Flutter: Flutter + Dart + Awesome Flutter Snippets

여러분도 본인만의 개발 스택에 맞는 확장 프로그램 조합을 찾아서 생산성을 극대화해보시면 좋겠습니다! 🚀

이 글이 도움이 되셨다면 댓글로 여러분이 애용하는 VS Code 확장 프로그램도 공유해주시면 좋겠습니다! 함께 더 나은 개발 환경을 만들어가요. 😊

Featured image by Fotis Fotopoulos on Unsplash