개발 환경 설정 #12 : VS Code의 생산성을 높여주는 Extensions

제대로 된 익스텐션 몇 개만 설치해도 코딩 생산성이 눈에 띄게 달라집니다.
이 글에서는 실제로 사용하면서 작업 효율을 크게 높여준 익스텐션들을 정리해봤습니다.

1. GitLens

Git 커밋 기록을 누가 언제 어떤 이유로 수정했는지를 코드 위에서 바로 보여주는 익스텐션입니다.

이런 식으로 코드 라인 끝에 회색 글씨로 누가, 언제, 왜 이 코드를 작성했는지를 보여줍니다.

해당 코드 라인에 마우스를 올리면 상세한 커밋 정보가 팝업으로 나타납니다.

사이드바의 GitLens 아이콘을 클릭하면

• 현재 파일의 모든 수정 기록
• 누가 몇 번 수정했는지
• 각 커밋에서 어떤 내용이 바뀌었는지

등을 시각적으로 확인할 수 있습니다.

2. Remote - Tunnels, Remote Explorer

인터넷만 있으면 어디서든 다른 컴퓨터의 VSCode에 접속할 수 있게 해주는 익스텐션입니다.

일반적인 원격 접속 방식은 방화벽 설정, 포트포워딩 등 복잡한 네트워크 설정이 필요하지만, Remote - Tunnels는 Microsoft 서버를 중간다리로 활용하는 방식이라 이런 번거로운 과정이 전혀 필요 없습니다.

집 데스크탑에 개발 환경을 구축해두고, 카페에서 노트북으로 접속해 마치 데스크탑 앞에 앉아있는 것처럼 작업할 수 있습니다. 노트북의 제한된 성능이 아닌 데스크탑의 강력한 성능을 그대로 활용할 수 있죠.

필수 설정 명령어

code tunnel service install

데스크탑을 원격 서버로 등록하는 명령어로,
이걸 실행해야 데스크탑이 백그라운드에서 항상 접속 대기 상태가 됩니다.
컴퓨터를 켜두기만 하면 언제든지 원격 접속이 가능해 집니다.

Remote Explorer
Remote - Tunnels의 사이드바 UI 역할을 하는 익스텐션입니다.

주요 기능:

• 등록된 원격 컴퓨터 목록 표시
• 클릭 한 번으로 원격 접속
• 연결 상태 확인
• SSH, 터널, 컨테이너 등 다양한 원격 환경 관리

해당 이미지와 같이 사이드바에 UI가 나타나고 Microsoft나 GitHub에 등록된 터널로 접속할 수 있습니다.

하단 상태 표시줄 가장 왼쪽 버튼을 클릭하여 터널을 선택할 수도 있습니다.

3. Markdown extensions

A. Markdown All in one

마크다운 작성을 위한 도구 모음입니다.

주요 기능:

• 키보드 단축키로 빠른 서식 적용 (굵게, 기울임, 취소선 등)
• 자동 목차(TOC) 생성 및 업데이트
• 자동 리스트 넘버링
• 표 자동 정렬 및 포맷팅
• 섹션 번호 자동 매기기
• 미리보기 스크롤 동기화

B. Markdown Preview Enhanced

강력한 미리보기 및 내보내기 기능을 제공하는 익스텐션입니다.

주요 기능:

• 실시간 미리보기 (수학 수식, 다이어그램 지원)
• Mermaid, PlantUML 등 다이어그램 렌더링
• 코드 청크 실행 기능
• PDF, HTML, PNG 등 다양한 포맷으로 내보내기
• 프레젠테이션 모드
• 커스터마이징 가능한 CSS 스타일

C. Markdown PDF

마크다운 파일을 PDF로 간편하게 변환하는 익스텐션입니다.

4. Office Viewer

Microsoft Office 파일을 VSCode 내에서 직접 열람할 수 있는 익스텐션입니다.

주요 기능:

• Word(.docx), Excel(.xlsx), PowerPoint(.pptx) 파일을 VSCode에서 바로 보기
• PDF 파일도 함께 지원
• 별도의 Office 프로그램 실행 없이 파일 내용 확인 가능
• 편집 불가

5. Hex Editor

파일의 바이너리 데이터를 16진수(Hexadecimal)로 직접 보고 편집할 수 있는 익스텐션입니다.

주요 기능:

• 모든 파일을 바이트 단위로 16진수로 표시
• 바이너리 데이터 직접 편집 가능
• ASCII/UTF-8 텍스트와 16진수 동시 표시
• 파일 구조 분석 (이미지, 실행파일 등)
• 대용량 파일도 효율적으로 처리
• 특정 바이트 검색 및 이동

6. 가독성 향상

A. Material Icon Theme

파일과 폴더에 직관적이고 예쁜 아이콘을 적용해주는 테마입니다.

세부 설정 방법
기본 아이콘만으로도 충분하지만, 특정 폴더에 원하는 아이콘을 직접 지정할 수도 있습니다.

1. 설정 파일 열기

F1 또는 Ctrl+Shift+P를 눌러 명령 팔레트를 연 후, Preferences: Open User Settings (JSON)을 입력하고 선택합니다.

프로젝트별로 다르게 설정하고 싶다면 .vscode/settings.json 파일을 사용하세요.

2. 폴더 아이콘 매핑 추가

아래 코드를 settings.json 파일 안에 추가합니다. 이미 material-icon-theme.folders.associations 항목이 있다면, 그 안에 원하는 항목만 추가하면 됩니다.

# "rtl" 이름의 폴더 아이콘을 "core" 폴더 아이콘과 매칭
json"material-icon-theme.folders.associations": {
    "rtl": "core",
    "components": "component",
    "utils": "helper"
}

