Editor Note

• 단축키
  • 창 제어
  • 커서 제어
  • 포커스 제어
  • 유틸 제어
  • 코드 블록 제어
  • 코드 관련 유틸 제어
  • 확장 프로그램 제어
• VSCode는 어떻게 다양한 기능을 지원할까?
• file.associations

단축키

창 제어

단축키	설명
Ctrl + `	터미널 패널 토글
Ctrl + Shift + 5	터미널 패널 분할
Ctrl + \	창 열방향 분할
Ctrl + K + Ctrl + \	창 행방향 분할
Ctrl + K + Ctrl + Shift + \	창 열방향 분할
Ctrl + PgUp	그룹 상관 없이 좌측으로 창 변경
Ctrl + PgDn	그룹 상관 없이 우측으로 창 변경
Ctrl + Alt + ←	좌측 그룹으로 창 이동
Ctrl + Alt + →	우측 그룹으로 창 이동
Ctrl + K + ← or → or ↑ or ↓	화살표 방향으로 그룹 이동
Ctrl + W	현재 창 닫기
Ctrl + K + W	모든 창 닫기

커서 제어

단축키	설명
Ctrl + Home	파일 내에서 커서 위치 맨 처음 라인으로 이동
Ctrl + End	파일 내에서 커서 위치 맨 마지막 라인으로 이동
Ctrl + Alt + ↑ or ↓	커서 추가하기
Alt + Click	클릭 위치에 커서 추가하기
Ctrl + L	커서가 위치한 라인 드래그
Shift + Alt + Click	커서 위치에서 마우스 클릭 위치까지 드래그
Alt + Shift + ↑ or ↓	커서가 위치한 라인 또는 드래그된 구역 복사
Alt + ↑ or ↓	커서가 위치한 라인 또는 드래그된 구역 라인 이동
Ctrl + Shift + K	커서가 위치한 라인 또는 드래그된 구역 삭제
Ctrl + X	커서가 위치한 라인 또는 드래그된 구역 잘라내기

포커스 제어

단축키	설명
Ctrl + Shift + E	explorer로 포커스 이동
Ctrl + Shift + .	breadcrumbs로 포커스 이동

유틸 제어

단축키	설명
Ctrl + P	파일명으로 파일 찾기
Ctrl + Shift + P(>)	명령어 찾기
Ctrl + G(:)	입력한 라인으로 이동
Ctrl + Shift + O(@)	현재 파일 안에서 심볼 찾기
Ctrl + T(#)	현재 워크스페이스 상에서 심볼 찾기
Ctrl + R	최근 연 파일 및 폴더 찾기
Ctrl + O	파일 열기
Ctrl + K + Ctrl + O	폴더 열기

코드 블록 제어

단축키	설명
Ctrl + K + Ctrl + 0	전체 모두 접기
Ctrl + K + Ctrl + J	전체 모두 펼치기
Ctrl + K + Ctrl + [	커서 위치의 블록에서 자식까지 모두 접기
Ctrl + K + Ctrl + ]	커서 위치의 블록에서 자식까지 모두 펼치기
Ctrl + K + Ctrl + -	커서 위치의 블록과 자식 제외하고 모두 접기
Ctrl + K + Ctrl + =	커서 위치의 블록과 자식 제외하고 모두 펼치기
Ctrl + Shift + [	커서 위치의 블록만 접기
Ctrl + Shift + ]	커서 위치의 블록만 펼치기

코드 관련 유틸 제어

단축키	설명
F2	심볼명 수정
F12	정의로 이동
Shift + F12	참조로 이동
Ctrl + /	라인 레벨 주석 토글
Alt + Shift + A	블록 레벨 주석 토글
Ctrl + Shift + \	대응하는 브라켓으로 이동
Ctrl + Alt + Backspace	브라켓쌍 제거
Ctrl + D	일치하는 것 찾기
Ctrl + Shift + L	일치하는 것 모두 찾기
Ctrl + .	빠른 수정 팁 보여주기
Ctrl + Space	추천 항목 보여주기
Ctrl + Shift + Space	파라미터 힌트 보여주기
Ctrl + Alt	타입 힌트 보여주기

확장 프로그램 제어

단축키	설명
Ctrl + Alt + N	Code Runner 실행
Ctrl + Alt + L	자동 console.log 생성
Alt + A	브라켓 영역 드래그
Ctrl + '	따옴표 종류 스위치

VSCode는 어떻게 다양한 기능을 지원할까?

VSCode와 같은 IDE는 Language Server Protocol(LSP)을 통해 언어에 대한 기능을 지원한다. LSP는 클라이언트(IDE)와 서버(언어 서버) 간의 통신을 표준화하여 코드 편집기와 다양한 프로그래밍 언어 간의 상호 운용성을 제공한다. 이를 통해 자동 완성, 구문 강조, 오류 검사 등의 기능을 구현할 수 있다.

또한, VSCode와 같은 IDE는 자체 API를 제공하여 확장 프로그램 개발자들이 IDE의 기능을 확장하고, 사용자 정의 기능을 추가할 수 있게 한다. 개발자는 이 API를 사용하여 새로운 언어 지원, 테마, 도구 모음, 편집기 기능 등을 구현할 수 있다. 이를 통해 사용자는 자신에게 필요한 기능을 추가하거나 IDE를 개인의 작업 흐름에 맞게 조정할 수 있다.

file.associations

이 속성은 특정 확장자에 대해 언어 모드를 지정할 수 있다. .env.local 파일이 env 언어 모드를 인식하지 않고 *.mjs 파일이 javascript 언어 모드를 인식하지 않아서 아래와 같이 설정해주었다.

{
  "files.associations": {
    ".env* ": "env",
    ".mjs": "javascript"
  }
}