VS Code 코딩 속도를 2배 높여주는 필수 익스텐션(Extension) 추천

현업 개발자부터 코딩 입문자까지 가장 널리 사랑받는 코드 에디터, 바로 **VS Code (Visual Studio Code)**죠. VS Code가 이렇게 사랑받는 가장 큰 이유는 가벼움도 있지만, 전 세계 개발자들이 만들어 올리는 방대한 익스텐션(확장 프로그램) 생태계 덕분입니다.

오늘은 설치해두면 무조건 코딩 삶의 질이 수직 상승하는 필수 익스텐션 몇 가지를 엄선해 소개해 드립니다.

1. 코드가 예뻐지는 마법: Prettier - Code formatter

개발자라면 들여쓰기와 띄어쓰기에 예민할 수밖에 없죠. Prettier는 코션을 저장할 때마다 미리 설정해둔 규칙(따옴표 스타일, 들여쓰기 간격 등)에 맞춰 자동으로 코드를 예쁘고 일관성 있게 정렬해 줍니다. 코딩 컨벤션 맞추느라 소모하는 시간을 0으로 만들어주는, 1순위 필수 설치템입니다.

2. 태그 짝꿍을 찾아라: Auto Rename Tag

HTML이나 React(JSX) 작업을 할 때 매우 유용합니다. 시작 태그(예: <div>)의 이름을 수정하면 끝나는 태그(</div>)도 자동으로 동일하게 변경해 줍니다. 태그 이름 바꿀 때마다 뒤로 가서 또 바꾸는 번거로움을 깔끔하게 해결해 줍니다.

3. 오타 잡는 돋보기: Code Spell Checker

코드 안에 영어 오타가 있으면 은근히 부끄럽기도 하고, 변수명 검색 시 치명적인 버그를 유발하기도 합니다. 이 익스텐션은 카멜 케이스(camelCase) 같은 프로그래밍 네이밍 규칙까지 똑똑하게 이해하여 코드 내의 영어 스펠링 오류를 물결 밑줄로 잡아줍니다.

4. 실시간으로 확인하자: Live Server

웹 프론트엔드 개발을 공부하시는 분들께 강력 추천합니다. HTML, CSS, JS 코드를 수정하고 저장하는 순간, 브라우저에서 새로고침(F5)을 누르지 않아도 즉시 변경된 화면을 실시간으로 렌더링해서 보여줍니다. 듀얼 모니터에 브라우저를 띄워두고 작업하면 효율이 폭발합니다.

5. 누가 짠 코드야?: GitLens — Git supercharged

Git을 사용하신다면 필수입니다. 코드의 각 줄마다 이 코드를 '언제', '누가', '어떤 커밋'으로 작성했는지 흐린 글씨로 에디터 안에서 바로 보여줍니다. 협업 시 버그가 발생했을 때 책임자(?)를 찾거나, 해당 코드가 추가된 히스토리를 파악할 때 이보다 편할 수 없습니다.

VS Code의 익스텐션은 필요에 따라 뗐다 붙였다 할 수 있는 강력한 무기입니다. 오늘 소개드린 익스텐션들을 활용해 여러분의 코딩 환경을 더욱 쾌적하게 만들어 보세요! 💻✨