[Tip] VS Code 플러그인 추천 TOP 10 (개발 생산성 향상)

하루 종일 쓰는 에디터, 작은 확장이 시간을 통째로 절약해줍니다. 이 글은 설치하자마자 바로 체감 나는 VS Code 플러그인 TOP 10을 선정 기준·활용 팁과 함께 정리했습니다.

VS Code 플러그인 추천 TOP 10 (개발 생산성 향상)

모든 항목은 “자주 쓰는 동작을 한 번에”라는 기준으로 골랐습니다. 팀 표준화가 쉬운 확장 위주이며, 프론트·백엔드·데브옵스 공통으로 효율을 끌어올립니다.

0. 개요

1. 선정 기준: 왜 이 10개인가?
2. TOP 10 카탈로그(요약 표)
3. TOP 10 상세 가이드(설치·활용 팁)
4. 빠른 설치/동기화 팁
5. 팀 표준 설정 예시(settings.json)
6. 상황별 추천 조합
7. FAQ
8. 결론

1. 선정 기준: 체감, 표준화, 충돌 최소

• 시간 절약: 작성·리뷰·테스트·디버깅 단계의 반복 동작을 줄이는가?
• 팀 표준화: 설정을 레포에 동봉해 모두 같은 결과를 얻을 수 있는가?
• 충돌 최소: 서로 상충하지 않고 안정적으로 함께 쓸 수 있는가?

2. TOP 10 카탈로그(요약)

순위	확장	요약	추천 포인트
1	GitLens	깃 히스토리·블레임·리뷰를 에디터에서	리뷰/디버깅 속도↑, 변경 의도 파악
2	Prettier	일관된 코드 포매터	저장 시 자동 정렬, 팀 합의 표준
3	ESLint	문법/스타일 규칙 검사	저장 시 자동 수정, 품질 게이트
4	Error Lens	오류/경고를 라인 안에 표시	문맥 전환 줄이고 즉시 수정
5	Thunder Client	가벼운 API 테스트 클라이언트	포스트맨 대체, 프로젝트 내 보관
6	Docker	이미지/컨테이너 관리	로컬 환경 표준화, 디버깅 편의
7	Dev Containers	컨테이너 기반 개발 환경	“어디서든 같은 개발환경” 실현
8	GitHub Copilot	AI 코드 보조	보일러플레이트/테스트 작성 가속
9	Live Share	실시간 페어/멀티 편집	원격 코드 리뷰/디버깅 협업
10	Path Intellisense	파일 경로 자동완성	리소스 경로 오타/탐색 감소

3. TOP 10 상세 가이드

3.1 GitLens

• 파일 내 라인별 blame·히스토리·작성자 정보로 변경 의도를 즉시 파악.
• PR/커밋을 열지 않고도 에디터에서 탐색→리뷰→추적까지 가능.

3.2 Prettier

• 저장 시 포맷을 켜고, ESLint와 충돌하지 않도록 prettier 플러그인을 함께 구성.
• 레포에 .prettierrc 보관 → 개인 설정 차이를 제거.

3.3 ESLint

• 저장 시 codeActionsOnSave로 자동 고침을 실행해 린트 경고를 최소화.
• 모노레포는 워크스페이스 루트와 패키지별 설정을 구분.

3.4 Error Lens

• 문제 탭 왕복 없이 라인에서 즉시 오류를 확인하고 수정.
• 신호가 과하다면 경고 투명도를 낮춰 집중도 유지.

3.5 Thunder Client

• 요청 모음과 환경변수를 워크스페이스에 함께 버전 관리.
• CI에서 재현하기 쉽도록 샘플 요청을 README에 연결.

3.6 Docker

• 이미지 빌드/태그/푸시를 패널에서 바로 실행, 로그 확인도 용이.
• 컨테이너 내부 셸 접속으로 의존성 충돌 디버깅에 강력.

3.7 Dev Containers

• .devcontainer/devcontainer.json에 언어/툴/확장을 정의 → 새 개발자 온보딩 즉시 완료.
• 팀 전체가 “같은 환경”에서 빌드/테스트/디버깅.

3.8 GitHub Copilot

