VS Code 확장 12가지와 필수 설정으로 개발 흐름 정리하기

준비물#

• VS Code 최신 안정판
• 작업 언어 1개 이상 (예: JavaScript/TypeScript, Python)
• 소요: 설치 2030분, 설정 안정화 12일

설치 전 원칙#

1. 한 번에 20개를 깔지 말고 카테고리당 1~2개씩.
2. 느려지면 Developer: Show Running Extensions로 범인 확인.
3. 팀 프로젝트는 워크스페이스 설정(.vscode/settings.json)에 맞춰 개인 확장과 분리.

확장 12가지 (용도 + 권장 설정)#

설치 후 5분 설정 (권장 최소셋)#

사용자 또는 워크스페이스 settings.json 예시:

1
{
2
  "editor.formatOnSave": true,
3
  "editor.codeActionsOnSave": {
4
    "source.fixAll.eslint": "explicit"
5
  },
6
  "files.autoSave": "afterDelay",
7
  "files.autoSaveDelay": 1000,
8
  "editor.tabSize": 2,
9
  "editor.rulers": [100],
10
  "files.exclude": {
11
    "**/node_modules": true
12
  }
13
}

추가 팁:

1. 프로필 분리 — 프론트/데이터/문서용 프로필을 나누면 확장 충돌이 줄어듭니다.
2. 단축키 — 작업 편집기: 명령 팔레트에서 자주 쓰는 명령에 키 할당.
3. .vscode/extensions.json — 팀에 추천 확장을 공유 (recommendations 배열).

Before / After (개인 워크플로 기준)#

자주 하는 실수#

• 포맷터 2개가 경쟁 → 기본 포맷터 하나만.
• 모든 저장 동작에 fix가 돌아가 커밋 난잡 → codeActionsOnSave 범위 축소.
• 테마·아이콘만 잔뜩 설치 → 체감 이득 적고 시작 느림.

FAQ#

Q. 꼭 12개 다 깔아야 하나요? 아니요. ESLint+Prettier+Error Lens+GitLens 4개부터 쓰세요.

Q. Vim 확장도 추천하나요? 이미 Vim에 익숙하면 이득, 아니면 학습 비용이 큽니다. 필수 목록에서 뺐습니다.

Q. Cursor를 쓰면 VS Code 확장이 의미 없나요? Cursor는 VS Code 호환이 많아 상당수 확장이 그대로 됩니다. 차이는 AI 기능 쪽입니다 (포스트 14).

확장 설치 순서 (권장)#

1. Prettier + format on save
2. ESLint (프로젝트에 설정 파일이 있을 때)
3. Error Lens
4. GitLens
5. 언어 테스트 러너
6. API 클라이언트
7. AI 확장은 정책 확인 후

설치 후 Help: Start Extension Bisect로 성능 문제를 이분 검색할 수 있습니다.

워크스페이스 추천 확장 파일 예#

1
{
2
  "recommendations": [
3
    "esbenp.prettier-vscode",
4
    "dbaeumer.vscode-eslint",
5
    "usernamehw.errorlens",
6
    "eamodio.gitlens"
7
  ]
8
}

팀원 클론 시 알림이 떠 온보딩이 빨라집니다.

추가 FAQ#

Q. 회사 PC에 개인 확장 프로필을 써도 되나요? 보안 정책을 따르세요. 라이선스·데이터 유출 확장은 금지 목록을 확인합니다.

Q. 설정 동기화? Settings Sync를 쓰되, 토큰·프록시 등 민감 설정은 분리하세요.

실습 체크리스트 (VS Code 확장)#

• 필수 확장만 설치하고 나머지는 비활성화했는가
• Format on Save / ESLint가 동작하는가
• 워크스페이스 추천 확장 파일을 저장했는가
• 불필요한 확장이 시작 시간을 늘지 않는가
• 설정 JSON 백업 또는 Settings Sync를 준비했는가

확장 선택 의사결정 트리#

확장을 고를 때는 “유명해서”가 아니라 매일 반복하는 마찰을 기준으로 합니다.

