Visual Studio Code(VS Code) 기본 설정 가이드 (테마, 줄바꿈, 아이콘, 한글, 자동 저장, 포맷 자동화 등)

Visual Studio Code (일명 VS Code)는 개발자들이 가장 선호하는 코드 에디터 중 하나인데요.

가볍지만 강력하고, 수많은 확장(Extension)을 통해 어떤 개발 환경이든 커스터마이징할 수 있다는 장점 때문이죠.

참고로, 저도 윈도우의 메모장 대신에 항상 vscode를 사용하고 있을 정도죠.

오늘은 VS Code를 처음 사용하거나,

혹은 기존에 사용하고 있지만 좀 더 효율적으로 설정하고 싶은 분들을 위해 VS Code 기본 설정 가이드를 준비해봤습니다.

1. VS Code 설치하기

• 공식 사이트: https://code.visualstudio.com/
• 운영체제에 맞게 다운로드 후 설치

설치가 끝나면 VS Code를 실행하고, 간단한 인터페이스를 확인해보세요.

• 활동 바 (Activity Bar): 왼쪽에 세로로 길게 위치하며, 탐색기, 검색, 소스 제어, 확장, 실행 및 디버그 등 주요 기능을 전환할 수 있습니다.
• 사이드 바 (Side Bar): 활동 바에서 선택한 기능(예: 탐색기)의 상세 내용이 표시되는 영역입니다.
• 에디터 그룹 (Editor Group): 코드를 작성하는 주 작업 공간입니다. 여러 파일을 열거나 분할하여 볼 수 있습니다.
• 패널 (Panel): 하단에 위치하며 터미널, 출력, 디버그 콘솔, 문제점 등의 탭이 있습니다.
• 상태 바 (Status Bar): 하단에 가로로 길게 위치하며 현재 파일의 정보, 언어 모드, Git 브랜치, 경고/오류 메시지 등을 표시합니다.

⚙️ 2. 한글 언어팩 설치

영어가 불편하다면?

1. 좌측 메뉴에서 Extensions (확장기능) 클릭 (단축키: Ctrl + Shift + X)
2. 검색창에 Korean Language Pack 입력
3. 설치 후 “재시작” 클릭

3. 테마 & 아이콘 설정

테마 바꾸기

1. Ctrl + Shift + P → “Color Theme” 입력
2. 원하는 테마 선택 (예: Dark+, Light+, GitHub Dark 등)
3. 원하는 테마가 없다면 Dracula, One Dark Pro 설치 추천!

아이콘 테마

• 확장 기능에서 Material Icon Theme 설치
• 폴더와 파일에 직관적인 아이콘 적용 가능

4. 꼭 필요한 확장 기능 설치

✨ 확장기능 설치는 Ctrl + Shift + X → 검색 후 [Install] 클릭!

5. 사용자 설정 변경 (settings.json)

설정 열기

• Ctrl + , → 오른쪽 상단 톱니바퀴 클릭 → settings.json 열기
• 또는 Ctrl + Shift + P → “Preferences: Open Settings (JSON)”

자주 쓰는 설정 예시 (JSON)

{ "editor.tabSize": 2, "editor.formatOnSave": true, "files.autoSave": "afterDelay", "editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace", "editor.fontLigatures": true }

✅ 코드를 저장할 때 자동 정렬되게 하거나, 탭 크기를 지정할 수 있어요.

6. Python 또는 JavaScript 개발환경 설정 예시

Python

• Python 확장 설치
• Python 경로 자동 감지 or 수동 지정 (Ctrl + Shift + P → Python: Select Interpreter)
• 터미널 → python filename.py 실행

JavaScript

• Node.js 설치 (https://nodejs.org/ko/)
• Live Server 확장으로 HTML 실행
• .js 파일 저장 후 콘솔에서 node filename.js 실행

7. 단축키 자주 쓰는 것 정리

8. 마무리 정리