GIF로 vscode 단축키 5분만에 습득하기 (mac)

2025. 2. 23. 18:06·프론트엔드
반응형

나도 ... 슉슉 개발하고싶다!

페어프로그래밍중... 이상하리만큼 손이 날라다니는 페어분들을 보며 단축키의 필요성을 느꼈다. 영상을 반복해서 보거나 단축키를 계속 쓰면서 익숙해지는 방법도 있지만 아주 효율적으로 학습하고싶었다. 나는 빨리빨리의 종족이니까.

 

블로그글에 정리되어있는걸 보고 따라하면서 습득하고싶지않다... 영상은 하나하나 넘기고 돌아가기 귀찮다... 이왕이면 글만 봐도 바로 쓸수있게 만들고싶다! 라는 열망에서 글을 쓰기 시작했다. 본론부터 시작하겠다!

기본 편집 단축키

라인 잘라내기

한개의 라인을 잘라낼수있고, 잘라낸 문장은 원하는곳으로 이동해 cmd + v로 붙여넣기 할수있다.

2025-02-22 11.37.06.gifCleanShot 2025-02-22 at 11.38.33@2x.png

라인 복사하기

라인의 맨 끝에 가서 cmd + c를 누르고 cmd + v를 누르면 원하는만큼 해당 라인에 대한 복사가 가능하다.

2025-02-22 11.40.44.gifCleanShot 2025-02-22 at 11.41.23@2x.png

특정 코드를 위, 아래로 옮기기

커서를 옮기고 싶은 라인의 아무곳이나 두고, option키 + 화살표 키로 해당 라인을 옮길수있다. 한개의 라인도 되고, 여러개의 라인을 선택한상태로 한번에 여러개를 옮길수도 있다.

2025-02-22 11.51.14.gif

 

CleanShot 2025-02-22 at 11.51.52@2x.png

아래, 위 라인으로 이동하면서 공백 만들기

커서의 위치가 어디에 있든 바로 아래라인으로 이동하면서 해당 라인을 비워놓을수 있다.

2025-02-22 11.56.10.gif

아래에 라인 만들기

CleanShot 2025-02-22 at 11.24.07@2x.png

위에 라인만들기

CleanShot 2025-02-22 at 11.57.30@2x.png

파일의 시작, 끝으로 이동

cmd를 누른상태로 화살표를 위, 아래로 이동하면 파일의 시작, 끝으로 이동한다.

2025-02-22 12.06.49.gifCleanShot 2025-02-22 at 12.07.38@2x.png

주석관련 단축키

한줄 or 여러줄 한번에 주석하기

커서를 코드 맨 끝에 둔채로 cmd + /를 누르거나, 여러개를 선택한뒤에 cmd + /를 누르면 주석 처리가 된다. 아무것도 없는 라인에 하면 그냥 주석이 만들어진다.

2025-02-22 11.12.29.gif

 

CleanShot 2025-02-22 at 11.16.05@2x.png

블럭 주석 만들기

2025-02-22 12.11.04.gif

 

CleanShot 2025-02-22 at 12.12.09@2x.png

멀티 커서 단축키

클릭으로 여러개의 커서를 삽입시키기

옵션 + 클릭으로 커서를 삽입 시키고, 동시에 편집할수 있다.

2025-02-22 14.21.05.gif

 

CleanShot 2025-02-22 at 11.57.15@2x.png

방향키로 커서를 삽입시키기

option + cmd + 방향키로 바로 아래나 위에로 커서를 삽입시킬수도 있다.

2025-02-22 14.30.46.gif

 

CleanShot 2025-02-22 at 14.31.26@2x.png

마지막 커서 실행 취소 시키기

2025-02-22 14.33.10.gif

 

CleanShot 2025-02-22 at 14.33.33@2x.png

찾기, 바꾸기 단축키

특정 텍스트 원하는 텍스트로 일괄 변경하기

찾고자 하는 단어를 입력하고, tab을 입력하면 바꾸고자 하는 원하는 단어를 입력할수있는 입력칸으로 바로 입력 가능하다.
한번에 모두 변경하고자 하면 오른쪽 하단 두개의 버튼중 두번째 버튼을 터치하면 된다.

2025-02-22 11.22.42.gifCleanShot 2025-02-22 at 11.15.29@2x.png

동일한 단어 찾고 선택하기

amount라는 단어를 선택하고 cmd를 누른상태로 D를 누르면 누를때마다 동일한 단어를 선택할수있게된다. 동시에 삭제, 수정이 가능하다.

2025-02-22 14.38.42.gif

 

