VSCode(비주얼스튜디오코드)는 다양한 확장프로그램을 지원해 개발 생산성을 높일 수 있는 대표적인 코드 편집기입니다. 처음 설치했다면 어떤 확장프로그램을 추가해야 할지 고민되는 경우가 많습니다.

이번 글에서는 개발자들이 많이 사용하는 VSCode 필수 확장프로그램을 간단하게 정리해보겠습니다.

Prettier

코드 자동 정렬

Prettier는 코드를 자동으로 정리해주는 확장프로그램입니다.

들여쓰기와 줄바꿈을 자동으로 맞춰주기 때문에 협업이나 유지보수에 큰 도움이 됩니다.

Live Server

HTML 실시간 미리보기

웹 개발을 한다면 Live Server는 거의 필수입니다.

HTML 파일을 저장하면 브라우저가 자동으로 새로고침되어 작업 속도를 높여줍니다.



GitLens

Git 기능 강화

GitLens는 코드 변경 이력과 작성자를 쉽게 확인할 수 있도록 도와줍니다.

협업 프로젝트를 진행할 때 매우 유용한 확장프로그램입니다.

Auto Rename Tag

태그 자동 수정

HTML 태그를 수정할 때 시작 태그와 종료 태그를 동시에 변경해줍니다.

웹 퍼블리싱 작업 시간을 줄여주는 기능입니다.



Material Icon Theme

파일 아이콘 개선

파일 종류별 아이콘을 보기 쉽게 표시해 프로젝트 구조를 빠르게 파악할 수 있습니다.

많은 개발자가 사용하는 인기 테마 중 하나입니다.



ESLint

자바스크립트 오류 검사

JavaScript와 TypeScript 개발 시 코드 오류와 스타일 문제를 미리 확인할 수 있습니다.

코드 품질 관리에 도움이 되는 확장프로그램입니다.

Code Spell Checker

오타 검사 기능

변수명이나 주석의 영어 오타를 확인할 수 있습니다.

작은 실수를 줄여주기 때문에 장기적으로 도움이 됩니다.

VSCode의 가장 큰 장점은 필요한 기능만 추가해서 자신만의 개발 환경을 만들 수 있다는 점입니다. 처음에는 기본적인 확장프로그램부터 설치한 뒤 자신의 개발 분야에 맞게 조금씩 추가하는 것을 추천합니다.

자주 묻는 질문

질문 1

Q. VSCode 확장프로그램은 어디에서 설치하나요?

A. 왼쪽 메뉴의 Extensions 아이콘을 선택하거나 Ctrl+Shift+X 단축키를 이용해 설치할 수 있습니다.

질문 2

Q. 확장프로그램을 많이 설치하면 느려지나요?

A. 너무 많은 확장프로그램을 설치하면 성능에 영향을 줄 수 있습니다. 필요한 기능만 설치하는 것이 좋습니다.

질문 3

Q. 웹 개발 초보자에게 가장 추천하는 확장프로그램은 무엇인가요?

A. Prettier, Live Server, Auto Rename Tag, ESLint 정도만 설치해도 기본적인 웹 개발 환경을 구성할 수 있습니다.