VS Code 필수 추천 확장 프로그램(Extension)5가지와 추천 이유

개발의 질을 높여주는 비결

프로그래밍을 시작할 때 가장 먼저 마주하는 고민 중 하나는 어떤 도구를 선택할 것인가 하는 점입니다. 수많은 에디터가 존재하지만 오늘날 많은 개발자들이 비주얼 스튜디오 코드(Visual Studio Code)를 선택하고 있습니다.

가볍고 빠르며 다양한 운영체제를 지원하는 장점이 있기 때문입니다. 하지만 기본 설치 상태 그대로 사용하는 것은 마치 성능 좋은 스포츠카를 타고 시속 60킬로미터로만 달리는 것과 비슷합니다. 비주얼 스튜디오 코드의 진정한 매력은 바로 확장 프로그램(Extension) 생태계에 있습니다.

확장 프로그램은 에디터에 날개를 달아주는 역할을 합니다. 코드 자동 완성 기능을 더 정교하게 만들거나 디자인을 보기 좋게 꾸미는 것부터 시작해서 협업을 원활하게 돕는 도구까지 수많은 기능이 존재합니다.

전 세계의 수많은 개발자가 만들어 올린 확장 프로그램은 막강한 기능을 제공하며 대다수가 무료로 이용할 수 있습니다. 이번 글에서는 개발 생산성을 극적으로 끌어올려 줄 필수 확장 프로그램 다섯 가지를 살펴보고 이를 어떻게 활용하면 좋을지 알아보겠습니다.

코드를 아름답게 정돈하는 프리티어

코드를 작성하다 보면 들여쓰기가 엉망이 되거나 따옴표와 쉼표가 제각각 흩어지기 쉽습니다. 혼자 개발할 때는 크게 문제가 되지 않을 수 있지만 여러 사람이 협업하는 프로젝트에서는 코드 스타일을 일치시키는 것이 매우 중요합니다. 프리티어(Prettier)는 이러한 고민을 한 방에 해결해 주는 코드 포맷터입니다.

이 도구의 가장 큰 장점은 저장 버튼을 누르는 순간 지저분했던 코드가 규칙에 맞게 척척 정렬된다는 점입니다. 줄바꿈이나 띄어쓰기에 신경 쓰느라 낭비하던 시간을 코딩 자체에 집중할 수 있게 바꿔줍니다.

자바스크립트와 타입스크립트뿐만 아니라 HTML, CSS, JSON, Markdown 등 웹 개발에 필요한 거의 모든 언어를 지원합니다.설치한 뒤 설정에서 저장 시 자동 포맷 기능(Format On Save)을 켜두는 것이 좋습니다.

팀원들과 함께 프로젝트를 진행한다면 프로젝트 루트 폴더에 설정 파일을 만들어 팀 전체가 동일한 규칙으로 코드를 정렬하도록 맞출 수 있습니다. 이를 통해 코드 리뷰 과정에서 불필요한 공백이나 줄바꿈 문제로 논쟁하는 시간을 크게 줄일 수 있습니다.

오타를 미리 잡아주는 ESLint

코드를 작성한 뒤 실행했을 때 사소한 오타나 문법 오류 때문에 프로그램이 멈추는 일은 누구나 겪는 골칫거리입니다. 이럴 때 큰 도움이 되는 것이 바로 ESLint입니다. 이 확장 프로그램은 코드를 작성하는 실시간으로 문법적인 오류나 잠재적인 버그를 찾아내어 빨간줄로 경고를 표시해 줍니다.

단순히 오타를 잡아주는 것을 넘어 코드의 품질을 높이는 데 큰 역할을 합니다. 예를 들어 선언해 놓고 한 번도 사용하지 않은 변수가 있다면 이를 경고해 주어 불필요한 코드가 쌓이지 않도록 돕습니다.

또한 팀 내에서 정한 코딩 컨벤션을 강제하는 용도로도 자주 쓰입니다. 변수 이름을 지을 때 카멜 케이스를 써야 한다는 규칙 등을 설정해 두면 팀 전체의 코드 일관성을 유지하기가 훨씬 수월해집니다.

프리티어와 함께 사용할 때 시너지 효과가 극대화됩니다. 종종 프리티어와 ESLint의 규칙이 충돌하여 저장할 때마다 코드가 이리저리 흔들리는 경우가 있는데 관련 플러그인을 함께 설치하여 규칙을 조율하면 완벽한 개발 환경을 구축할 수 있습니다.

실시간으로 결과를 확인하는 라이브 서버

