개발자 생산성을 높이는 VS Code 확장 10선

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 기반 코드 자동완성. 주석을 작성하면 코드를 생성하고, 반복적인 보일러플레이트를 자동으로 완성해줍니다. 유료이지만 생산성 향상 효과가 가장 큰 확장입니다.

5. Auto Rename Tag

HTML/JSX에서 여는 태그를 수정하면 닫는 태그가 자동으로 함께 변경됩니다. 간단하지만 없으면 불편한 확장입니다.

6. Path Intellisense

import나 src에서 파일 경로를 입력할 때 자동완성을 제공합니다. 오타로 인한 모듈 불러오기 오류를 방지합니다.

7. Thunder Client

VS Code 내장 REST API 테스트 도구입니다. Postman 없이도 API를 테스트하고 응답을 확인할 수 있습니다. 컬렉션 저장과 환경 변수도 지원합니다.

8. Error Lens

에러와 경고 메시지를 해당 코드 줄 옆에 바로 표시합니다. 파일 하단의 오류 패널을 매번 확인하지 않아도 됩니다.

9. Live Share

실시간 협업 기능입니다. 링크 하나로 팀원과 같은 코드를 동시에 편집하고, 터미널과 서버도 공유할 수 있습니다. 페어 프로그래밍과 코드 리뷰에 유용합니다.

10. TODO Highlight

코드 내의 TODO, FIXME, HACK 주석을 강조 표시합니다. 나중에 처리해야 할 항목을 놓치지 않도록 도와줍니다.

// TODO: 에러 처리 추가하기
// FIXME: 엣지 케이스 버그 수정 필요
// HACK: 임시 방편 — 리팩토링 필요
function processData(data) {
  return data;
}