VS Code 생산성 끌어올리는 확장 프로그램 10가지

VS Code는 가벼우면서도 강력한 코드 에디터예요. 기본 기능만으로도 충분히 사용 가능하지만, 확장 프로그램을 활용하면 생산성이 두세 배로 올라갑니다. 분야별 핵심 확장 10가지를 추천해 드릴게요.

1. Prettier - 코드 자동 포맷터

Prettier는 저장 시 자동으로 코드 스타일을 정리해 줘요. 들여쓰기, 따옴표, 세미콜론 등을 일관되게 유지해 팀 프로젝트에서 "스타일 충돌"을 막아 줍니다. 한 번 설정해 두면 매번 수동 정리할 필요가 없어요.

2. ESLint - 코드 품질 검사

ESLint는 잠재적 버그·스타일 위반을 실시간으로 표시해 줘요. "unused variable", "missing semicolon" 같은 이슈를 코드 작성 즉시 알려 주어 미리 수정할 수 있게 합니다. JavaScript·TypeScript 개발에는 거의 필수예요. 개발자 도구 가이드에서 더 많은 도구를 확인할 수 있어요.

3. GitLens - Git 슈퍼파워

GitLens는 코드 줄마다 "누가 언제 수정했는지"를 표시해 줘요. 또 커밋 이력 시각화, 비교 도구, 블레임 정보까지 한 번에 볼 수 있어 협업 환경에서 큰 가치를 줍니다.

4. Live Server - 즉시 미리보기

Live Server는 HTML 파일을 저장하면 자동으로 브라우저를 새로고침해 줘요. 별도 서버 설정 없이 정적 사이트를 즉시 미리볼 수 있어 입문자에게 특히 유용합니다.

5. Path Intellisense - 경로 자동완성

파일 경로를 입력할 때 자동완성을 지원해요. 폴더 구조가 깊거나 상대 경로를 다루는 프로젝트에서 오타를 막아 줍니다.

6. Code Runner - 한 번에 실행

Code Runner는 다양한 언어(파이썬, JS, C++ 등)를 "한 번 클릭"으로 실행할 수 있게 해 줘요. 짧은 스크립트나 알고리즘 문제 풀이에 매우 편리합니다.

7. Bracket Pair Colorizer - 괄호 색상화

중첩된 괄호 짝을 색깔로 구분해 줘요. JavaScript·LISP 같이 괄호가 많은 언어에서 코드 구조를 시각적으로 빠르게 파악할 수 있어 큰 도움이 됩니다. 최신 VS Code는 이 기능이 내장되어 있으니 확인해 보세요.

8. Material Icon Theme - 폴더 아이콘

파일 종류별로 직관적인 아이콘을 표시해 줘요. .js 파일은 JavaScript 로고, .json 파일은 JSON 로고로 표시되어 파일 탐색이 빨라집니다. 작은 차이지만 매일 사용하는 도구라 누적 효과가 커요.

9. Auto Rename Tag - HTML 태그 동기화

여는 태그를 수정하면 닫는 태그가 자동으로 같이 수정돼요. <div>를 <section>으로 바꾸면 </div>도 자동으로 </section>이 됩니다. HTML 작업에서 흔한 실수를 막아 줘요.

10. Better Comments - 주석 색상화

주석을 "중요", "질문", "경고", "할 일"로 분류해 색깔로 표시해 줘요. // ! 빨강(중요), // ? 파랑(질문), // TODO 주황(할 일) 같은 식으로 구분됩니다. 코드 리뷰와 협업 시 주석의 의도를 명확히 전달할 수 있어요.

확장 프로그램 관리 팁

너무 많은 확장은 VS Code를 느리게 만들 수 있어요. 매월 한 번 "사용하지 않는 확장 정리"를 하면 성능을 유지할 수 있습니다. 또 "프로젝트별 확장 추천" 기능을 활용해 같은 팀이 같은 확장 세트를 공유하면 협업 효율이 올라가요. JSON 포맷터 같은 보조 도구도 함께 활용하면 좋습니다.

관련 가이드

kimgoon.kr

kimgoon lifestyle 가이드

tools.kimgoon.kr

개발자 도구 더 보기

tools.kimgoon.kr

JSON 포맷터