[VSCode][Tips] 유용한 단축키를 알아보자 (1)

개요

같은 작업을 하더라도 빠르게 끝낼 수 있다면 더할나위 없이 좋을 것이다. 단축키를 쓰면 마우스로 여러 번 클릭하지 않고도 빠르게 원하는 작업을 할 수 있기 때문에 알아두면 매우 좋다. 오늘은 VSCode에서 내가 자주 사용하는 몇 가지 단축키를 정리해볼까 한다.

 

필수로 알아야 하는 단축키

ctrl+c, ctrl+v

각각 복사, 붙여넣기 단축키이다. 모르는 사람이 없을거라 생각하지만 VSCode에서도 동일하게 사용할 수 있다는 것만 알았으면 해서 추가했다.

 

ctrl+s

저장하는 단축키이다. 이것도 모르는 사람이 없을거라 생각하지만, 제일 많이 쓰는 단축키라 해도 무방할 정도로 중요한 단축키라 추가해보았다.

 

ctrl+z, ctrl+y

각각 뒤로가기 앞으로가기 단축키이다. 뒤로가면 코드를 잘못 적었을 때나 잘못 바꿨을 때 이전의 상태로 되돌아 갈 수 있으며, 앞으로가기는 되돌린 내용을 다시 되돌릴 수 있다. 

 

ctrl+/

주석처리 단축키이다. 주석처리하고 싶은 줄을 클릭하거나 드래그 한 후 ctrl+/를 사용하면 해당 줄이 주석처리 된다. 여러 줄을 주석처리 하고 싶은 경우 해당 영역을 드래그 한 후, ctrl+/를 사용하면 된다.

---

반필수 단축키들

ctrl+a

모두 선택 단축키다. 현재 열어논 파일의 코드 전체를 선택할 때 사용한다. 보통 ctrl+k+f(아래에서 설명)이나 ctrl+/와 같이 사용한다.

 

ctrl+f

특정 단어를 찾는 단축키다. VSCode가 아니더라도 여기저기서 자주 사용하는 단축키이다. VScode에선 특정 변수 이름을 마우스로 클릭하고, ctrl+f를 누르면 해당 단어가 입력된 상태로 찾을 수 있다. (추가로, 변수 이름을 클릭하면, 해당 변수가 사용된 모든 위치에 하이라이트가 생긴다. 이 기능으로 변수가 내가 의도한 변수로 적용이 되었는지 확인할 수 있다.)

handler클릭 후, ctrl+f사용 시 모습

ctrl+x

잘라내기 단축키다. 잘라내기 단축키는 알고만 있고 잘 사용하지 않았던 단축키인데, 오려낸 내용을 ctrl+v로 붙여넣기 하면 해당 내용이 이동하는 효과가 있다는 것을 알게되면서 자주 사용하게 되었다. 코드의 위치를 자주 바꾸는 개발자 입장에서 ctrl+x는 ctrl+c, ctrl+v보다 많이 쓰게 되는 것 같다. 익숙해지면 아주 좋으니 가능하면 사용해보자.

 

변수 이름 클릭 + f2 

이름 재설정 단축키다. 비슷한 방법으로 ctrl+h(바꾸기 단축키)가 있지만 둘 다 사용해본 입장으로써 f2가 훨씬 빠르고 편하다. 물론, const {a, b, c} = req.body와 같이 코드 내부에서 지정된 변수이름이 아닌 경우에 사용하면  const {a: currentA, b, c} = req.body처럼 변수이름 자체를 바꾸는게 아니라 alias를 추가하는 방식이여서 열받기는 하지만, 이런 경우 ctrl+f2(지정한 단어 전부 선택)를 사용하거나 드래그로 영역 지정 -> ctrl+h -> 모두바꾸기를 사용하고 나머지 경우는 전부 이 방법을 사용한다.

 

ctrl+마우스 클릭

해당 변수 또는 경로로 이동하는 단축키이다. 변수는 선언된 위치로 이동하고, 경로는 해당 경로의 파일을 열어준다. 특히 경로로 이동하는 경우, 오류가 발생했을 때 오류가 발생한 줄의 위치도 알려주기 때문에 오류가 발생한 줄의 위치로 이동하여 오류픽스할 때 매우 편하다. 

 

