[vscode extension] Turbo Console Log 사용하기(feat. 키바인딩)

코딩하면서 가장~~ 필요하지만 가장~~~~ 귀찮은 과정 디버깅..

console.log를 하나하나 찍어가며 테스트 하기 번거로웠는가!?!?

 

vscode 내장 스니펫에 console.log() 를 저장하여 단축키를 사용 했는가?!

 

이제 더이상 그럴 필요 없다.

내가 원하는 변수, 아름 답게 console.log로 찍어보자.

 

확장프로그램으로 가서 

Turbo Console Log를 설치해준다

 

설명을 보면, 원하는 변수를 호버링 한 뒤에, 

window 의 경우 ctrl + alt + L을,

mac 의 경우 ctrl + option + L을 눌러주면 된다고 한다.

 

근데 아마 window는 안될 거다.

다른 단축키들과 겹쳐있기 때문에

ctrl + alt + L을 눌렀는데 아무 변화가 생기지 않는다면,

단축키를 바꾸어 주어야 한다.

 

 

1. 단축키 변경하기

설정 버튼을 클릭 한 뒤에 확장키보드 바로가기 키 를 선택한다.

그러면 요렇게 몇개의 명령이 나오는데 그중에서 

 

Turbo Console Log:Display Log Message 를 눌러 키바인딩을 변경해주도록 한다.

나는 Shift + alt + L로 변경했다. 

 

(위 캡쳐에 나오지 않는 이유는 내가 이미 변경해버렸기 때문이다.)

 

 

2. Test 하기

이제 아무 변수(함수 내에 들어있는 파라미터도 가능함)를 더블클릭하여 영역을 준 뒤에

단축키를 입력하면 변수선언한 곳의 바로 아랫줄에 다음과 같은 콘솔로그 명령어가 입력된다.

컴포넌트 이름, 몇번쨰 줄인지, 변수 이름이 뭔지 설명해 주고나서 변수를 찍는다.

귀여운 🚀 모양은 덤이다.

 

** console 창에 출력된 모습 **

 

 

-끗-