728x90
반응형


아톰은 Snippet 가 기본으로 깔려 있습니다.

스니펫을 어떨때 쓰는지 아래 링크를 확인해보시기 바랍니다.


서브라임 텍스트 에서 Snippet 사용하기


템플릿이나 자주쓰는 코드를 만들때 사용합니다.

자주쓰는 거라면 글자 몇개 입력해서 한방에 해결하는게 편합니다.

그래서 제가 Snippet기능이 있는 에디터를 사용하는 이유입니다.



Snippet 사용


우선 각 언어에 맞게 랭귀지 파일이 설치되어 있는지 확인해야 됩니다.

이유는 Snippets 입력하는 부분에 랭귀지 파일의 Scope 를 입력하지 않으면 사용을 못합니다.


우선 html 을 템플릿화 시켜볼려고 합니다.

이 언어의 Scope 가 뭔지 확인해야 되기 때문에 패키지 설치를 들어갑니다.

윈도우의 경우엔 컨트롤 + 쉬프트 + P. 맥의 경우엔 커맨드 + 쉬프트 + P 입력후 install packages 입력



검색창에 html language 를 입력후 엔터를 입력합니다. 그러면 해당 언어가 이미 깔려져 있는걸 확인할 수 있습니다.

여기서 Settings 를 눌러 봅니다.



Scope 에 있는 text.html.basic 을 복사해 둡니다. 만약에 자바스크립트 나 css 를 템플릿화 하려고 하면 거기에 해당하는 랭귀지를 검색하셔서 저렇게 복사하셔야 합니다.




이제 본격적으로 Snippet을 다뤄봅시다.




윈도우의 경우 좌측 상단의 메뉴에서 File -> Snippets... 를 선택



맥의 경우 Atom -> Snippets...을 선택



이렇게 하게되면 아래 스샷과 같은 화면이 출력됩니다.

저 중간쯤에 있는 부분이 사용하는 소스 인듯 합니다. 그러면 한번 작성해 보도록 하겠습니다.



저는 이렇게 한번 해봤습니다. 라인별로 설명은 이 스샷 아랫부분에 적겠습니다.


15번 라인 : 아까 html language 에서 긁어온 Scope 를 입력 (앞에 온점(.)을 반드시 붙혀야 합니다.)

16번 라인 : 해당 Snippet의 설명

17번 라인 : 키워드(여기에 적힌 키워드를 입력시 body'' 사이에 있는 내용을 출력)

18~31번 라인 : 불러와야할 코드를 입력




이렇게 해놓고 html 파일에서 방금 만든 이걸 사용해 보겠습니다. html만 입력했는데도 아래 우리가 만든 이게 뜨는걸 알 수 있습니다.

이건 html 파일에서만 이런 snippet를 쓸 수 있습니다. (이 부분 서브라임 한테서 좀 많이 배워야 겠네요. 파일 Scope를 입력해야 snippet을 사용할 수 있다니...)

아톰의 Snippet은 Tab 키로 사용하는게 아니라 Enter키를 써야 합니다. 슬슬 서브라임 하고 비교가 됩니다. ㅠㅠ




실행해 보겠습니다. 그랬더니 아주 실망스런 결과를 보여줍니다.

이제 이쯤되면 누가 이기나 한번 해보자는거 같습니다.



이스케이프 문자를 썻습니다.

역슬래시 + n : 줄바꿈

역슬래시 + t : 한칸 공백

한칸 공백을 두개 쓴 이유는 뭔가 들여쓰기가 한칸만 되어있을 경우 뭔가 답답해서 입니다.



쬐끔 만족스러운데 자세히 보니 한칸씩 뭔가 알 수 없는 공백이 있는거 같아 보입니다.

1번 라인의 '<' 이것과 2번 라인의 '<' 이게 같은 위치에 위치해 있지 않습니다.

