Visual Studio Code(VS Code)는 현재 가장 인기 있는 무료 코드 에디터입니다.
하지만 진짜 강력한 점은 확장 프로그램(Extension)을 통해 기능을 자유롭게 추가할 수 있다는 점이죠.
이번 글에서는 실무에 꼭 필요한 VS Code 확장 프로그램 추천과 활용법을 체계적으로 정리합니다.
VS Code 확장 설치 방법
- 좌측 Activity Bar의 Extensions 아이콘 클릭
- 검색창에 확장 이름 입력
- “Install” 클릭 후 자동 적용
또는 터미널 명령어:
“`bash
code –install-extension 확장명
“`
🧩 설정은
Ctrl + ,
또는Cmd + ,
로 열 수 있습니다.
1. Prettier – 코드 포매터
- 📍 https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
- 기능: 코드 자동 정렬
- 지원 언어: JS, HTML, CSS, TS 등
“`json
// settings.json에 추가
“editor.formatOnSave”: true
“`
💡 저장할 때 자동 정리되도록 설정하세요!
2. ESLint – 문법 검사
- 📍 https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
- 기능: 자바스크립트 문법 및 스타일 검사
- 추천 조합: Prettier와 함께 사용 시 코드 품질 UP
3. Live Server – 실시간 HTML 미리보기
- 📍 https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
- 기능: HTML 수정 즉시 브라우저 반영
- 활용 예시: 정적 웹사이트, 실습용 미리보기
🖼️ ALT 태그 위치 예시:
4. GitLens – Git 시각화
- 📍 https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
- 기능: 변경 이력, blame 정보, 커밋 보기
- 실무 활용: 협업 중 누가 언제 수정했는지 추적 가능
5. Bracket Pair Colorizer 2
- 📍 https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
- 기능: 중괄호/소괄호 색상으로 시각화
- 장점: 코드 중첩이 많은 경우 가독성 향상
6. IntelliCode
- 📍 https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode
- 기능: AI 기반 코드 자동완성
- 지원: JS, Python, Java 등 다수
🤖 마이크로소프트가 제공하는 AI 추천 기반으로 자동완성의 정확도가 뛰어남
추가 추천 확장들
| 이름 | 기능 |
|——|——|
| Path Intellisense | 파일 경로 자동 완성 |
| Import Cost | 파일 import 용량 표시 |
| REST Client | API 테스트용 |
| Markdown Preview | Markdown 실시간 렌더링
VS Code 설정 팁
Ctrl + P
→ 파일 빠르게 열기Ctrl + Shift + P
→ 모든 명령 실행.vscode/settings.json
으로 프로젝트 단위 설정 가능
마무리
VS Code의 확장 프로그램은 개발 속도를 2배 이상 높여주는 생산성 도구입니다.
오늘 소개한 확장만 잘 활용해도 실무의 80%는 충분히 커버할 수 있습니다.
“필수 확장은 미리 설치하고, 반복 업무는 자동화하세요!”
🔎 다음 포스팅 주제 추천
→ 40번: 깃허브 레포지토리 관리법과 협업 팁
→ 47번: 웹사이트 속도 최적화 팁
참고자료
- https://marketplace.visualstudio.com/vscode
- https://code.visualstudio.com/docs/editor/extension-marketplace