반응형
Visual Studio Code(이하 VS Code)는 가볍고 빠르면서도 자유롭게 커스터마이징할 수 있는 게 최대 장점입니다.
자주 쓰는 단축키를 바꾸거나, 나만의 코드 스니펫을 만들어두면 개발 생산성이 확 올라가요!
이번 포스팅에서는 다음 세 가지를 초보자도 따라하기 쉽게 설명드릴게요:
- 테마 변경
- 단축키 바꾸기
- 나만의 코드 스니펫 만들기
🎨 1. VS Code 테마 바꾸기 (다크 모드부터 레트로 테마까지!)
- Ctrl + K → Ctrl + T 누르기 (또는 상단 메뉴 → 보기 → 명령 팔레트)
- Color Theme 입력 후 선택
- 기본 테마 또는 확장 프로그램으로 테마 설치 가능
✅ 인기 테마 추천:
- One Dark Pro (모던하고 세련됨)
- Dracula Official (감성 다크 테마)
- Night Owl (눈에 편한 컬러)
- GitHub Theme (익숙한 깃허브 UI)
⚙️ 2. 단축키 바꾸기 (자주 쓰는 기능을 내 스타일로!)
- Ctrl + K → Ctrl + S 누르면 키보드 단축키 설정 창 열림
- 원하는 명령어를 검색 후 우클릭 → "키 바인딩 변경"
예) 저장할 때 Ctrl + S 말고 F2로 바꾸고 싶다면 여기에 직접 지정 가능!
🧠 3. 나만의 코드 스니펫 만들기
“코드 한 줄 한 줄 쓰기 너무 귀찮다…”
자주 사용하는 HTML 구조, 함수 템플릿 등을 단축어처럼 자동 완성할 수 있어요!
🛠️ 만드는 방법
- Ctrl + Shift + P → “Preferences: Configure User Snippets” 입력
- 새 스니펫 파일 생성 (html.json, javascript.json 등)
- 아래 예시처럼 코드 작성
"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 확장으로 테마/스니펫/단축키를 다른 컴퓨터에서도 연동 가능
- 잘 만든 스니펫은 팀 작업 시도 공유해서 활용 가능
- 테마는 너무 화려하면 가독성이 떨어질 수 있으니 적당한 컬러톤 추천!
✅ 마무리하며
개발 환경을 내 스타일에 맞게 바꾸는 건 단순한 ‘꾸미기’를 넘어서
생산성 향상과 코딩 피로도 감소에 직접적인 도움이 됩니다.
반응형
'Visual Studio Code' 카테고리의 다른 글
| Prettier + ESLint 설정법! VS Code에서 자동 코드 정리하는 방법 완전 정복 (0) | 2025.07.04 |
|---|---|
| VS Code 추천 확장 프로그램 TOP 10 (2025 최신 업데이트) (0) | 2025.07.03 |
| VS Code에서 Git과 GitHub 한 번에 쓰기! 초보자도 깔끔하게 연결하기 (0) | 2025.07.02 |
| VS Code 완전 정복! 자주 묻는 질문 & 꿀팁 모음 (0) | 2025.06.18 |
| VS Code 디버깅 기능 100% 활용하기! 코드 오류 잡는 법 (0) | 2025.05.20 |