Visual Studio Code

VS Code 꾸미기 완전 정복! 테마, 단축키, 코드 스니펫까지 내 입맛대로 커스터마이징하기

jonbeo 2025. 7. 5. 10:25
반응형

 

 

Visual Studio Code(이하 VS Code)는 가볍고 빠르면서도 자유롭게 커스터마이징할 수 있는 게 최대 장점입니다.
자주 쓰는 단축키를 바꾸거나, 나만의 코드 스니펫을 만들어두면 개발 생산성이 확 올라가요!

이번 포스팅에서는 다음 세 가지를 초보자도 따라하기 쉽게 설명드릴게요:

  1. 테마 변경
  2. 단축키 바꾸기
  3. 나만의 코드 스니펫 만들기

 

🎨 1. VS Code 테마 바꾸기 (다크 모드부터 레트로 테마까지!)

  1. Ctrl + K → Ctrl + T 누르기 (또는 상단 메뉴 → 보기 → 명령 팔레트)
  2. Color Theme 입력 후 선택
  3. 기본 테마 또는 확장 프로그램으로 테마 설치 가능

✅ 인기 테마 추천:

  • One Dark Pro (모던하고 세련됨)
  • Dracula Official (감성 다크 테마)
  • Night Owl (눈에 편한 컬러)
  • GitHub Theme (익숙한 깃허브 UI)

 

⚙️ 2. 단축키 바꾸기 (자주 쓰는 기능을 내 스타일로!)

  1. Ctrl + K → Ctrl + S 누르면 키보드 단축키 설정 창 열림
  2. 원하는 명령어를 검색 후 우클릭 → "키 바인딩 변경"

예) 저장할 때 Ctrl + S 말고 F2로 바꾸고 싶다면 여기에 직접 지정 가능!

 

🧠 3. 나만의 코드 스니펫 만들기

“코드 한 줄 한 줄 쓰기 너무 귀찮다…”
자주 사용하는 HTML 구조, 함수 템플릿 등을 단축어처럼 자동 완성할 수 있어요!

🛠️ 만드는 방법

  1. Ctrl + Shift + P → “Preferences: Configure User Snippets” 입력
  2. 새 스니펫 파일 생성 (html.json, javascript.json 등)
  3. 아래 예시처럼 코드 작성
"myHTML": {
  "prefix": "html5",
  "body": [
    "<!DOCTYPE html>",
    "<html lang=\"en\">",
    "<head>",
    "  <meta charset=\"UTF-8\">",
    "  <title>$1</title>",
    "</head>",
    "<body>",
    "  $2",
    "</body>",
    "</html>"
  ],
  "description": "기본 HTML5 템플릿"
}

 

위처럼 작성하면 html5라고 입력할 때 기본 HTML 템플릿이 자동 완성됩니다!

 

✨ 커스터마이징 꿀팁 모음

  • Settings Sync 확장으로 테마/스니펫/단축키를 다른 컴퓨터에서도 연동 가능
  • 잘 만든 스니펫은 팀 작업 시도 공유해서 활용 가능
  • 테마는 너무 화려하면 가독성이 떨어질 수 있으니 적당한 컬러톤 추천!

 

✅ 마무리하며

개발 환경을 내 스타일에 맞게 바꾸는 건 단순한 ‘꾸미기’를 넘어서
생산성 향상과 코딩 피로도 감소에 직접적인 도움이 됩니다.

반응형