[서브라임텍스트(SubLimeText)] Snippet 제대로 사용하기

제대로 까진 아니지만 예전 포스팅에 한두가지 빠진 부분이 있어서 그걸 보충하려 합니다.

최근에야 Snippet을 알아서 자주 사용하는 javascript함수등도 이런식으로 응용하면 더 괜찮아 질꺼 같아서 포스팅 합니다.

서브라임 Snippet (템플릿 만들기)

http://recoveryman.tistory.com/39

▲ 위의 링크에서 템플릿을 저장할 때 맥이라면 확장자를 XXXX.sublime-snippet 을 붙혀야 합니다.

윈도우의 경우엔 그런거 없이 이름만 작성해서 세이브 하면 되요.

이런 방법으로 Snippet를 사용하실꺼라 생각됩니다. 하지만 커서를 내가 원하는 위치에 처음 시작부터 넣을 수 있다면 어떨까요?

또는 탭 만으로 그다음에 넣어줄 문장을 입력할 수 있다면..

오늘은 그 방법을 제가 알아낸 범위 까지 포스팅 하려 합니다.

아래 스샷을 봐주세요.

예를 들어 이런 마크업을 한뒤 저장을 하게 되면..

커서는 </html> 끝 부분으로 오게 됩니다.

하지만 템플릿을 만든 후 body 사이에 커서를 미리 위치 시키고 싶다 생각하면

body 사이에 $1 을 넣어줍니다. 아래 사진을 보세요.

그 후에 탭트리거에 있는 키워드를 탭해보면

커서가 body 사이에 정확히 들어간걸 확인할 수 있습니다.

이렇게

$1, $2, $3...

의 순서대로 탭할 위치의 커서를 순서대로 지정할 수 있습니다.

그러면 $0 는 안되느냐? $0 도 탭으로 커서를 옮겨놓기 가능합니다.

그러나 순번이 가장 마지막이 됩니다. $1, $2, $3.... 을 다 지나서 마지막에 $0 을 입력한 부분에 커서가 갑니다.

그러면 타이틀과 타이틀 사이에 있는 Document를 지우지 않고 드래그 한 상태로 잡혀져 있게 만들 수 있느냐?

그것도 됩니다. 아래의 스샷을 보시기 바랍니다.

이렇게 한 뒤 템플릿을 실행시켜 보면

순번이 1인 타이틀 부분을 먼저 읽는데 다만...

Document 라는 글씨를 드래그로 묶어져 있는 상태로 보이게 됩니다. 그 후 탭하면 body 사이에 있는 $2 쪽으로 이동하게 되죠.

이걸 응용해서 아래 코드를 예측해 봅니다.

Test: ${3:Nested ${4:Placeholder}}

테스트 라는 글자 다음으로 3번째 탭 부분이 있는데 그 세번째 안에 4번이 있습니다.

이건

3번째로 탭 한 순간 Nested Placeholder 라는 문자 전체를 잡습니다.

4번째로 탭 한 순간 Nested Placeholder 문자 중 Placeholder를 다시 잡습니다.

또 다른 기능 하나가 더 있긴 한데

실험해 보니 그닥 슬모있는 기능은 아닌것 같아서 내용은 뺍니다.

Original: ${3:Hey, Joe!}

모든 항목을 = 으로 바꾸기 g: ${3/./=/g}

대문자와 소문자를 구별하지 않는 정규 표현. i: ${3/./=/i}

문자열에 줄 바꿈을 무시하지 마십시오 m: ${3/./=/m}