실무자가 추천한 VS Code 확장 프로그램 모음

서론

인턴 생활을 하며, 프론트엔드를 공부해야 해서 Visual Studio Code (VS Code)를 설치하게 되었습니다. 이번 글에서는 실무자들에게 추천받은 유용한 VS Code 확장 프로그램을 소개하도록 하겠습니다!!

 

---

🔍 Git 및 버전 관리 관련 확장 프로그램

1. GitLens

• Git 히스토리, 블레임 (Blame) 정보, 커밋 로그 등을 한눈에 볼 수 있는 Git 확장 프로그램.

2. GitFlow

• GitFlow 브랜치 전략을 VS Code에서 편리하게 활용할 수 있도록 도와줌.
• GitFlow 다운로드

3. Commitlint

• 커밋 메시지를 정해진 규칙에 맞게 작성하도록 도와줌.
• Commitlint 다운로드

4. Conventional Commit

• 커밋 메시지를 Conventional Commits 규칙에 맞게 쉽게 작성할 수 있도록 도와줌.

---

⚙️ 설정 및 코드 품질 관련 확장 프로그램

5. Settings Sync

• 여러 PC에서 동일한 VS Code 설정을 유지할 수 있도록 동기화 기능을 제공함

6. EditorConfig

• 프로젝트별로 일관된 코드 스타일을 유지할 수 있도록 지원함.
• EditorConfig 다운로드

7. ESLint

• JavaScript와 TypeScript의 코드 스타일을 검사하고 자동으로 수정할 수 있도록 돕는 확장 프로그램

8. Prettier - Code Formatter

• 코드를 일관된 스타일로 자동 정렬해주는 포맷터

9. ErrorLens

• 코드의 오류 및 경고를 직관적으로 표시해주는 확장 프로그램
• ErrorLens 다운로드

 

---

📝 Markdown 및 문서 작성 관련 확장 프로그램

10. Markdown All in One

• Markdown 작성에 필요한 여러 기능을 한 번에 제공하는 확장 프로그램
• Markdown All in One 다운로드

11. MarkdownLint

• Markdown 문법을 검사하고 오류를 수정할 수 있도록 돕는 확장 프로그램
• MarkdownLint 다운로드

 

---

🎨 UI 및 개발 편의성 향상 확장 프로그램

12. Material Icon Theme

• VS Code의 파일 및 폴더 아이콘을 깔끔하고 직관적으로 변경해주는 테마 확장 프로그램입니다.

13. File Icons

• 프로젝트 파일을 아이콘으로 구분하여 가독성을 높여줍니다.
• File Icons 다운로드

14. Color Highlight

• 코드 내에서 색상 값을 바로 확인할 수 있도록 돕는 확장 프로그램입니다.

15. Indent-Rainbow

• 들여쓰기 단계를 컬러로 구분해주는 확장 프로그램으로, 특히 Python이나 YAML 파일을 다룰 때 유용합니다.

---

🔧 HTML 및 기타 개발 도구 확장 프로그램

16. Auto Close Tag

• HTML/XML의 태그를 자동으로 닫아주는 확장 프로그램입니다.

17. Auto Rename Tag

• HTML/XML 태그를 변경할 때 자동으로 닫는 태그도 함께 변경해주는 확장 프로그램입니다.

18. Live Server

• 정적 웹사이트를 실시간으로 미리보기할 수 있도록 로컬 서버를 실행해주는 확장 프로그램입니다.

19. Vim

• VS Code에서 Vim 키 바인딩을 활용할 수 있도록 지원하는 확장 프로그램입니다.
• Vim 다운로드