CleanShot 2025-02-22 at 14.39.51@2x.png

네비게이션 단축키

빠른 파일 열기

파일의 키워드를 입력하거나, 방향키로 원하는 파일로 이동한다.

2025-02-22 11.30.11.gif

 

CleanShot 2025-02-22 at 11.33.10@2x.png

모든 변수(함수) 보기

cmd+ T를 누르고 원하는 함수, 변수를 입력해서 해당 파일에서 빠르게 네비게이팅 가능하다.

2025-02-22 14.43.19.gifCleanShot 2025-02-22 at 14.44.31@2x.png

이전까지 수정하던 곳으로 이동

control + - 를 누르면 하나의 파일안에서도 이전에 수정하던곳으로, 다른 파일로 이동했다면 그 이전의 파일로 이동할수있다. 이후에 수정했던 곳으로 돌아가려면 shift를 추가로 누른다.

2025-02-22 14.49.14.gif

 

CleanShot 2025-02-22 at 14.50.48@2x.png

에디터관리

에디터 분할하기

cmd + \를 누르면 에디터가 오른쪽에 한개 더 생긴다.

2025-02-22 14.59.17.gif

 

1,2,3번째 편집기 그룹 포커싱

cmd를 누른상태로 1을 누르면 첫번째 편집기가, 2를 누르면 두번째 편집기가 포커싱된다.

2025-02-22 15.01.27.gif

 

CleanShot 2025-02-22 at 15.02.31@2x.png

파일관리

전체저장

그냥저장은 cmd + s, 전체저장은 cmd + option+ s 이다.

CleanShot 2025-02-22 at 15.05.11@2x.png

디스플레이 관리

전체화면으로 전환, 창모드로 되돌리기

cmd + control + F 를 누르면 에디터의 화면을 전체화면으로, 전체화면이었던 화면은 창으로 되돌릴수있다.

2025-02-22 16.34.57.gifCleanShot 2025-02-22 at 16.36.03@2x.png

사이드바 나타나게하기, 숨김

cmd+ B를 눌러 사이드바를 숨기거나, 생기게 할수있음.

2025-02-22 16.42.46.gif

 

CleanShot 2025-02-22 at 16.43.27@2x.png

마크다운 미리보기 열기

shift + cmd + v를 눌러 마크다운을 미리보기 할 수 있다.

2025-02-22 16.47.37.gif

 

CleanShot 2025-02-22 at 16.47.59@2x.png

터미널 관련 단축키

터미널 열기 닫기

종종 control + ` 을 누르면 된다고 적혀있는데 최신 vscode의 단축키는 cmd + J이다.
터미널을 열수있고, 닫을수있다.

2025-02-22 16.54.12.gif

 

CleanShot 2025-02-22 at 16.54.43@2x.png

새 터미널 생성

control + shift + ` 을 누르면 터미널을 새로 생성할수 있다.

2025-02-22 16.57.14.gif

 

CleanShot 2025-02-22 at 16.57.45@2x.png

단축키는 많다...!

사실 기본으로 있는 단축키부터, 사용자가 지정할수있는 단축키까지 다양한 단축키들이 있다. 본인이 가장 많이 사용할만한 단축키들은 기억해놨다가 개발할때 사용해보면 좋겠다! 나도 가끔 와서 하나하나 쳐보는 대신 이 글을 죽 읽어보려고 한다.

 

 

참고 자료

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
https://parkjh7764.tistory.com/197
반응형

'프론트엔드' 카테고리의 다른 글

Todo Tree로 깔끔하게 Todo, 요구사항 관리하기  (4) 2024.11.05
'프론트엔드' 카테고리의 다른 글
  • Todo Tree로 깔끔하게 Todo, 요구사항 관리하기
분주
분주
bunju20 님의 블로그 입니다.
  • 분주
    개발자의 분주한 하루
    분주
  • 전체
    오늘
    어제
    • 분류 전체보기 (28)
      • 회고 (17)
        • 프로젝트 회고 (5)
        • 우아한테크코스 (12)
      • 알고리즘 (7)
        • 프로그래머스 (6)
      • 프론트엔드 (3)
        • Flutter (1)
      • 일상 (0)
        • 독서 (0)
      • 공부 (1)
        • 우아한테크코스 (1)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    js
    우아한테크코스
    우아한테크코스프론트엔드
    우테코
    우테코 프리코스
    우테코프론트엔드
    프로그래머스
    회고
    우테코 프론트엔드
    코딩테스트 고득점 Kit
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
분주
GIF로 vscode 단축키 5분만에 습득하기 (mac)
상단으로

티스토리툴바