Visual Studio Code(VS Code) 기초 정리

Visual Studio Code(VS Code) 기초부터 실전까지

개발을 시작하면 거의 반드시 만나게 되는 툴이 바로 Visual Studio Code(VS Code) 입니다.
가볍지만 강력하고, 어떤 언어·플랫폼에서도 잘 어울려서 입문자부터 현업 개발자까지 모두가 사용하는 코드 에디터죠.

 

---

VS Code란?

Visual Studio Code는 Microsoft에서 만든 오픈소스 코드 에디터

특징

• 무료 & 오픈소스
• 빠르고 가벼움
• 확장(Extension)으로 IDE급 기능 구현 가능
• Windows / macOS / Linux 모두 지원
• 웹, 백엔드, 앱, 데이터 분석까지 전방위 사용

❗ Visual Studio(보라색 아이콘)와 다름
VS Code는 에디터, Visual Studio는 무거운 IDE에 가까움

 

 VS Code 설치

1. 공식 사이트 접속
   • https://code.visualstudio.com/
2. 운영체제에 맞는 설치 파일 다운로드
3. 기본 설정 그대로 설치 (입문자는 커스터마이징 X 권장)

설치가 끝나면 파란색 리본 아이콘의 VS Code 확인 가능

 

 VS Code 화면 구성

VS Code를 처음 켜면 다음과 같은 구조

(1) Activity Bar (왼쪽 아이콘 바)

• 📁 Explorer : 파일/폴더 보기
• 🔍 Search : 전체 검색
• 🌿 Source Control : Git
• ▶ Run & Debug : 실행/디버그
• 🧩 Extensions : 확장 프로그램

(2) Side Bar

• 현재 프로젝트의 폴더/파일 구조

(3) Editor 영역

• 실제로 코드를 작성하는 공간
• 탭 형태로 여러 파일 열기 가능

(4) Status Bar (하단 바)

• 현재 언어 모드
• 인코딩 (UTF-8)
• 줄/열 번호
• Git 상태

 

기본 사용 방법

폴더 열기

VS Code는 폴더 단위 프로젝트를 기준

• File > Open Folder
• 또는 폴더를 VS Code로 드래그

👉 하나의 프로젝트 = 하나의 폴더

 

파일 생성

• Explorer 영역에서 마우스 우클릭 → New File
• 또는 상단 New File 아이콘 클릭

확장자에 따라 자동으로 언어 인식

• .java → Java
• .js → JavaScript
• .html → HTML

 

자동 완성 & 문법 체크

• 코드를 입력하면 자동 완성(IntelliSense) 제공
• 문법 오류는 빨간 밑줄로 표시

언어별 정확도는 확장 프로그램에 따라 달라짐

 

 

Command Palette (핵심 기능)

VS Code의 심장 같은 기능

실행 방법

• Windows / Linux: Ctrl + Shift + P
• macOS: Cmd + Shift + P

자주 쓰는 명령

• Open Folder
• Reload Window
• Preferences: Open Settings
• Format Document
• Change Language Mode

👉 메뉴 찾기 귀찮을 때 무조건 여기서 검색

 

 

필수 단축키 정리

파일 & 화면

• Ctrl + N : 새 파일
• Ctrl + S : 저장
• Ctrl + W : 탭 닫기
• Ctrl + \ : 화면 분할

편집

• Ctrl + C / V / X : 복사 / 붙여넣기 / 잘라내기
• Ctrl + Z / Y : 실행 취소 / 다시 실행
• Alt + ↑ ↓ : 줄 이동
• Shift + Alt + ↓ : 줄 복사

검색

• Ctrl + F : 파일 내 검색
• Ctrl + H : 치환
• Ctrl + Shift + F : 전체 검색

 

 

코드 정렬 (Format)

코드 스타일을 자동으로 맞춰주는 기능

• 단축키: Shift + Alt + F
• 또는 우클릭 → Format Document

언어별 포맷터는 확장 프로그램 필요

 

 

확장 프로그램 (Extensions)

VS Code의 진짜 힘은 확장 프로그램

설치 방법

• 왼쪽 🧩 Extensions 클릭
• 검색 → Install

입문자 추천 확장

• Korean Language Pack : 한글 UI
• Prettier : 코드 자동 정렬
• ESLint : JS 문법 검사
• Live Server : HTML 실시간 서버
• Java Extension Pack : Java 개발 필수
• Spring Boot Extension Pack : Spring 개발

 

 

터미널 사용하기

VS Code 안에서 터미널을 바로 사용 가능

• 실행: Ctrl + `

장점

• 프로젝트 경로 자동 설정
• Git, Maven, Gradle, npm 바로 실행

예시:

npm start
mvn clean install
java -jar app.jar

 

 

 

 Git 연동

VS Code는 Git을 기본 지원

• 변경 파일 자동 감지
• 커밋 / 푸시 / 풀 가능

기본 흐름

1. 파일 수정
2. Source Control 탭 이동
3. 메시지 작성
4. Commit → Push

복잡한 Git 명령 몰라도 충분히 사용 가능

 

 

Settings (설정)

설정 열기 : Ctrl + ,

자주 바꾸는 설정

• Font Size
• Tab Size
• Auto Save
• Format On Save

설정은 UI 방식과 JSON 방식 둘 다 제공

 

 

 

VS Code가 잘 어울리는 사람

• 개발 입문자
• 웹 / 백엔드 / 앱 개발자
• 여러 언어를 동시에 다루는 사람
• 가벼운 개발 환경을 선호하는 사람