VS Code 꿀팁 모음 💡 필수 확장 + 설정으로 개발 속도 UP!

 

 

VS Code는 가볍고 확장성이 강한 에디터로, 전 세계 개발자들이 애용하고 있죠.
하지만 그대로 쓰기에는 아쉬운 부분이 많습니다.
확장(Extensions)과 설정(Settings)을 잘 활용하면 코드 작성 속도와 효율을 크게 끌어올릴 수 있어요.
이번 포스팅에서는 실무에서 쓰는 VS Code 설정 & 추천 확장을 중심으로 정리해드리겠습니다!

---

🔧 1. 필수 확장 추천

확장명	기능 요약	왜 유용한가
ESLint	코드 스타일 & 린팅	실수 없는 코드 작성
Prettier	코드 자동 포매팅	일관성 있는 코드 스타일 유지
Path Intellisense	경로 자동 완성	import 할 때 경로 타이핑 줄이기
Bracket Pair Colorizer / Rainbow Brackets	괄호 색상 구분	복잡한 중첩 구조 쉽게 파악
GitLens	Git 히스토리 및 파일 변경 보기	누가, 언제 코드를 바꿨는지 한눈에
Live Server	실시간 브라우저 미리보기	HTML/CSS 작업할 때 바로바로 확인 가능
VSCode Icons	아이콘 테마 적용	파일 종류 구분이 명확해짐

✅ 개인/팀 프로젝트 기준으로 나만의 확장 세트를 만드는 것도 추천드려요!

---

⚙️ 2. 설정 & 단축키 팁

🛠 기본 설정 추천 (settings.json 예시)

 

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "workbench.colorTheme": "One Dark Pro",
  "editor.minimap.enabled": false
}

• formatOnSave: 저장할 때 자동으로 코드 정리
• trimTrailingWhitespace: 불필요한 공백 제거
• insertFinalNewline: 마지막 줄 개행 유지
• minimap.enabled: 미니맵 끄기 (화면 덜 복잡하게)

 

⌨ 유용 단축키 몇 개

단축키 (Windows / Mac)	기능
Ctrl + P / ⌘ + P	파일 빠르게 열기
Ctrl + Shift + E / ⌘ + Shift + E	탐색기 열기
Ctrl + / ⌘ +	터미널 토글
Alt + Shift + 방향키 / Option + Shift + 방향키	줄 복사 / 이동
Ctrl + F / ⌘ + F	검색
Ctrl + Shift + F / ⌘ + Shift + F	전체 프로젝트 검색

 

---

🎨 3. 테마 & 아이콘 꾸미기

• 테마: One Dark Pro, Dracula Official, Solarized
• 아이콘 테마: VSCode Icons, Material Icon Theme
• 테마 + 아이콘을 잘 조합하면 가독성 + 시각적 만족감이 올라갑니다.

---

💡 4. 워크스페이스 전용 설정

프로젝트별로 .vscode/settings.json 파일을 두고 각 프로젝트에 맞는 설정을 적용할 수 있어요.
예를 들어, A 프로젝트는 탭 크기를 2칸, B 프로젝트는 4칸 이런 식으로요.

---

📝 마무리 정리

• VS Code는 확장과 설정을 얼마나 잘 활용하느냐가 생산성의 관건입니다
• ESLint, Prettier, GitLens 등 필수 확장부터
• 저장 시 자동 포매팅, 공백 제거 등 설정
• 그리고 테마 + 아이콘 조합, 단축키 숙지까지 챙기면
• 개발이 훨씬 더 즐거워지고 편해질 거예요!