티스토리 뷰

카테고리 없음

🧩 개발 생산성 향상시키는 VSCode 필수 확장프로그램(Extensions) 10가지

대디 라이트 2025. 5. 23. 14:56

목차



    반응형

    개발자라면 누구나 사용하는 VSCode!

    하지만 기본 기능만으로는 2% 부족함을 느낄 때가 있는데요.

     

    이럴 때 필요한 것이 바로 VSCode 익스텐션(Extension)입니다.

    마치 스마트폰에 앱을 설치하듯, VSCode에 익스텐션을 설치하면 코딩 생산성을 극적으로 향상시킬 수 있는데요.

     

    오늘은 필수 익스텐션 10가지를 소개해보려 합니다.

    개발 생산성 향상시키는 vs code 필수 익스텐션 10가지

     

     

    목차

       

       

      1️⃣ Prettier – Code formatter

      • 설명: 코드 자동 정렬 및 스타일 통일
      • 특징: 저장할 때 자동 포맷 (formatOnSave 연동 가능)
      • 지원 언어: JS, TS, HTML, CSS 등 거의 모든 언어

      Prettier - Code formatter

       

       

      2️⃣ ESLint

      • 설명: 자바스크립트/타입스크립트 코드 문법 및 스타일 검사
      • 특징: 린트 규칙 실시간 확인, 오류 사전 방지
      • 활용 예: Next.js, React 등 프론트엔드 프로젝트 필수

      ESLint

       

      3️⃣ GitLens — Git supercharged

      • 설명: 깃 히스토리·기여자 정보·코드 블레임을 실시간 표시
      • 특징: 누가 언제 수정했는지 바로 확인 가능
      • 장점: 팀 협업 프로젝트에서 강력한 코드 추적 기능 제공

      GitLens - Git Supercharged

       

       

      4️⃣ Live Server

      • 설명: HTML/CSS/JS 파일을 실시간 미리보기 서버로 실행
      • 특징: 저장할 때마다 브라우저 자동 새로고침
      • 활용 예: 정적 웹페이지 개발자에게 필수

      Live Server

       

       

      5️⃣ Path Intellisense

      • 설명: 경로 자동 완성 기능
      • 특징: import 문 입력 시, 폴더·파일 이름 자동 제안
      • 장점: 오타 방지 + 빠른 경로 지정

      Path Intellisense

       

       

      6️⃣ Bracket Pair Colorizer 2 (현재는 VS Code에서 기본제공됨)

      • 설명: 괄호 색상을 쌍마다 다르게 표시
      • 특징: 중첩된 코드 구조 파악 용이
      • 장점: 가독성 향상, 특히 JSX/중첩 함수 작성 시 유용

      Bracket Pair Colorizer 2 (현재는 VS Code에서 기본제공됨)

       

       

      7️⃣ TODO Highlight

      • 설명: // TODO, // FIXME 등의 주석을 눈에 띄게 표시
      • 특징: 일정 관리, 버그 수정 포인트 관리에 유용
      • 팁: 전체 TODO 항목 리스트를 검색하여 확인 가능

      TODO Highlight

       

       

      8️⃣ REST Client

      • 설명: Postman 없이 VSCode 내에서 API 요청 테스트 가능
      • 특징: .http 파일 생성 → 요청 작성 후 실행
      • 장점: 백엔드 API 테스트나 프론트엔드 연동 테스트에 효율적

      REST Client

       

       

      9️⃣ IntelliCode

      • 설명: AI 기반 코드 자동 완성 기능
      • 특징: 코드 작성 패턴을 학습해 추천
      • 장점: 일반 자동완성보다 더 똑똑한 코드 예측

      IntelliCode

       

       

      🔟 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 마크다운 편집기
      반응형