Luka's Playground - 개발자의 놀이터

VSCode 확장 프로그램 — 2026년 실사용 기준 추천

왜 이 글을 쓰나

확장 프로그램 추천 글은 많다. 대부분 20~30개를 나열하는데, 실제로 다 설치하면 VSCode가 무거워지기만 한다. 내가 지금 매일 쓰고 있는 것만 추렸다. 안 쓰는 건 빼고, 진짜 생산성에 차이가 나는 것만 정리했다.

---

Tier 1: 무조건 설치

이건 설치 안 하면 손해라고 단언할 수 있는 것들이다.

GitHub Copilot

AI 코드 자동완성. 2024년까지는 "신기하다" 수준이었다면, 2026년 지금은 없으면 불편한 수준이 됐다.

// 주석만 쓰면 함수를 알아서 만들어준다
// 배열에서 중복 제거하고 정렬하는 함수
function uniqueSorted(arr) {
    return [...new Set(arr)].sort((a, b) => a - b);
}

월 $10인데, 무료 대안으로 Supermaven이 있다. Supermaven은 100만 토큰 컨텍스트 윈도우를 지원해서 대규모 프로젝트에서의 자동완성 품질이 좋다. 완전 무료다.

무료 플랜: Supermaven > Codeium > Tabnine 순으로 추천한다.

Error Lens

에러/경고 메시지를 코드 라인 옆에 인라인으로 표시해준다.

기존에는 빨간 밑줄 위에 마우스를 올려야 에러 메시지가 보였다. Error Lens를 쓰면 코드 옆에 바로 뜬다. 디버깅 속도가 체감상 2배는 빨라진다.

const x: number = "hello"  // ← Type 'string' is not assignable to type 'number'.

이렇게 에러가 코드 바로 옆에 뜬다. 이걸 한번 써보면 없이 못 돌아간다.

Prettier

코드 포맷터. 팀이든 혼자든 무조건 켜둬야 한다.

// .prettierrc
{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "all",
    "printWidth": 100
}

settings.json에서 저장 시 자동 포맷을 걸어두면 코드 스타일을 신경 쓸 일이 없어진다:

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

---

Tier 2: 강력 추천

없어도 되지만, 쓰면 확실히 편해지는 것들.

GitLens

Git 이력을 코드 레벨에서 보여준다. 각 라인에 마지막 커밋 정보(누가, 언제, 왜)가 표시된다.

"이 코드 왜 이렇게 바뀌었지?"라는 질문에 대한 답을 git log를 치지 않고도 바로 확인할 수 있다. 혼자 개발할 때도 유용하다. 일주일 전 내가 뭘 생각하고 고쳤는지 보인다.

Thunder Client

VSCode 안에서 바로 API를 테스트할 수 있는 경량 REST 클라이언트다. Postman을 따로 켜지 않아도 된다.

GET  https://api.example.com/users
POST https://api.example.com/users  { "name": "Luka" }

Postman이 점점 무거워지고 있어서, 간단한 API 테스트는 Thunder Client로 대체했다. 에디터를 떠나지 않아도 되는 게 핵심이다.

Todo Tree

코드에 남긴 TODO, FIXME, HACK 주석을 트리 뷰로 모아서 보여준다.

// TODO: 에러 핸들링 추가
// FIXME: n이 0일 때 divide by zero
// HACK: 임시로 하드코딩, 나중에 config로 빼기

프로젝트가 커지면 TODO 주석이 어디에 있는지 까먹는다. Todo Tree가 전부 모아서 사이드바에 보여준다.

---

Tier 3: 웹 개발자라면

Live Server

HTML/CSS/JS 파일을 수정하면 브라우저가 자동으로 새로고침된다. 정적 파일 개발할 때 필수다. 내 GitHub Pages 포트폴리오 작업할 때도 이걸 쓰고 있다.

Auto Rename Tag

HTML 태그 이름을 수정하면 짝을 이루는 닫는/여는 태그도 같이 바뀐다.

