VS Code 확장 추천 및 사용법 총정리

Visual Studio Code(VS Code)는 현재 가장 인기 있는 무료 코드 에디터입니다.

하지만 진짜 강력한 점은 확장 프로그램(Extension)을 통해 기능을 자유롭게 추가할 수 있다는 점이죠.

이번 글에서는 실무에 꼭 필요한 VS Code 확장 프로그램 추천과 활용법을 체계적으로 정리합니다.


VS Code 확장 설치 방법

  • 좌측 Activity Bar의 Extensions 아이콘 클릭
  • 검색창에 확장 이름 입력
  • “Install” 클릭 후 자동 적용

또는 터미널 명령어:

“`bash

code –install-extension 확장명

“`

🧩 설정은 Ctrl + , 또는 Cmd + ,로 열 수 있습니다.


1. Prettier – 코드 포매터

“`json

// settings.json에 추가

“editor.formatOnSave”: true

“`

💡 저장할 때 자동 정리되도록 설정하세요!


2. ESLint – 문법 검사


3. Live Server – 실시간 HTML 미리보기

🖼️ ALT 태그 위치 예시: Live Server 미리보기 예시


4. GitLens – Git 시각화


5. Bracket Pair Colorizer 2


6. IntelliCode

🤖 마이크로소프트가 제공하는 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