[일단!] 코딩이 편해지는 VS Code 확장 프로그램 추천 (웹 개발부터 파이썬까지)

VS Code 확장 프로그램 추천 🚀 – 개발을 더 편리하게!

Visual Studio Code(VS Code)는 기본적으로 강력한 코드 편집 기능을 제공하지만, 확장 프로그램(Extensions)을 활용하면 더욱 강력한 개발 환경을 구축할 수 있습니다.

이번 글에서는 VS Code에서 꼭 설치하면 좋은 확장 프로그램들을 소개해 드리겠습니다.😊

---

1. 확장 프로그램 설치 방법

확장 프로그램을 설치하는 방법은 간단합니다!

✅ VS Code 에서 설치하기

1️⃣ VS Code를 실행합니다.
2️⃣ 사이드바에서 확장 프로그램 아이콘 클릭 (단축키: Ctrl + Shift + X)

3️⃣ 검색창에 원하는 확장 프로그램 이름을 입력합니다.
4️⃣ 원하는 확장 프로그램을 찾아 "Install" 버튼을 클릭하면 설치 완료!

 

---

📌 VS Code 한글 설정 (필수 확장 프로그램 – 한국어 패치)

아마도 VS Code를 처음 설치했을 때 가장 당황했던 부분 중 하나는 모든 메뉴가 영어로 되어 있다는 점일 것입니다. 😵‍💫

특히, 영어가 익숙하지 않다면 더욱 불편하게 느껴질 수 있습니다.
하지만 걱정할 필요 없습니다! 🎉 한글 패치 확장 프로그램을 설치하면 VS Code를 한글로 사용할 수 있습니다.

✅ [한글 패치 설치 방법]
1️⃣ 확장 프로그램 검색창(Ctrl + Shift + X)에서 "Korean Language Pack for Visual Studio Code"를 검색합니다. 사실 "kor"만 검색해도 제일 상단에 나옵니다.😁
2️⃣ "Install" 버튼을 클릭하여 설치합니다.
3️⃣ 설치 후 VS Code를 재시작하면 한글로 변환 완료!

이제 한글 환경에서 좀 더 편리하게 VS Code를 사용할 수 있습니다. 🚀

---

2. 추천 확장 프로그램 목록

📌 1) 필수 확장 프로그램

✅ Python

• Python 개발에 필수적인 확장 프로그램
• 코드 실행, 디버깅, 자동 완성 기능 지원
• 설치하면 VS Code에서 .py 파일을 더욱 편리하게 작성할 수 있음

---

📌 2) 추천 확장 프로그램

✅ indent-rainbow

• 들여쓰기(indent) 레벨을 색상으로 구분하여 가독성 향상
• 특히 Python처럼 들여쓰기가 중요한 언어에서 유용

✅ Material Icon Theme

• 파일 및 폴더 아이콘을 보다 직관적인 스타일로 변경
• 다양한 언어와 파일 유형에 맞는 아이콘 제공

✅ Jupyter

• VS Code에서 Jupyter Notebook을 실행하고 사용할 수 있도록 지원
• 데이터 분석, 머신러닝 개발에 필수

✅ Rainbow CSV

• CSV 파일을 색상으로 구분하여 가독성을 높여줌
• 대량의 CSV 데이터를 쉽게 분석할 수 있도록 도와줌

---

📌 2) 웹 개발자를 위한 확장 프로그램

✅ Live Server

• HTML, CSS, JavaScript를 실시간으로 반영하는 개발 서버
• Go Live 버튼을 클릭하면 웹사이트 변경 사항을 즉시 확인 가능

✅ Auto Rename Tag

• HTML과 XML에서 태그를 수정할 때, 자동으로 시작/끝 태그를 함께 변경
• <div> → <section> 변경 시 자동으로 </div>도 </section>으로 변경됨

✅ CSS Peek

• HTML 파일에서 CSS 스타일을 바로 확인 가능
• Ctrl + 클릭하면 연결된 CSS 코드로 바로 이동 가능

✅ Prettier – Code formatter

• 코드를 자동으로 정리해 주는 포맷터
• JavaScript, TypeScript, JSON, HTML, CSS 등 다양한 언어 지원
• Ctrl + S(저장)할 때 자동으로 코드 정리 가능

✅ Image preview

• HTML, Markdown 파일에서 이미지 미리보기를 제공
• 파일을 열지 않고도 이미지를 확인 가능

✅ Mithril Emmet

• HTML, JavaScript 코드 작성을 더욱 빠르게 해주는 확장 기능
• 자동 완성 기능 강화

---

📌 3) Git & 버전 관리 확장 프로그램

✅ GitLens — Git supercharged

• VS Code 내에서 Git 정보를 더욱 상세하게 확인 가능
• 코드 변경 내역, 작성자, 커밋 히스토리 등을 쉽게 볼 수 있음

✅ Git Graph

• Git의 브랜치 및 커밋 히스토리를 시각적으로 확인 가능
• 복잡한 Git 히스토리를 한눈에 파악할 수 있음

✅ GitHub Copilot

• AI 기반 코드 자동 완성 기능 제공
• 코드를 입력하면 자동으로 추천 코드가 생성됨 (유료 기능)

---

📌 4) 생산성을 높이는 확장 프로그램

✅ Markdown All in One

• Markdown 문법 지원 + 실시간 미리보기 기능 제공
• README.md, 블로그 글 작성 시 필수

---

3. 마무리

이제 VS Code에서 개발에 꼭 필요한 확장 프로그램들을 설치하고, 더욱 편리한 환경에서 작업해 보세요! 🚀

위에서 소개한 확장 프로그램들은 필요한 것만 선택적으로 설치하는 것이 가장 좋습니다.
개발을 하다가 "이런 기능이 필요할까?" 싶을 때 하나씩 추가하면서 점진적으로 확장해 나가는 것을 추천드립니다.

💬 혹시 추천하고 싶은 확장 프로그램이 있다면?
댓글로 추천해 주시면 함께 공유할 수 있도록 하겠습니다! 👍

📌 다음 글에서는 Python을 활용하여 프로그래밍을 해보겠습니다! 🚀