웹 페이지를 만들 때 수정을 거듭하며 새로고침을 반복하는 일은 생각보다 번거롭습니다. 코드를 조금 고치고 브라우저로 돌아가서 새로고침 버튼을 누르는 과정이 하루에도 수십 번씩 반복됩니다. 라이브 서버(Live Server)는 이러한 반복 작업을 없애주는 매우 실용적인 도구입니다.

이 확장 프로그램을 실행하면 로컬 개발 서버가 빠르게 열리면서 HTML 파일의 변경 사항을 감지합니다. 코드를 수정하고 저장하는 순간 브라우저 창이 알아서 새로고침 되며 바뀐 결과물을 실시간으로 보여줍니다. 특히 반응형 웹 디자인을 작업할 때 다양한 화면 크기에서 어떻게 보이는지 곧바로 확인할 수 있어 매우 유용합니다.

별도의 복잡한 서버 설정 없이 클릭 한 번으로 가상 서버를 띄울 수 있어 초보 개발자들도 쉽게 접근할 수 있습니다. 정적 웹페이지를 다루는 퍼블리셔나 프론트엔드 개발자에게는 없어서는 안 될 필수품으로 꼽힙니다.

깃과의 강력한 연동을 돕는 깃렌즈

버전 관리 시스템인 깃(Git)은 현대 개발에서 빼놓을 수 없는 요소입니다. 하지만 터미널 명령어나 기본 기능만으로는 누가 언제 어떤 코드를 수정했는지 파악하기가 까다로울 때가 많습니다. 깃렌즈(GitLens)는 깃의 기능을 시각적으로 극대화하여 코드의 역사와 흐름을 한눈에 파악할 수 있게 해줍니다.

코드를 작성하다 보면 특정 줄에 마우스를 올렸을 때 해당 코드를 마지막으로 수정한 사람과 커밋 메시지가 투명하게 나타나는 것을 볼 수 있습니다. 이 기능 덕분에 왜 이런 코드가 작성되었는지 맥락을 빠르게 이해할 수 있습니다. 대규모 프로젝트나 오픈소스 기여 과정에서 문제가 발생했을 때 원인을 추적하는 시간이 획기적으로 줄어듭니다.

뿐만 아니라 브랜치 관리나 히스토리 비교, 변경 사항 시각화 등 다양한 부가 기능을 제공합니다. 깃을 능숙하게 다루지 못하는 초보자라도 직관적인 인터페이스를 통해 버전 관리에 쉽게 적응할 수 있도록 돕습니다.

오타와 문맥을 교정하는 코드 스펠 체커

개발을 하다 보면 변수명이나 함수명, 주석에 영어 단어를 쓸 일이 정말 많습니다. 하지만 영어가 모국어가 아닌 개발자들에게 오타는 피할 수 없는 함정입니다. 변수명을 user 로 적어야 하는데 usre 라고 적어두면 나중에 버그를 찾느라 큰 고생을 하게 됩니다.

코드 스펠 체커(Code Spell Checker)는 소스 코드 안의 오타를 귀신같이 찾아내어 밑줄로 알려줍니다. 일반적인 영어 사전뿐만 아니라 프로그래밍에서 자주 쓰이는 약어와 용어들을 인식하여 불필요한 경고를 줄여줍니다. 특히 팀 프로젝트에서 변수명 오타로 인한 소통의 오류를 줄이는 데 큰 도움이 됩니다.

프로젝트 특유의 전문 용어나 고유 명사가 계속 빨간줄로 표시된다면 사용자 사전에 추가하여 경고 목록에서 제외할 수 있습니다. 작은 부분 같지만 코드의 전문성을 높이고 사소한 실수를 줄이는 데 훌륭한 역할을 합니다.

효율적인 에디터 환경 구축을 위한 제언

확장 프로그램은 많을수록 좋다는 생각에 유행하는 것들을 무작정 설치하면 오히려 비주얼 스튜디오 코드가 무거워지고 실행 속도가 느려질 수 있습니다. 자신에게 정말 필요한 기능이 무엇인지 고민하고 꼭 필요한 것만 선별하여 사용하는 지혜가 필요합니다. 또한 주기적으로 사용하지 않는 확장 프로그램을 정리하는 습관을 들이면 쾌적한 작업 환경을 유지할 수 있습니다.

새로운 도구를 도입할 때는 팀원들과 충분히 상의하고 공통된 설정을 공유하는 것이 중요합니다. 개발 환경을 통일하는 것만으로도 협업 과정에서 발생하는 마찰을 크게 줄일 수 있습니다.

소개한 다섯 가지 도구를 바탕으로 본인만의 최적화된 작업 환경을 만들어 보기를 바랍니다.