ctrl+k+f

들여쓰기 단축키이다. 만약 prettier를 설정해두었다면, 해당 prettier로 자동 들여쓰기 해준다는 장점이 있다. 지저분한 코드를 1초라도 더 보기 싫어하는 개발자들이라면 알아두면 좋다.

---

알아두면 좋은 단축키들

ctrl+`

`는 키보드 1 왼쪽에 있는 키로, 백틱이라고 부른다. ctrl+`는 터미널 창을 여는 단축키로, VSCode에서 터미널 창을 빠르게 열 수 있다. 굳이 알아둬야 하냐 싶겠지만, 생각보다 VSCode에서 터미널이 닫여있는 경우가 많아 은근 자주 사용한다. (현업자 분들도 자주 사용하는 것을 보고 얼른 배웠다 ㅋㅋ)

 

ctrl+shift+v

미리보기 단축키이다. 이 단축키는 최근 들어서야 알게되었는데, VSCode에서 README.md를 작성할 때 창분할을 해두고 ctrl+shift+v를 하면 실시간으로 작성과 동시에 README.md의 미리보기를 볼 수 있다. 

 

ctrl+shift+t

닫은 창을 다시 여는 단축키이다. 원래는 크롬에서 자주 사용하던 단축키였는데, VSCode에서도 똑같이 작동하는 것을 발견했다. 닫은 창을 최근 순으로 다시 열어주는 단축키이기 때문에 이것 또한 알아두면 좋다.

 

ctrl+w

현재 창을 닫는 단축키이다. 조금만 코드를 짜도 열려있는 창이 탭이 꽉차버리니 알아두면 필요한 창만 열어둘 수 있어서 편리하다.

 

ctrl+k+w

모든 창을 한 번에 닫아버리는 단축키이다. ctrl+w의 상남자 버전으로, 본인도 자주 사용하는 방식이다. 

 

ctrl+tap

탭 변경 단축키이다. 너무 열어놓은 탭이 많을 때, ctrl+tap을 이용해 원하는 탭으로 이동할 수 있다. 

 

shift+home, shift+end

해당 줄 끝까지 영역지정 / 해당 줄 처음까지 영역지정 단축키이다. 이 단축키 매우 유용한데 생각보다 사람들이 잘 안쓰는 것같다. VSCode에서만 사용할 수 있는 것이 아닌 모든 텍스트 편집기에서 사용할 수 있으니 알아두자!

+) 사실 shift+home, shift+end는 단축키가 아니다. 그저 shift와 home/end의 조합일 뿐이다. 그래서 shift+지정하고자 하는 영역 끝을 마우스로 클릭과 같은 방식으로 사용할 수 있으며, home/end만 사용해 해당 줄 처음/끝으로 이동할 수도 있다.

---

조금은 고급진 단축키

ctrl+b

사이드바를 열고 닫을 수 있는 단축키이다. VSCode를 여러 개 켜놓고 쓰거나, 코드 영역을 넓게 쓰고 싶을 때 사용하는 단축키이다. 자주 사용하지는 않지만 마우스 클릭하기 귀찮을 때 사용하면 좋다.

 

ctrl+shift+f

사이드 바 전체 검색 단축키이다. ctrl+f는 현재 탭에서만 검색하는 것과 달리 ctrl+shift+f는 현재 작업영역 전체에서 검색한다. 파일의 수가 많아질수록 유용해지는 단축키이므로 알아두자!

 

ctrl+k+0(숫자), ctrl+k+j

현재 파일 모든 코드 접기 / 펴기 단축키이다. 하나의 파일에 코드가 많다면 드래그 해서 찾는 것도 하나의 일이다. 그렇기 때문에 드래그 대신 관심없는 코드는 접기 시작하는데, 이 때 한 번에 접을 수 있는 ctrl+k+0을 사용하면 아주 극락이 따로없다. 이건 진짜 꼭 알아두자! 

---

일단은 마무리

사람인지라 아무리 자주 사용해도 까먹는 단축키들이 있어 한 번 정리해봤다. 나중에 유용한 단축키들을 더 알게 되면 2탄으로 다시 글을 작성할 예정이다.

 

다음 글 링크