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

VS Code에 가장 먼저 설치할 만한 익스텐션은 Prettier, Auto Rename Tag, Code Spell Checker, Live Server, GitLens 다섯 가지입니다. 코드 정렬, 태그 수정, 오타 검사, 브라우저 새로고침, Git 이력 확인을 자동으로 처리해 줍니다. **VS Code (Visual Studio Code)**가 현업 개발자부터 입문자까지 널리 사랑받는 이유는 가벼움도 있지만, 전 세계 개발자들이 만들어 올리는 방대한 익스텐션(확장 프로그램) 생태계 덕분입니다.

코드를 자동으로 정렬해 주는 익스텐션은? Prettier - Code formatter

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

HTML 태그 짝을 한 번에 바꾸려면? Auto Rename Tag

Auto Rename Tag는 시작 태그를 고치면 끝 태그도 자동으로 바꿔 줍니다. HTML이나 React(JSX) 작업에서 특히 유용합니다. 시작 태그(예: <div>)의 이름을 수정하면 끝 태그(</div>)도 동일하게 변경되어, 뒤로 가서 또 고치는 번거로움이 사라집니다.

변수명 오타는 어떻게 잡나요? Code Spell Checker

Code Spell Checker는 코드 안의 영어 스펠링 오류를 물결 밑줄로 표시해 줍니다. 코드 속 오타는 은근히 부끄럽기도 하고, 변수명 검색 시 치명적인 버그를 유발하기도 합니다. 카멜 케이스(camelCase) 같은 네이밍 규칙까지 이해하기 때문에 식별자 안의 단어도 제대로 검사합니다.

새로고침 없이 웹 화면을 확인하려면? Live Server

Live Server는 HTML, CSS, JS를 저장하는 순간 브라우저 화면을 바로 다시 렌더링해 줍니다. 새로고침(F5)을 누를 필요가 없어 웹 프론트엔드를 공부하는 분들께 강력 추천합니다. 듀얼 모니터에 브라우저를 띄워 두고 작업하면 효율이 더 올라갑니다.

이 코드는 누가 짰을까? GitLens — Git supercharged

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

정리

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