3. 저장 및 확인

Ctrl+S로 저장하면 즉시 아이콘이 변경된 것을 확인할 수 있습니다.

• 설정 적용 전
  
• 설정 적용 후
  

B. Verilog-HDL/SystemVerilog/Bluespec SystemVerilog

하드웨어 설계 언어(HDL)를 지원하는 VS Code 익스텐션입니다.

다만 이 익스텐션은 린터나 포매터 그 자체가 아니라, 외부 엔진을 VS Code에 연결해주는 프론트엔드(대시보드) 역할을 합니다. 따라서 익스텐션만 설치한다고 해서 자동 포맷이나 의미 있는 진단이 바로 동작하지는 않습니다.

제대로 활용하려면 프로젝트에 맞는 린터(Linter)와 포매터(Formatter)를 별도로 설치한 뒤, VS Code가 해당 바이너리를 정확히 호출할 수 있도록 경로와 옵션을 직접 설정해줘야 합니다.

• 린터(Linter):
  소스 코드를 “컴파일러처럼” 읽어서 문법 오류, 잠재 버그를 잡아주는 검사기입니다.

• 포매터(Formatter):
  코드의 기능은 바꾸지 않고 들여쓰기, 개행, 정렬, 공백 규칙같은 포맷을 맞춰주는 도구입니다.

세부 설정 방법
린터/포매터는 Verible을 선택했습니다.

1. GitHub 릴리즈 페이지에서 다운로드

https://github.com/chipsalliance/verible/releases

2. 릴리즈 파일 다운로드 및 압축 해제

Ubuntu 22.04 x86_64 환경에 맞는 tar.gz 파일을 선택해 다운로드합니다.

다운로드가 완료되면 ~/Downloads 디렉토리에서 압축을 해제합니다.

# 압축 해제
cd ~/Downloads
tar -xzf verible-*.tar.gz

3. 시스템 경로에 설치

압축 해제된 파일을 시스템 전역에서 사용할 수 있도록 /opt/verible 디렉토리를 생성하고 복사합니다.

sudo mkdir -p /opt/verible
sudo rsync -a --delete verible-*/ /opt/verible/

rsync -a 옵션은 파일의 권한·타임스탬프 등 속성을 그대로 유지하며 복사하고, --delete는 대상 디렉토리에 남아 있는 불필요한 구버전 파일을 자동으로 제거합니다.
덕분에 향후 버전을 업그레이드할 때도 동일한 명령어를 재사용할 수 있습니다.

4. 심볼릭 링크 설정

/usr/local/bin에 심볼릭 링크를 생성하여 터미널 어디서든 Verible 명령어를 바로 호출할 수 있도록 합니다.

sudo ln -sf /opt/verible/bin/verible-verilog-format /usr/local/bin/verible-verilog-format
sudo ln -sf /opt/verible/bin/verible-verilog-lint   /usr/local/bin/verible-verilog-lint
sudo ln -sf /opt/verible/bin/verible-verilog-ls     /usr/local/bin/verible-verilog-ls

-s는 심볼릭 링크 생성, -f는 동일한 이름의 링크가 이미 존재할 경우 덮어쓰기를 의미합니다.
버전 업그레이드 시 /opt/verible 내용만 교체하면 링크를 다시 만들 필요 없이 자동으로 새 버전을 가리키게 됩니다.

5. 설치 확인

아래 명령어로 설치가 정상적으로 완료되었는지 검증합니다.

which verible-verilog-format verible-verilog-lint verible-verilog-ls
readlink -f /usr/local/bin/verible-verilog-format
readlink -f /usr/local/bin/verible-verilog-lint
verible-verilog-format --version
verible-verilog-lint --version

which 명령이 /usr/local/bin/... 경로를 반환하고, readlink -f가 /opt/verible/bin/...로 실제 바이너리 경로를 추적하며, --version이 설치된 버전 문자열을 출력하면 정상 설치가 완료된 것입니다.

6. VS Code에서 세부 설정

6.1 Formatting 설정
Ctrl + ,로 익스텐션 설정 창을 열어 아래 항목들을 순서대로 설정합니다.

6.1.1 System Verilog(.sv) 포매터를 지정
Verilog > Formatting > SystemVerilog: Formatter → verible-verilog-format

6.1.2 바이너리 경로 지정
Verilog > Formatting > Verible Verilog Formatter: Path

경로란에는 verible-verilog-format을 입력합니다.
만약 이 방식으로 동작하지 않는다면 /usr/local/bin/verible-verilog-format과 같이 절대 경로를 직접 입력합니다.

6.1.3 Verilog HDL(.v) 포매터 지정
Verilog > Formatting > Verilog HDL: Formatter → verible-verilog-format

6.2 linting 설정
6.2.1 linter 지정
Verilog > Linting: Linter → verible-verilog-lint

6.3 Format On Save 활성화
Ctrl+S 저장 시 자동으로 포매팅이 실행되도록 VS Code 기본 설정에서 Editor: Format On Save(editor.formatOnSave)를 활성화합니다.

C. MIPS Support, Rainbow CSV

MIPS Support:
MIPS 어셈블리 언어를 위한 익스텐션입니다.

Rainbow CSV:
CSV 파일을 컬럼별로 다른 색으로 표시해주는 익스텐션입니다.

마무리하며

VSCode의 생산성을 높여주는 주요 익스텐션들을 소개했습니다.

처음부터 익스텐션들을 전부 설치할 필요는 없고, 자신의 작업 환경에 맞춰 필요한 것들만 골라 사용하면 됩니다.