라이브 템플릿 설정으로 자주 쓰는 코드 쉽게 소환하기

웹스톰과 인텔리제이에서는 라이브템플릿이란 기능으로 쉽게 자주 쓰는 코드를 불러 올 수 있다.

 

라이브 템플릿을 설정하기 위해, 먼저 Settings로 들어가자.

 

Settings에서 Live Template으로 들어가서, 예시로 Vue에서 쓸 라이브템플릿을 만들어 보겠다. 

 

필자는 팝업 만들기 작업을 많이 하는 관계로, 팝업의 기본 템플릿을 만드는 라이브템플릿을 만들어본다. 

먼저 오른쪽의 + 버튼을 눌러서 나오는 Live Template을 클릭하자.

 

그런 다음 나오는 화면에서 아래와 같이 vpop이란 이름으로 라이브템플릿 이름을 입력해주고

템플릿 텍스트도 입력해준다.

템플릿 텍스트 코드에 있는 $vpop는 변수명이 들어갈 자리다.

 

그런 다음, 오른쪽의 EDIT VARIABLES 버튼을 눌러서 설정해준다.

 

이 설정을 마친 다음, change 버튼을 눌러서 설정해줘야 라이브템플릿을 쓸 수 있다.

즉, 이 설정을 하지 않으면 라이브템플릿을 쓸 수 없다. 

 

여기까지 설정을 마치면 라이브템플릿을 쓸 수 있다.