주의: 언어 사용이 좀 가벼운 글입니다.

안녕하세요.

VSC 환경에서 마우스 없이 빠르게 코딩하는 방법에 대해서 소개해보려고 합니다.

초급 -> 중급 -> 고급 순으로 소개드리려 하며, 난이도에 대한 기준은 제 맘입니다.

코딩 꺼드럭이라는 말도 들어봤습니다.
유용해보이는 것만 주워가셨으면 좋겠습니다.

초급 스킬

초급 스킬은 꼭 사용하셨으면 좋겠습니다.

하단 모든 단축키 움짤은 마우스를 사용하지 않았습니다. 배속도 없습니다.

1. 파일 목록 포커스

cmd + shift + e

코드 편집 영역과 파일 탐색 사이를 전환하는 단축키인데 꽤 유용합니다.

파일 탐색 영역에서 방향키와 스페이스바로 파일을 열 수도 있습니다.

다시 코드 영역으로 돌아가고 싶다면 cmd + shift + e를 다시 눌러도 되며
cmd + 1도 가능합니다.

2. 파일/디렉토리 생성

파일 만들기: cmd + n
디렉토리 만들기: ctrl + n

따로 설정해야합니다. 바로 하단에 나와있습니다.

F1을 누르고 Open Keyboard Shortcuts(JSON)을 검색한 후, 엔터를 누릅니다.

그러면 keybindings.json 파일이 열릴텐데, 해당 json에 다음 내용을 추가하면 됩니다.

복사해서 쓰십시오!

[
  { "key": "cmd+n", "command": "explorer.newFile", "when": "!editorFocus" },

  { "key": "ctrl+n", "command": "explorer.newFolder", "when": "!editorFocus" }
]

• cmd+n : 새로운 파일 생성하기
• ctrl+n: 새로운 디렉토리 생성하기

key의 값만 바꿔서 다른 단축키로도 사용할 수 있습니다.

3. 파일 이름 변경, 삭제

파일 이름 변경: enter
파일 삭제: 백스페이스바

자유롭게 사용하기 위해서는 1번에서 소개한 cmd + shift + e를 사용할 수 있어야합니다.

4. 터미널 빠르게 이동하기

ctrl + 백틱

터미널 영역을 선택할 수 있습니다.

최종 정리

다 섞어쓰면 이런식으로 동해번쩍 서해번쩍 커서를 움직일 수 있습니다.

머리아프니까 간단하게 그림으로 봅시다

중급

초급에서는 파일을 조작하는 방법에 대해서 알아봤으니 중급에서는 코드로 알아보겠습니다.

1. 단어 선택과 다중 커서

단어 선택 단축키: cmd + D

단어를 한 번에 선택하게 해줍니다.

복사와 잘라내기 등등 섞어 사용한다면 유용하겠죠!

여러 번 누르면 동일한 단어를 다중 커서로 선택해줍니다.

이런식으로 말이죠.

모든 async를 제거하는 것도 가능하겠죠.

2. 코드 폴딩 단축키

코드 전체 폴딩: cmd + k + 0
코드 전체 폴딩 해제: cmd + k + j

선택 부분 코드 폴딩: cmd + shift + [
선택 부분 코드 폴딩 해제: cmd + shift + ]

코드 전부 접고 class만 펴게 되면 이런 식으로 됩니다.

단축키 순서: cmd + k + 0 -> cmd + ]

3. 에러 바로가기 단축키

에러 바로가기 F8

빨간줄 위치로 커서를 바로 이동시킬 수 있습니다.

4. 자동 완성 호출 단축키

cmd + I

어떤 자동 완성을 추천하는지 볼 수 있어요.

물론 객체의 경우 자동완성 목록 보는 트리거가 있긴합니다.
중괄호 내부에서 ', " 로도 목록을 볼 수 있어요.

하지만, 이 단축키는 리액트 환경에서 빛을 발합니다.

컴포넌트에 필요한 프로퍼티 목록을 볼 때 정말 유용하거든요!

5. 선언 위치/참조 위치 보기

f12

변수에 커서를 대고 누를 경우, 변수 선언 위치로 이동합니다.
class, method 모두 가능하며, 타입도 가능합니다.

정의 부분에서, class나 변수가 어디서 사용하고 있는지도 확인할 수 있습니다.

오픈소스 분석할 때 무조건 필수!!

6. 파일명으로 파일 열기

cmd + p

프로젝트를 하다보면 파일이 너무 많아집니다.

파일을 쉽게 찾게 해줍니다.

고급

1. 현재 탭 이동

ctrl + cmd + 방향키

현재 보고 있는 탭을 방향키 쪽으로 이동시키는 단축키

초급 단축키들과 섞어쓰면 편하겠죠.

2. 보고있는 파일 탭 추가하며 새로 띄우기

cmd + \

하나의 파일을 서로 다른 스크롤 위치에서 봐야할 때가 있습니다.
그럴 때 유용해요!

3. shortcat 프로그램

현재 화면에서 클릭 가능한 모든 것을 키보드로 클릭할 수 있도록 도와줍니다.

다운로드: https://shortcat.app/

모든 버튼는 당연히 외울 수 없죠! 정말 가끔 누르는 버튼은 이걸로 누릅시다.

마우스 없이 PR 보내는 움짤

마우스 없이 PR 작성할 때도 유용하다!

결론

혼합하면 이렇게 보입니다.

Visual Studio Code가 최고다!