VSCode 확장팩 TOP 5 (2025 최신) + 실사용 꿀팁까지!

 

안녕하세요! 오늘은 2025년 현재 가장 많이 쓰이는 Visual Studio Code 확장팩 5가지를 소개합니다.
코딩 생산성을 높이고 싶은 분들이라면 꼭 설치해 보세요. 각 확장팩의 실제 사용 예제도 함께 정리했습니다.

 

 

---

1. Prettier – 코드 자동 정렬의 끝판왕

기능: JavaScript, TypeScript, HTML 등 대부분의 언어 코드 정렬을 자동으로 처리
추천 설정: 프로젝트 루트에 .prettierrc 파일 추가

{
  "singleQuote": true,
  "semi": false,
  "printWidth": 80
}

🔧 VSCode 저장 시 자동 정렬 설정 방법:
settings.json에 아래 설정 추가

"editor.formatOnSave": true

 

---

2. ESLint – 코드 오류 미리 예방

기능: 문법 오류, 스타일 문제를 실시간으로 감지
추천 설정: .eslintrc.json 예시

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "rules": {
    "no-unused-vars": "warn",
    "no-console": "off"
  }
}

💡 Prettier와 충돌 방지: eslint-config-prettier 사용 추천

 

---

3. GitLens – 누가 코드를 썼는지 한눈에

기능: 각 줄의 작성자, 커밋 시간, 변경 이력을 표시해 줍니다.
실전 활용: 협업 중 “이거 누가 썼지?” 궁금할 때 바로 확인!

 

 

---

4. REST Client – Postman 없이 API 테스트

기능: VSCode 내에서 HTTP 요청 테스트 가능
예시: api.http 파일에 다음처럼 작성

GET https://jsonplaceholder.typicode.com/posts/1
Content-Type: application/json

▶ Send Request 버튼 클릭으로 바로 응답 확인!

 

---

5. TODO Highlight – 할 일은 잊지 말자

기능: 코드 내 // TODO, // FIXME 등의 주석을 강조 표시
활용 팁: 프로젝트 전체에서 할 일을 시각적으로 추적

// TODO: 로그인 기능 추가하기
// FIXME: 모바일에서 버튼 깨짐 현상 수정

🔍 빠르게 찾으려면 Cmd/Ctrl + Shift + P → “TODOs: List all”

 

---

📌 추천 VSCode 워크플로우

• Prettier + ESLint 조합으로 깔끔한 코드 유지
• REST Client로 백엔드 API 빠르게 테스트
• GitLens로 커밋 추적하며 안전하게 리팩토링

---

 

✅ 마무리하며

이 글에서 소개한 확장팩만 잘 활용해도 개발 속도와 코드 품질이 눈에 띄게 좋아집니다.
다음에는 “입문자를 위한 깃&깃허브 워크플로우 정리”도 정리해볼게요.

💬 여러분이 자주 쓰는 VSCode 확장팩도 댓글로 추천해주세요!