WebStorm - Console.log(변수) 자동완성 라이브 템플릿 만들기

JavaScript로 코딩을 하다보면 적잖이 console.log()를 사용하게 된다.
 

보통 나는 간단하게 현재 흐름상 위치를 잡거나 객체를 확인할 때 자주 쓰는데,
많은 글자는 아니지만 그래도 같은걸 계속해서 타이핑하는게 귀찮아서 만들었다.
 

축약어는 console.log의 앞글자를 따서 cl로 단축 명령어를 만들었고,
cl 단축어 입력 후 tab을 누르면 해당 WebStorm의 live template이 실행된다.  

간단하게 다음과 같은 역할을 수행된다.

1. console.log()를 입력
2. 괄호 안에 변수명을 타이핑할 수 있도록 커서 위치 이동
3. 변수명을 쓰면 따옴표 안에 동일한 변수가 들어가도록 설정

즉 console.log("변수 = ", 변수) 이러한 결과물을 만들어내고
터미널에는 아래와 같이 출력된다.(version 1)
 

1

변수 = 123

변수명을 타이핑한 후 tab키를 한번 더 누르면 따옴표 안의 왼쪽 설명쪽 변수로 커서가 이동한다.
그럼 상황에 맞게
 

1
2

console.log("변수의 위치는 service.ts의 signUp 함수 중' = ", 변수)
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ // 추가설명 입력

뭐 이런식의 추가입력으로 사용할 수 있다.  

만약 위에서 언급된 추가입력 부분을 자주 쓴다면 이 역시 WebStorm의 기능으로 템플릿 처리할 수가 있다.(version 2)  

처음에는 변수를 셀렉트하고 감싸진 부분을 감지해서 사용하도록 surround templet으로 만들었었다.
 

그런데 어차피 몇 글자만 넣어도 자동으로 나머지 변수명이 팝업으로 뜨는 IDE 특성상,
그냥 입력하는게 더 편해서 다시 간단하게 만들었고 써보니 너무 편하다.
 

결과물 예시

version 1

version 2

WebStrom Live Templates 추가 방법

console.log Version 1

우선 WebStorm / Settings… (환경설정)에 진입한다.
그리고 메뉴 중 Live Templates 선택 (스샷 1번)
이어서 템플릿 추가 버튼(스샷 2번)을 누르면 위 스샷과 동일한 화면을 볼 수 있다.
 

스샷 4번에서 사용하기 편한 단축어를 설정한다. 이 단축어를 타이핑하면 팝업창에서 나타나게 된다.
그리고 스샷의 붉은 박스안과 같이 입력한다. (selector, variable과 같은 변수명은 아무거나 다른걸로 써도 무방)
이후, 스샷3번의 Edit Variables…를 클릭하면 아래와 같은 화면이 나타난다.
 

 

여기서 변수의 순서를 설정할 수 있는데, 이는 live template 실행 후 커서의 이동 순서를 나타낸다.
두번째 변수인 selector안에는 첫번째 변수의 내용이 그대로 들어감으로 첫번째 변수명을 써주면 복사효과(?)처럼 사용된다.
 

끝으로 스샷 5번 자리를 보면 아마 처음에 define... 와 같은 이름으로 되어있다. 클릭시 아래와 같은 창이 뜨는데, 이 단축어를 실행할 파일 종류를 선택할 수 있다.
 
 

console.log니까 javascript/typescript를 선택해주면 된다.
 

console.log Version 2

서두에 언급했던 변수의 설명부분을 템플릿화 하고 싶다면 아래와 같이 진행.
 

settings의 live templates에서 template test 박스안에 아래와 같이 입력
 

1

console.log('🔥🔥$FILE$/$FUNCTION$ :$LINE$ - $SELECTOR$ = ', $VARIABLE$)

그리고 위와 같이 변수를 설정한다.