VS Code 확장 프로그램 베스트 20, 개발 생산성이 2배로 올라간다

VS Code를 제대로 쓰고 있는 걸까

VS Code는 전 세계에서 가장 많이 쓰이는 코드 에디터다. 나도 3년째 쓰고 있는데, 처음에는 기본 기능만으로도 충분하다고 생각했다. 그런데 확장 프로그램을 하나둘 설치하면서 생산성이 체감될 정도로 올라갔다.

수백 개의 확장 프로그램을 설치했다 지웠다를 반복하면서, 결국 진짜 쓸모 있는 것만 남겼다. 오늘은 그중 베스트 20개를 카테고리별로 소개한다.

주의할 점은, 확장 프로그램을 너무 많이 설치하면 에디터가 느려진다는 거다. 필요한 것만 골라서 쓰자.

코드 품질 관련 확장

ESLint는 자바스크립트/타입스크립트 개발자에게 필수다. 코드 작성 중에 실시간으로 문법 에러와 스타일 위반을 잡아준다. 팀 프로젝트에서 코드 품질을 일정하게 유지하는 데 큰 도움이 된다.

Prettier는 코드 포매터로, 저장할 때마다 코드를 자동으로 정리해준다. 들여쓰기, 줄바꿈, 따옴표 스타일 등을 일관되게 맞춰준다.

SonarLint는 잠재적인 버그와 보안 취약점을 찾아준다. 코드 리뷰 전에 미리 문제를 발견할 수 있어서 유용하다.

생산성 향상 확장

GitHub Copilot은 AI 기반 코드 자동 완성 도구다. 코드를 쓰다 보면 다음에 올 코드를 예측해서 제안해준다. 월 10달러짜리 유료 서비스지만, 생산성 향상을 생각하면 충분히 가치 있다.

Auto Rename Tag는 HTML/JSX에서 여는 태그를 수정하면 닫는 태그도 자동으로 바꿔준다. 단순하지만 매일 쓰는 기능이다.

Path Intellisense는 파일 경로를 자동 완성해주는 확장이다. import 구문을 쓸 때 파일 경로를 일일이 타이핑하지 않아도 된다.

테마와 아이콘

One Dark Pro 테마는 Atom 에디터의 인기 테마를 VS Code로 가져온 것이다. 눈이 편하면서도 코드 가독성이 좋다.

Material Icon Theme는 파일과 폴더에 직관적인 아이콘을 붙여준다. 파일 탐색기에서 파일 종류를 한눈에 구별할 수 있다.

테마 선택은 개인 취향이지만, 장시간 코딩할 때는 다크 테마가 눈에 부담이 적다.

Git 관련 확장

GitLens는 VS Code의 Git 기능을 극대화해준다. 코드 한 줄 한 줄이 누가 언제 수정했는지 보여주고, 커밋 히스토리를 시각적으로 탐색할 수 있다.

Git Graph는 브랜치 구조를 그래프로 보여주는 확장이다. 복잡한 브랜치 전략을 쓰는 프로젝트에서 특히 유용하다.

개발 과정에서 데이터 흐름을 분석하는 것처럼 코드의 변경 이력을 추적하는 건 중요하다. 큰손탐지기가 실시간 데이터 흐름을 분석하듯, GitLens는 코드의 변경 흐름을 분석해준다.

디버깅과 테스팅

Thunder Client는 VS Code 안에서 API를 테스트할 수 있는 확장이다. Postman을 따로 켜지 않아도 되니까 편하다.

Error Lens는 에러 메시지를 코드 옆에 인라인으로 보여준다. 하단 패널을 열지 않아도 어디서 에러가 났는지 바로 알 수 있다.

REST Client는 .http 파일을 만들어서 API 요청을 보내고 응답을 확인할 수 있다. 팀원과 API 테스트 케이스를 공유하기에도 좋다.

원격 개발 관련

Remote - SSH는 원격 서버에 접속해서 마치 로컬처럼 개발할 수 있게 해준다. 서버의 파일을 직접 수정하고 터미널도 쓸 수 있다.

Dev Containers는 도커 컨테이너 안에서 개발 환경을 구성할 수 있다. 팀원 모두가 동일한 개발 환경을 쓸 수 있어서 환경 차이로 인한 버그를 줄여준다.

WSL 확장은 윈도우에서 WSL 환경의 파일을 VS Code로 편집할 수 있게 해준다.

마크다운과 문서화

Markdown All in One은 마크다운 작성에 필요한 단축키, 미리보기, 목차 생성 등을 제공한다. README나 문서를 쓸 때 편리하다.

Draw.io Integration은 VS Code 안에서 다이어그램을 그릴 수 있게 해준다. 아키텍처 문서를 코드와 함께 관리할 수 있다.

프로젝트에서 psvip.kr 같은 외부 서비스와 연동할 때 API 문서를 마크다운으로 정리하면 팀 커뮤니케이션이 훨씬 수월해진다.

확장 프로그램 관리 팁

확장 프로그램은 필요한 것만 설치하고, 쓰지 않는 건 비활성화하자. 프로젝트별로 다른 확장이 필요하다면 프로필 기능을 활용하면 된다.

정기적으로 설치된 확장 목록을 점검하고 불필요한 것을 정리하는 습관도 중요하다. 에디터가 무거워지면 코딩 리듬이 깨진다.

좋은 도구를 잘 활용하면 개발 생산성이 확실히 올라간다. 큰손탐지기(psvip.kr)로 데이터 분석 생산성을 높이듯, VS Code 확장으로 코딩 생산성을 높여보자.