Sublime Text(서브라임텍스트) - New Snippets

코딩할 때 미리 정의해둔 소스를 사용하여 코딩을 빨리할 수 있습니다. 새로운 Snippets을 만들려면

Tools > New Snippets..

<snippet>
  <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}. <- 사용자 코드 입력
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <!-- <tabTrigger>hello</tabTrigger> -->  <- Ctrl + / 를 입력하여 주석을 없엔다. 
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <!-- <scope>source.js</scope> --> <- Ctrl + / 를 입력하여 주석을 업에고 Javascript 파일이므로 확장자 js
</snippet>

javascript 새파일을 열고 he를 입력하면 저장했던 hellow Snippets목록이 보인다. tab 키를 누르면 오른쪽처럼 실행된다

<snippet>
  <content><![CDATA[
    (function($2{$3}))($1)
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>se:fun</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <!-- <scope>source.python</scope> -->
</snippet>

Ctrl + Shift + S키를 눌러 새이름으로 저장하기를 선택하여 " self-excute.sublime.snippet" 이름으로 저장한다.

Javascript 파일을 선택하여 se를 입력하면 위와 같이 snippets 목록이 나온다. 목록을 선택하고 tab 키를 누르면

커서가 $1 자리에 위치한다. 여기에 코드를 입력하고 다시 tab키를 누르면 $2자리로 커서가 위치하게 된다.

이번에는 html 파일입니다. 

<snippet>
  <content><![CDATA[
<input type="password" size="" maxlength="" />
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>input:pass</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <!-- <scope>source.html</scope> -->
</snippet>

<content></content> 사이에 <![CDATA[<input type="password" size="" maxlength="" />]]> 입력

<tabTrigger></tabTrigger> 사이에  input:pass 입력하고,

Ctrl + Shift + S키를 눌러 새이름으로 저장하기를 선택하여 " input-pass.sublime.snippet" 이름으로 저장한다.

input:pass

실행결과

input type="password" size="" maxlength="" />

다음은 dummy 문자를 사용해보겠습니다.

<snippet>
  <content><![CDATA[
set(set)[set]
1.(특정한 장소위치에) 놓다
2.(특정한 상태에 있게어떤 일이 일어나게) 하다
3.(연극소설영화의) 배경을 설정하다
4.세트, (두 개 이상의 물건으로 된) 한 조(組)
5.(게임 등에 쓰이는 물건들을 함께 모은) 세트
6.(관심사가 비슷하고 자주 어울리는 한 무리의) 사람들
7.위치한, 자리한
8.계획된, 정해진
9.(견해생각이) 고정된
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>dummy</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <!-- <scope>source.html</scope> -->
</snippet>

<tabTrigger>dummy</tabTrigger>  <-- 사이에 dummy를 입력하였으므로

dummy

dummy를 입력하고 tab키를 입력

set(set)[set]
1.(특정한 장소위치에) 놓다
2.(특정한 상태에 있게어떤 일이 일어나게) 하다
3.(연극소설영화의) 배경을 설정하다
4.세트, (두 개 이상의 물건으로 된) 한 조(組)
5.(게임 등에 쓰이는 물건들을 함께 모은) 세트
6.(관심사가 비슷하고 자주 어울리는 한 무리의) 사람들
7.위치한, 자리한
8.계획된, 정해진
9.(견해생각이) 고정된

실행결과입니다. 

snippets 에 대하여 이해가 되셨습니까.