<!-- <div>를 <section>으로 바꾸면 </div>도 자동으로 </section>으로 -->
<section>
    <p>내용</p>
</section>

단순하지만 실수를 줄여준다.

Tailwind CSS IntelliSense

Tailwind를 쓴다면 필수. 클래스 자동완성, 미리보기, 린팅을 지원한다.

<div class="flex items-center justify-between p-4 bg-slate-100 rounded-lg">

클래스명 위에 마우스를 올리면 실제 CSS 속성이 보인다. Tailwind를 안 쓰면 설치할 필요 없다.

---

Tier 4: AI 에이전트 시대

2026년의 가장 큰 변화다. 단순 자동완성을 넘어서, AI가 직접 코드를 작성하고 파일을 수정하는 에이전트형 도구들이 등장했다.

Cline

오픈소스 AI 코딩 에이전트. VSCode 안에서 자율적으로 멀티스텝 작업을 수행한다. 예전 이름은 Claude Dev였다.

"로그인 페이지 만들어줘"라고 하면 파일 생성, 코드 작성, 의존성 설치까지 알아서 한다. API 키만 있으면 Claude, GPT 등 원하는 모델을 연결할 수 있다.

Copilot이 한 줄씩 제안한다면, Cline은 작업 단위로 실행한다. 성격이 다르다.

Claude Code (CLI)

Anthropic의 터미널 기반 AI 에이전트. VSCode의 터미널에서 바로 쓸 수 있다. 프로젝트 구조를 이해하고, 여러 파일을 동시에 수정하고, 커밋까지 해준다.

확장 프로그램은 아니지만, VSCode와 함께 쓸 때 시너지가 크다.

Roo Code

Cline의 포크에서 출발한 에이전트. 역할(mode)을 바꿔가며 코딩, 아키텍처 설계, 디버깅 등을 수행한다. 빠르게 성장 중인 프로젝트다.

에이전트 도구 주의점: 이 도구들은 파일을 직접 수정한다. Git 커밋을 자주 해두고, 변경 사항을 반드시 리뷰해야 한다. 맹신하면 안 된다.

---

설치하지 않는 것들

추천만 하면 공평하지 않으니, 일부러 안 쓰는 것도 적는다.

확장	이유
Bracket Pair Colorizer	VSCode에 네이티브로 내장됨 (editor.bracketPairColorization.enabled)
Path Intellisense	Copilot이 경로도 제안해줘서 체감 효과 줄어듦
indent-rainbow	있으면 이쁘지만 성능에 영향. 없어도 됨

예전에는 필수였지만 VSCode 자체에 흡수된 기능이 꽤 있다. 설치 전에 이미 내장되어 있는지 확인하는 습관이 좋다.

---

내 settings.json 일부

참고용으로 내 설정 중 확장 관련 부분을 공유한다:

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": true,
    "editor.minimap.enabled": false,
    "editor.stickyScroll.enabled": true,
    "errorLens.enabledDiagnosticLevels": ["error", "warning"],
    "gitlens.currentLine.enabled": true,
    "todohighlight.keywords": ["TODO", "FIXME", "HACK", "BUG"]
}

minimap은 끈다. 화면이 좁은 노트북에서는 공간 낭비다. stickyScroll은 켠다. 긴 파일에서 현재 함수/클래스가 상단에 고정되니 컨텍스트를 잃지 않는다.

---

마무리

확장 프로그램은 적게, 확실한 것만 쓰는 게 맞다. 20개 설치하면 VSCode 시작 속도가 느려지고, 단축키가 충돌하고, 설정이 꼬인다.

내 기준: Tier 1은 무조건, Tier 2~3은 필요한 것만, Tier 4는 AI 도구 하나만 골라서 쓴다.

---

에디터: VSCode (+ Cursor도 병행 중)
테마: One Dark Pro / GitHub Dark
폰트: Fira Code (합자 활성화)