이거 왜 안써? JetBrains사의 Live Template
IntelliJ, WebStorm, PhpStrom 등등…
어느날 책을 보면서 공부하다가 VsCode의 Snipet에선 복잡하게 돌아가는걸 발견했다…!!
그래서 웹스톰(인텔리제이도 됨)에서는 그런기능이 없을까 찾아보다보니.. Live Template이란 것을 발견했다.
자 결론을 좋아하는 한국인들을 위해 사진 투척
파일이름: test.js 일때 z를 치고 엔터를 치면
파일이름: I_Love_youSoMuchS2.js 일때 z를 치고 엔터를 치면
추가로 한글 명령어도 가능하다 왜냐? 내가 추가해놨으니까^^
리액트 라고 치고 엔터를 치면
뿅! 기본 틀이 완성된다
한글은 바로 추가툴팁이 뜨지는 않지만 잘 작동한다.
[ How? ]
우리는 단축키를 사랑하는 민족이니까 나만 따라오시라. 대신 윈도우 기준으로 설명하겠다..
맥.. 부러워 갖고싶어..ㅠ 거지라서..
Ctrl + Alt + S를 누르면 Settins 창이 뜬다. 여기에서 Live라고 치고 Live Template을 선택해준다.
우측 상단의 + 버튼을 눌러서 템플릿 그룹을 추가한다. 그냥 자기 이름으로 하자
난 boki로 만들어줬고 5개의 명령어를 추가해줬다.
z를 살펴보면… ㅋ로 할수도 있었지만, 코드를 치는순간 영문이 더 쓰이는 경우가 많을거같아서 z로했다.
우측 상단의 +를 눌러서 이번에는 1번으로 추가를 해준다(그룹 x) Abbreviation에는 명령어를, Description에는 말그대로 설명을 적으면된다. 한글도 상관없다. 근데 명령어는 한글이면 설명툴팁이 안뜬다..
그리고 밑에 Template Text에 코드를 적는다.
코드를 적으면 흰색으로 뜬다.
그럴때는 밑에 Define을 눌러서 어떤 형식의코드인지 알려줘야 한다. 리액트를 할것이기 때문에 나는 JavaScript and TypeScript라고 정했다. 그러면 코드에 색이 입혀지면서 적용되는 것을 알 수 있다.
옆에 Expand With는 이 명령어를 치고 활성화시킬 동작들이다. 나는 탭보다는 엔터가 편해서 엔터로 전부 다 설정했다. Default는 Tab이다.
추가로 변수를 알아보자 변수는 $ $사이에다가 아무내용이나 적으면 EDIT VARIABLES 버튼이 활성화가 되면서 입력이 가능하다 날짜도 가능하고, 파일명, 확장자를 포함하지 않는 파일명 등등 엄청 다양하다. 추가로 내 스타일 컴포넌트 하나 설정을 알려주고 글을 마칠까한다..
import React from "react";
import styled from "styled-components";
const $FILENAME$Block = styled.div``;
const $FILENAME$ = () => {
return <$FILENAME$Block></$FILENAME$Block>;
};
export default $FILENAME$;
이 명령어를 스컴 이라고 등록했다. 스타일드 컴포넌트의 줄임말이다. $$뒤에 변수명이 와도 상관없다. 어차피 텍스트로 인식될거니깐(여기는 셋팅환경 안이다)
스컴의 결과
겁나 긴 파일이름명을 따라서 만들어진것을 볼 수 있다!