[VSCODE][MAC] 비주얼 스튜디오 코드 유용한 단축키 및 설정 알아보기

공식 문서에서 사용하는 단축키를 모아보았습니다.

맥 버전입니다.

VS 코드 다운받기

https://code.visualstudio.com/download

 

폴더 열기

• File > Open Folder (unassigned)
• 단축키 없음. 필요하면 커스터마이징

인텔리센스 스마트 코드 자등완성

• ⌃Space

파일 탐색기

• View > Explorer (⇧⌘E)

파일에서 찾기 탐색기

• View > Search (⇧⌘F)

버전 관리 탐색기

• View > Source Control (SCM) (⌃⇧G)

실행 및 디버깅

• View > Run (⇧⌘D)

확장 프로그램 탐색기

• View > Extensions (⇧⌘X)

명령어 팔레트(중요)

• View > Command Palette... (⇧⌘P)

출력 패널

• View > Output (⇧⌘U)

디버그 콘솔

• View > Debug Console (⇧⌘Y)

문제 패널

• View > Problems (⇧⌘M)
• 런타임 이전 문제점(오류)는 해당 패널에 표시됨

VSCODE 내부 터미널

• View > Terminal (⌃`)

새 파일 만들기

• File > New File (⌘N)

파일 저장하기

• File > Save (⌘S)

자동 저장

• File > Auto Save

파일 실행

• Run > Start Debugging (F5)

유용한 개발 확장 프로그램

• Python - IntelliSense, linting, debugging, code formatting, refactoring, and more.
• Live Preview - 웹페이지 미리보기를 위한 로컬 서버 호스팅

Zoom

• Zoom out (⌘-)
• Zoom in (⌘=)

에디터 색상 커스터마이징

• File > Preferences > Color Theme (⌘K ⌘T)
• Code > Preferences > Color Theme on macOS

문서 포매팅

• Format Document command (⇧⌥F)

자동 저장 켜기

• File > Auto Save
• 공식 문서에서는 항상 켜는걸 추천함

터미널 쪼개기

• Split Terminal (⌘\)

새 터미널 열기

• Create New Terminal (⌃⇧`)

최근에 열었던 파일들 파일 명으로 찾기

• ⌘P to show the Quick Open dropdown

커맨드 팔렛트 기능

• 해당 파일의 해당 라인으로 이동하기
  • 파일 탐색기 열어서
  • 파일명:라인넘버
• 파일 내의 심볼(문자열 등 기호)로 이동
  • 파일명@심볼 
• 빨리 열기 옵션 보기
  • ? 입력하기
• 여러 파일 빨리 열기
  • 커맨드 팔렛트에서 파일 검색하고 Right Arrow
  • 드롭다운은 그대로고 파일은 열러서 여러개 열 수 있음

멀티 커서 선택

• 마우스
  • Alt+Click on Windows and Linux, Option+Click on macOS to add a new cursor
• 키보드
  • ⌥⌘↑ ⌥⌘↓ to add a new cursor above or below the current position
• ⇧⌘L 같은 토큰 전부 찾기

설정 에디터 열기

• File > Preferences > Settings (⌘,)
• Code > Preferences > Settings on macOS

타이핑 시 포맷 켜기 (추천)

• check Editor: Format on Type

복사 붙여넣기 시 문서 포매팅 켜기(추천)

• check Editor: Format on Paste

설정과 아이콘은 아니지만 유용한 정보들

확장 프로그램 마켓스토어

https://code.visualstudio.com/docs/editor/extension-marketplace

디버깅

https://code.visualstudio.com/docs/editor/debugging

리액트 디버깅하기

https://code.visualstudio.com/docs/nodejs/reactjs-tutorial

버전 컨트롤

https://code.visualstudio.com/docs/editor/versioncontrol

Version Control in Visual Studio Code