1. 저장할 때마다 포맷이 흔들리면 → Prettier/ESLint 계열을 최우선으로 둡니다.
2. Git 히스토리를 자주 보면 → Git 관련 확장 1개만 고릅니다. 두 개 이상 켜면 사이드바가 경쟁합니다.
3. 오타·미사용 import가 잦으면 → 언어 서버와 린트가 먼저고, AI 확장은 그다음입니다.
4. 원격 서버에서 개발하면 → UI 장식 확장보다 원격 호환·성능이 검증된 것만 남깁니다.

성능 측정 방법 (5분)#

1. 확장 모두 켠 상태에서 창을 열고 체감 시간을 기록합니다.
2. 절반을 비활성화한 뒤 같은 레포를 다시 엽니다.
3. 차이가 크면 이진 탐색으로 범인을 찾습니다.
4. “있으면 좋은” 확장은 워크스페이스 추천 파일에만 남기고 기본 비활성으로 둡니다.

확장 관리는 한 번 하고 끝나는 일이 아닙니다. 분기마다 사용 빈도 0인 확장 정리 데이를 두면, 새 노트북 온보딩 시간도 같이 줄어듭니다. 팀 표준 확장 목록을 README에 링크해 두면 신입 개발자가 유튜브 추천 확장 세트를 무분별하게 설치하는 일을 막을 수 있습니다.

이 글을 끝내면 할 수 있는 것#

• 확장 12가지의 용도를 구분하고, 당장 쓸 최소 세트만 설치한다.
• Format on Save·ESLint·Git 관련 설정을 5분 안에 맞춘다.
• 확장이 느려질 때 비활성화로 원인 격리하는 방법을 안다.

설치 순서 권장 (충돌 최소화)#

1. 언어 팩·한글 키 바인딩(필요 시)
2. ESLint + Prettier (포맷 전쟁 예방)
3. GitLens 또는 기본 Git UI
4. 오류 렌즈·경로 인텔리센스
5. 테스트/디버그 확장
6. AI 확장(정책 허용 시 마지막)

settings.json 최소 예시 (개념)#

1
{
2
  "editor.formatOnSave": true,
3
  "editor.defaultFormatter": "esbenp.prettier-vscode",
4
  "editor.codeActionsOnSave": {
5
    "source.fixAll.eslint": "explicit"
6
  },
7
  "files.eol": "\n"
8
}

팀 규칙이 있으면 워크스페이스 .vscode/settings.json에 두어 개인 설정을 덮어쓰지 않게 합니다.

트러블슈팅#

FAQ 보강#

Q. 확장을 많이 깔수록 생산적인가요? 아닙니다. 매일 쓰는 8~12개가 보통 상한입니다. 나머진 워크스페이스 추천으로만.

Q. Vim 키 바인딩과 충돌해요. 키맵 확장 켜면 기본 단축키가 바뀝니다. 치트시트를 옆에 두고 1주만 버티세요.

Q. 회사 PC에 설치 권한이 없어요. 포터블/정책 허용 목록을 확인하거나, 웹 기반 IDE·컨테이너 개발 환경을 검토하세요.

현장에서 바로 쓰는 VS Code 확장 운영 노트#

이 절은 VS Code 확장 본문을 읽은 뒤 다음 영업일 안에 실행할 때 참고하는 운영 메모입니다. 도구 이름보다 중요한 것은 반복 가능한 순서와 실패 기록입니다. 처음 한 주는 완벽한 세팅보다 ‘최소 성공 1회’를 목표로 하세요. 성공 기준을 숫자나 체크박스로 적어 두면 나중에 회고할 때 감이 아니라 데이터로 판단할 수 있습니다.

정리#

확장은 “많이”가 아니라 포맷·린트·탐색·실행 네 축을 막히지 않게 하는 도구입니다. 오늘 포맷 온 세이브와 린트 하나만 맞춰도 리뷰 소음이 줄어듭니다.

참고: VS Code 확장 마켓플레이스 · ESLint