아... 진짜 별롭니다. 이런 작은 부분... 서브라임좀 본받았으면 좋겠습니다. 하지만 이걸 해결해 보겠습니다.



아예 싹 한줄로 처리 했습니다. 한줄로 처리하는 내내 고생했습니다. 자동 줄바꿈이 안됩니다.

여튼 실행해 보겠습니다.



이제야 만족스러운 결과물이 나왔습니다.

그래도 브라켓 보다 쉬웠으니 이 부분은 맘에 듭니다.



-------------------------------------------------------- 160718 추가된 내용 --------------------------------------------------------


\t(역슬러시t), \n(역슬러시n)등을 안쓰고 줄바꿈 코드를 snippet으로 활용하는 방법을 댓글로 모블님이 알려주셔서 바로 적용하였습니다.

실제로 잘 되기에 해당하는 부분을 스크린샷 찍어서 올립니다.



반응형

댓글 9

  • 모블 (2016.07.18 17:48)

    body부분에 '내용' 보단 """내용"""이렇게 사용하면 줄바꿈 따로 해줄 필요없습니다.

    • 회복맨 (2016.07.18 18:19 신고)

      우아! 감사합니다!!
      방금 테스트 해봤는데 정말 잘 됩니다! 오오

  • 나그네 (2016.11.20 14:37)

    xhtml과 html5 템플릿 두개를 등록하고 싶은데 생각대로 잘 안되네요 혹시 하나말고 두개는 등록이 안되는건가요?

    • 회복맨 (2016.11.20 14:46 신고)

      다수의 스니펫을 등록할 수 있습니다.
      또 앞서 설명해 드린것과 같이 사용하려는 랭귀지의 Scope를 반드시 확인하셔야 합니다.
      또 prefix를 반드시 다르게 설정해 주셔야 합니다.
      앞선 예제에선 htmlko 로 로 입력을 하였지만 이걸 뭐... xhtmlko 등으로 기존의 기본 스니펫과 겹쳐지지 않을 선에서 이름을 정해 주셔야 합니다.

      방문해 주셔서 감사합니다. ^^

    • 나그네 (2016.11.20 22:37)

      html을 다중으로 할시는 예시와 같이하면 되더군요!

      # Both snippets will be loaded
      '.source.js':
      'console.log':
      'prefix': 'log'
      'body': 'console.log(${1:"crash"});$2'
      'console.error':
      'prefix': 'error'
      'body': 'console.error(${1:"crash"});$2'

      scope는 다시쓰지않고 쓰면 된다고 안내를 해서 겨우겨우했네요 ㅎㅎㅎ 감사합니다!

  • daziy (2017.02.28 23:14)

    초보인데요. snippets에 다 입력후 기본 마크업이 나타나게 할려면 새창 열어 html치고 엔터하면 되나요?

    • 회복맨 (2017.02.28 23:20 신고)

      방문해 주셔서 감사합니다 ^^
      우선 기본 마크업이 나오게 하려면
      ! + 탭
      또는
      html:5 + 탭
      하시면 HTML5 구조가 자동으로 나옵니다.

      Snippets 를 굳이 하지 않아도 이러한 부분은 여러 에디터에서 사용 가능합니다~

  • 시민 (2017.05.18 14:12)

    제가 딱 찾고있던 정보에요ㅜㅜ 감사합니당!!! 근데 살짝 아쉬운게...엔터를 쳤는데 커서위치가 왜 </html>끝에 가있을까요ㅜㅜ 커서 위치를 자동으로 title로 가게 할 수는 없을까요..?

    • 회복맨 (2017.05.21 21:22 신고)

      실험은 안해봤지만 아마...
      ${1:대체문구}
      ${2:대체문구}
      .....
      이런식으로 이런 부분을 중간중간 삽입해 보시면 어떨까 합니다.

      이 부분은 서브라임텍스트 에서 사용하는 Snippet 셋팅방법중 하나 입니다.

      방문해 주셔서 감사합니다 :)