반응형
개발자라면 누구나 사용하는 VSCode!
하지만 기본 기능만으로는 2% 부족함을 느낄 때가 있는데요.
이럴 때 필요한 것이 바로 VSCode 익스텐션(Extension)입니다.
마치 스마트폰에 앱을 설치하듯, VSCode에 익스텐션을 설치하면 코딩 생산성을 극적으로 향상시킬 수 있는데요.
오늘은 필수 익스텐션 10가지를 소개해보려 합니다.
목차
1️⃣ Prettier – Code formatter
- 설명: 코드 자동 정렬 및 스타일 통일
- 특징: 저장할 때 자동 포맷 (formatOnSave 연동 가능)
- 지원 언어: JS, TS, HTML, CSS 등 거의 모든 언어
2️⃣ ESLint
- 설명: 자바스크립트/타입스크립트 코드 문법 및 스타일 검사
- 특징: 린트 규칙 실시간 확인, 오류 사전 방지
- 활용 예: Next.js, React 등 프론트엔드 프로젝트 필수
3️⃣ GitLens — Git supercharged
- 설명: 깃 히스토리·기여자 정보·코드 블레임을 실시간 표시
- 특징: 누가 언제 수정했는지 바로 확인 가능
- 장점: 팀 협업 프로젝트에서 강력한 코드 추적 기능 제공
4️⃣ Live Server
- 설명: HTML/CSS/JS 파일을 실시간 미리보기 서버로 실행
- 특징: 저장할 때마다 브라우저 자동 새로고침
- 활용 예: 정적 웹페이지 개발자에게 필수
5️⃣ Path Intellisense
- 설명: 경로 자동 완성 기능
- 특징: import 문 입력 시, 폴더·파일 이름 자동 제안
- 장점: 오타 방지 + 빠른 경로 지정
6️⃣ Bracket Pair Colorizer 2 (현재는 VS Code에서 기본제공됨)
- 설명: 괄호 색상을 쌍마다 다르게 표시
- 특징: 중첩된 코드 구조 파악 용이
- 장점: 가독성 향상, 특히 JSX/중첩 함수 작성 시 유용
7️⃣ TODO Highlight
- 설명: // TODO, // FIXME 등의 주석을 눈에 띄게 표시
- 특징: 일정 관리, 버그 수정 포인트 관리에 유용
- 팁: 전체 TODO 항목 리스트를 검색하여 확인 가능
8️⃣ REST Client
- 설명: Postman 없이 VSCode 내에서 API 요청 테스트 가능
- 특징: .http 파일 생성 → 요청 작성 후 실행
- 장점: 백엔드 API 테스트나 프론트엔드 연동 테스트에 효율적
9️⃣ IntelliCode
- 설명: AI 기반 코드 자동 완성 기능
- 특징: 코드 작성 패턴을 학습해 추천
- 장점: 일반 자동완성보다 더 똑똑한 코드 예측
🔟 Markdown All in One
- 설명: 마크다운 문서 작성을 쉽게 도와주는 확장
- 기능: 미리보기, 자동 번호 매기기, 표 생성 등
- 활용 예: README 작성, 블로그 원고 작성에 유용
✅ 마무리 요약
| 확장기능 | 기능 요약 |
| Prettier | 코드 자동 정렬 |
| ESLint | 문법 오류 실시간 검사 |
| GitLens | Git 히스토리 시각화 |
| Live Server | 실시간 웹서버 미리보기 |
| Path Intellisense | 경로 자동 완성 |
| Bracket Colorizer | 괄호 구분 색상 |
| TODO Highlight | 주석 관리 |
| REST Client | API 테스트 |
| IntelliCode | AI 자동완성 |
| Markdown All in One | 마크다운 편집기 |
반응형