• 보일러플레이트·테스트·문서 주석 등 반복 생성 업무에 집중 활용.
• 민감/보안 관련 코드는 반드시 리뷰로 검증.

3.9 Live Share

• 원격 페어프로그래밍·코드리뷰·디버깅에 적합.
• 음성/채팅·서버 포트 공유로 회의 전환 비용↓

3.10 Path Intellisense

• 이미지·환경파일·모듈 경로 오타를 줄이고 탐색 속도↑
• 모노레포에선 baseUrl/paths와 함께 쓰면 더 편리.

4. 빠른 설치/동기화 팁

4.1 추천 확장 ID 목록

eamodio.gitlens, esbenp.prettier-vscode, dbaeumer.vscode-eslint, usernamehw.errorlens,
rangav.vscode-thunder-client, ms-azuretools.vscode-docker, ms-vscode-remote.remote-containers,
GitHub.copilot, ms-vsliveshare.vsliveshare, christian-kohler.path-intellisense

4.2 CLI로 한 번에 설치

code --install-extension eamodio.gitlens
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension usernamehw.errorlens
code --install-extension rangav.vscode-thunder-client
code --install-extension ms-azuretools.vscode-docker
code --install-extension ms-vscode-remote.remote-containers
code --install-extension GitHub.copilot
code --install-extension ms-vsliveshare.vsliveshare
code --install-extension christian-kohler.path-intellisense

5. 팀 표준 설정 예시 (settings.json)

저장 시 포맷/린트, Copilot 제안, Error Lens 표기 강도 등을 워크스페이스에 고정합니다.

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.tabSize": 2,
  "files.eol": "\n",
  "prettier.singleQuote": true,
  "prettier.trailingComma": "all",
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "errorLens.warningBackground": "#00000000",
  "errorLens.warningForeground": "#c084fc",
  "errorLens.errorBackground": "#00000000",
  "errorLens.errorForeground": "#ef4444",
  "path-intellisense.mappings": { "@": "${workspaceRoot}/src" },
  "gitlens.currentLine.enabled": true,
  "github.copilot.enable": {
    "*": true,
    "plaintext": false,
    "markdown": true
  }
}

5.1 Dev Containers 기본값(devcontainer.json)

{
  "name": "Node Dev",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:22",
  "features": {
    "ghcr.io/devcontainers/features/common-utils:2": {}
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "eamodio.gitlens",
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint",
        "usernamehw.errorlens"
      ],
      "settings": {
        "editor.formatOnSave": true
      }
    }
  }
}

6. 상황별 추천 조합

상황	추천 조합	이유
프론트엔드	Prettier, ESLint, Error Lens, Path Intellisense	UI 코드 일관성 + 즉시 오류 표기 + 경로 생산성
백엔드/API	ESLint, Thunder Client, GitLens, Docker	계약 테스트, 히스토리 파악, 컨테이너 표준화
데브옵스	Docker, Dev Containers, GitLens	환경 재현성 + 빌드/배포 생산성
원격 협업	Live Share, GitLens	실시간 동시 편집 + 변경 맥락 공유

7. FAQ

7.1 Prettier와 ESLint가 충돌해요.

eslint-config-prettier를 적용해 스타일 규칙을 비활성화하고, 저장 시 ESLint fixAll과 formatOnSave를 함께 켭니다. 레포에 .prettierrc와 .eslintrc를 포함하세요.

7.2 Copilot은 꼭 써야 하나요?

보일러플레이트·테스트·문서화 등 반복 생성 업무에서 효과가 큽니다. 민감/보안 코드는 반드시 리뷰로 검증하세요.

7.3 Thunder Client vs REST Client?

둘 다 가볍습니다. UI 워크플로가 편한 분은 Thunder Client, 파일 기반으로 커밋 관리하고 싶다면 REST Client가 어울립니다.

8. 결론

• 상시 쓰는 동작(포맷, 린트, 깃 탐색, API 테스트, 컨테이너)을 에디터 안에서 끝내면 체감 성능이 가장 큽니다.
• 레포에 설정을 넣어 개인/팀 간 결과 일치를 보장하세요.
• 필수 10개부터 시작해, 팀 상황에 맞게 1~2개만 추가/교체하면 충분합니다.