Visual Studio Code는 수천 개의 확장 프로그램을 제공합니다. 하지만 너무 많은 확장은 오히려 에디터를 느리게 만들 수 있습니다. 수년간 실무에서 사용하며 검증한 필수 확장 10가지를 소개합니다.

1. ESLint

JavaScript/TypeScript 코드의 잠재적 오류와 스타일 문제를 실시간으로 감지합니다. 팀 전체의 코드 스타일을 일관되게 유지하는 데 필수입니다.

// .eslintrc.json
{
  "extends": ["eslint:recommended"],
  "rules": {
    "no-unused-vars": "warn",
    "no-console": "warn"
  }
}

2. Prettier

코드 포매터. 저장할 때마다 자동으로 코드를 정리해줍니다. ESLint와 함께 사용하면 최강의 코드 품질 관리 도구가 됩니다.

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80
}

3. GitLens

각 코드 줄에 마지막으로 수정한 사람과 커밋 메시지를 인라인으로 보여줍니다. "이 코드 누가 왜 짰어?" 를 즉시 해결할 수 있습니다. 협업 프로젝트에서 특히 유용합니다.

4. GitHub Copilot

AI 기반 코드 자동완성 도구입니다. 주석만 작성해도 코드를 생성해주고, 반복되는 보일러플레이트를 순식간에 완성해줍니다. 유료(월 $10)이지만 실무 개발자들 사이에서 생산성 향상 효과가 가장 크다고 평가받는 확장입니다.

  • 함수 이름과 주석만 작성하면 본문 코드 자동 완성
  • 테스트 코드, 정규식, SQL 쿼리도 자동 생성
  • 학생이라면 GitHub Student Developer Pack을 통해 무료 사용 가능

5. Auto Rename Tag

HTML과 JSX에서 여는 태그를 수정하면 닫는 태그가 자동으로 함께 변경됩니다. 설치하기 전까지는 이게 왜 필요한지 모르지만, 한번 쓰면 없앨 수 없는 필수 확장입니다. React 컴포넌트를 자주 작업하는 분이라면 특히 체감 효과가 큽니다.

6. Path Intellisense

import나 src 속성에서 파일 경로를 입력할 때 자동완성을 제공합니다. 깊은 폴더 구조에서도 정확한 경로를 빠르게 입력할 수 있어 오타로 인한 모듈 불러오기 오류를 방지합니다. 설정 파일에서 mappings를 지정하면 절대 경로 별칭도 인식합니다.

7. Thunder Client

VS Code 안에서 바로 REST API를 테스트할 수 있는 경량 HTTP 클라이언트입니다. Postman처럼 요청 컬렉션을 저장하고 환경 변수도 관리할 수 있습니다. 별도 앱을 설치하지 않아도 되므로 개발 환경이 하나로 통합된다는 게 가장 큰 장점입니다.

  • GET, POST, PUT, DELETE, PATCH 등 HTTP 메서드 전체 지원
  • Headers, Body(JSON, Form) 설정, 응답 확인 모두 가능
  • 컬렉션과 환경을 JSON으로 export → 팀원과 공유 가능

8. Error Lens

에러와 경고 메시지를 해당 코드 줄 바로 옆에 인라인으로 표시합니다. 기본 VS Code는 오류를 파일 하단 패널에만 표시하는데, Error Lens를 설치하면 문제가 생긴 줄에서 바로 내용을 확인할 수 있습니다. 코드를 작성하면서 실시간으로 오류를 수정할 수 있어 디버깅 속도가 크게 향상됩니다.

9. Live Share

Microsoft가 만든 실시간 원격 협업 확장입니다. 링크 하나를 공유하면 팀원이 같은 워크스페이스에서 동시에 코드를 편집할 수 있습니다. 터미널과 로컬 서버(localhost)도 공유할 수 있어 페어 프로그래밍, 코드 리뷰, 면접 코딩 테스트 등에 폭넓게 활용됩니다.

  • VS Code, Visual Studio 양쪽에서 모두 사용 가능
  • 공유받는 쪽은 VS Code만 있으면 로컬 환경 설정 불필요
  • 읽기 전용 모드로 권한을 제한해서 공유 가능

10. TODO Highlight

코드 내의 TODO, FIXME, HACK, NOTE 주석을 색상으로 강조 표시합니다. 나중에 처리해야 할 항목을 코드 리뷰 때 놓치거나, 잊고 그냥 배포하는 실수를 방지해줍니다. 설정에서 커스텀 키워드를 추가하거나 하이라이트 색상을 변경할 수도 있습니다.

// TODO: 에러 처리 추가하기
// FIXME: 엣지 케이스 버그 수정 필요
// HACK: 임시 방편 — 리팩토링 필요
function processData(data) {
  return data;
}
팁: 확장 프로필 활용하기
VS Code의 Profiles 기능을 사용하면 프로젝트 종류별로 다른 확장 세트를 유지할 수 있습니다. Python 프로젝트용, React 프로젝트용, 문서 작업용 프로필을 따로 만들어 에디터를 항상 가볍게 유지하세요.

VS Code를 느리지 않게 유지하는 방법

확장 프로그램이 많아지면 VS Code가 눈에 띄게 느려집니다. 실제로 확장 프로그램이 시작 시간의 대부분을 차지하는 경우가 많습니다. 명령 팔레트에서 "Developer: Show Running Extensions"를 실행하면 각 확장이 활성화되는 데 걸린 시간을 볼 수 있습니다. 여기서 수백 밀리초 이상 걸리는 확장이 있다면 그것이 주범입니다. 사용하지 않는 확장은 비활성화하되 삭제하지 말고, 특정 작업이 필요할 때 다시 켜는 방식으로 관리하는 것이 좋습니다.

파일 시스템 감시도 성능에 영향을 줍니다. 대규모 레포지토리에서 node_modules나 .git 폴더까지 감시하면 파일 변경 감지에 CPU가 과도하게 쓰입니다. settings.json에서 files.watcherExclude에 node_modules와 빌드 결과물 폴더를 제외하면 체감 성능이 확실히 좋아집니다. TypeScript나 ESLint 서버가 무거운 프로젝트라면 typescript.tsserver.maxTsServerMemory 설정으로 메모리 상한을 높여주는 것도 방법입니다. 기본값인 3072MB가 실제 프로젝트에서는 부족한 경우가 있습니다.

VS Code에서 생산성을 높이는 숨은 기능들

많은 개발자들이 모르고 지나치는 VS Code의 유용한 기능들이 있습니다. 멀티 커서는 Alt+클릭으로 원하는 위치에 커서를 여러 개 동시에 놓을 수 있어 반복 편집에 매우 유용합니다. Ctrl+D를 반복하면 현재 선택한 텍스트와 동일한 다음 항목을 선택에 추가해, 같은 변수명을 동시에 수정할 수 있습니다. 브레드크럼(Breadcrumb) 내비게이션은 파일 상단에 현재 커서의 위치를 클래스·함수 계층으로 보여줍니다. 클릭하면 같은 파일 내 다른 심볼로 빠르게 이동할 수 있어 긴 파일을 탐색할 때 편리합니다. Timeline 뷰를 사용하면 git 외에도 파일 저장 이력을 로컬에서 관리할 수 있어서, 실수로 내용을 지웠을 때 git commit 없이도 이전 버전을 복원할 수 있습니다.