VSCode 드래그 관련 꿀팁 (+ 그 외 관련 팁)

코드를 작업하다 보면 생각보다 드래그도 많이하게 된다.

그러다 보면 마우스로 드래그 하고, 다시 키보드로 손을 이동하는 동작들이 많아져서 손목에 부담이 가게 된다.

그래서 찾게된 vscode extension과 단축키 설정법!

 

단축키는 mac 기준으로 작성되었다.

1. Bracket Select

괄호, 따옴표 등을 단축키를 이용해 선택할 수 있다.

opt + a 를 클릭하면 "" 사이, '' 사이, [] 사이 등 한 번에 선택해준다.

완전 편함 강추

 

2. htmltagwrap

jsx 작업하다보면 부모 태그로 감싸 줘야하는 경우가 많이 생기는데 이 extension사용하면

내가 지정한 태그로 단축키만 입력하면 감싸준다.

opt + w를 클릭하면 드래그 한 부분을 태그로 감싸줌~!

나는 기본 div로 설정해놓고 jsx에서 Fragment로 감싸줘야할 때 div로 감싸고 div를 지워버린다.

 

3. Shortcuts 설정

emmet balance 라고 단축키 검색하는 곳에 치면 2개가 나오는데 (outward) 부분을 내가 사용하기 편한 단축키로 바꿔준다.

만약 div에 놓고 단축키만 입력하면 저렇게 한번에 선택된다.

2번의 htmltagwrap이랑 같이 쓰면 아주좋음~!

div에 커서 놓고 opt + q -> opt + w 누르면 키보드만으로 간단하게 Fragment 감쌀 수 있음

 

5. Toggle Quotes

cmd + ' 입력하면

'' -> "" -> `` 이런식으로 문장기호를 바꿔준다.

앞에 바꾸고, 뒤에 바꾸고 번거롭게 마우스로 일일히 찍어가면서 수정안해도된다.