VS code Shortcut key

Prompt

프론트엔드 개발자들이 vs code 에서 가장 많이 사용하는 단축키들을 정리해 주세요.

---

---

프론트엔드 개발의 속도는 타자 속도가 아니라 단축키 활용 능력에서 결정된다고 해도 과언이 아닙니다.

VS Code에서 코딩 효율을 비약적으로 높여주는 핵심 단축키들을 카테고리별로 정리해 드릴게요.

---

🏎️ 편집 및 이동 (가장 많이 쓰임)

코드를 복사하고 위치를 옮기는 시간을 줄여주는 단축키들입니다.

• 줄 복사하기: Shift + Alt + ↓ 또는 ↑
  • 현재 커서가 있는 줄을 아래나 위로 즉시 복사합니다.
• 줄 이동하기: Alt + ↓ 또는 ↑
  • 코드를 잘라내서 붙여넣을 필요 없이, 줄 자체를 위아래로 옮길 수 있습니다.
• 줄 삭제하기: Ctrl + Shift + K
  • 커서가 어디 있든 해당 줄 전체를 한 번에 삭제합니다.
• 코드 정렬(포맷팅): Shift + Alt + F
  • 엉망이 된 들여쓰기와 줄 바꿈을 Prettier 설정에 맞춰 한 번에 깔끔하게 정리합니다.

---

🔍 탐색 및 검색

파일이 수백 개가 넘는 프로젝트에서 원하는 위치를 찾는 마법 같은 키들입니다.

• 파일명으로 파일 열기: Ctrl + P
  • 파일 이름을 입력하여 프로젝트 내 어떤 파일로든 즉시 이동합니다.
• 기호/함수로 이동: Ctrl + Shift + O
  • 현재 파일 내에 정의된 특정 함수나 변수 위치로 바로 건너뜁니다.
• 모든 파일에서 검색: Ctrl + Shift + F
  • 프로젝트 전체 파일 내에서 특정 단어를 찾아냅니다.
• 일치하는 단어 다중 선택: Ctrl + D
  • 같은 단어를 하나씩 선택해 내려가며 한꺼번에 이름을 바꿀 수 있습니다.

---

🛠️ 개발 효율 및 뷰 조절

작업 환경을 쾌적하게 유지해 주는 기능들입니다.

• 터미널 열기/닫기: Ctrl + (Backtick)
  • 별도의 창 없이 VS Code 하단 터미널을 빠르게 호출합니다.
• 사이드바 열기/닫기: Ctrl + B
  • 화면을 더 넓게 쓰기 위해 왼쪽 파일 탐색기 창을 숨기거나 보여줍니다.
• 화면 분할: Ctrl + \
  • 화면을 옆으로 쪼개서 HTML과 CSS를 동시에 띄워놓고 작업할 때 유용합니다.
• 주석 처리: Ctrl + /
  • 선택한 영역이나 현재 줄을 즉시 주석으로 전환합니다.

---

💡 실무자의 시선

단축키를 외우는 것도 좋지만, 내 손에 맞게 커스터마이징 하는 것이 더 중요합니다.

• 단축키 설정 진입: Ctrl + K를 누른 뒤 바로 Ctrl + S를 누르면 모든 단축키 목록과 변경 화면이 뜹니다.
• 마우스 쓰지 않기 도전: 하루에 딱 하나씩만 마우스 대신 단축키를 써보겠다고 결심해 보세요. 일주일만 지나도 작업 속도가 1.5배는 빨라집니다.
• 확장 프로그램 활용: 'Settings Sync'를 사용하면 집에서 설정한 단축키를 사무실 컴퓨터에서도 그대로 사용할 수 있어 편리합니다.

---

이 단축키들만 손에 익어도 코딩의 피로도가 확연히 줄어드는 걸 느끼실 거예요.

---

---

참고할 만한 포스팅 추천

---

https://inpa.tistory.com/entry/VS-Code-%E2%8F%B1%EF%B8%8F-%EC%9C%A0%EC%9A%A9%ED%95%9C-%EB%8B%A8%EC%B6%95%ED%82%A4-%EC%A0%95%EB%A6%AC

💽 유용한 VSCode 단축키 모음 - 개발을 누구보다 빠르게

 

---