VSCode 기능 소개

👉VSCode 기능 소개

안녕하세요 TriplexLab 입니다.
이번 시간에는 VSCode에서 유용하게 자주사용하는 TIP들을 정리해 봤습니다.😃😃

👉vscode 툴팁

useState를 만들려면 이런식으로 하단의 이미지 처럼 5번줄에 'useS'까지만 입력을 해주면 하단에 작은 창이 뜨는데 이런걸 툴팁이라고하는데요 왼쪽에는 'useState'라고 나와있고, 오른쪽에는 'react'라고 나와 있네요

vscode 툴팁 자동완성

VSCode에는 내가 입력한 코드의 바탕으로 완성할 단어를 추천해줍니다.
왼쪽에는 단어를 보여주고 오르쪽에는 import할 경로를 보여줍니다.
경로가 없는것은 그냥 단어만 완성해줍니다.

vscode 툴팁 자동완성

첫번째꺼는 선택해서 Enter를 누르면 자동으로 위쪽에는 useState를 import 해주는것이 생기고 하단에는 useState라는 단어가 완성됩니다.

vscode 툴팁 시간차를 두어 뜨게 하는 방법👇👇

vscode로 작업하다 보면 특정 속성에 마우스를 가져가 수정할하면 툴팁설명이 떠서 화면을 가립니다.😖🤯😡

시간차를 두어 뜨게 하는 방법에 대해 알아보겠습니다.

Settings 에 들어가서 
Editor> Hover : Delay를 검색해 줍니다.
아마 기본값이 300ms로 되어 있을겁니다. 0.3초라는 뜻입니다...
저는 1500ms로 변경 해 주었습니다.

👉반복되는 함수명, 변수명 한번에 수정기

여러군데 컴포넌트를 파일로 나누다보면 나중에 변수명이나, 함수명을 함꺼번에 변경해줘야 하는 상황이 생겨서 귀찮을때가 있습니다.
그때 사용하면 좋습니다.

하단에 예시를 보면 utils.js 파일에서 random이라는 함수를 만들어서 App.js에서 사용하고 있다고 가정하고
random함수명으로 getRandomNumber라는 함수명으로 바꿔어줘야 할때
random이라는 이름에 텍스트 커서를 옮겨놓고 f2 키를 누르면 아래와 같이 툴팁이 뜹니다. 여기서 이름을 바꾸면 Enter를 누르면 함수
이름이 바뀝니다.

f2 단축키로 이름을 변경

그리고 이 함수를 사용한 App.js에서도 잘 바뀐것을 확인 할수 있습니다.

f2 단축키로 이름을 변경

변수나, 함수가 사용한 곳을 찾아서 VScode가 알아서 변경을 해준것 입니다.

👉멀티 커서 선택하기

텍스트 커서를 단어로 옮겨 놓으면 해당하는 변수나 함수가 하이라이팅되고,
텍스트를 선택하면 대소문자 구분없이 같은 단어가 하이라이팅되는데요.
이 상태에서 멀티 커서 선택을 하면 여러 군데를 한 번에 수정할 수 있습니다.

맥

.    Cmd + Shift + L

윈도우.    Ctrl + Shift + L

 

👉직접 멀티 커서 만들기

원하는 위치에 텍스트 커서를 만들 수 있습니다.

맥

.    Option + 클릭

윈도우.    Alt + 클릭