[아톰(Atom)/패키지] Snippets(템플릿, 자주쓰는 코드 만들기)

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

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

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

http://recoveryman.tistory.com/39

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

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

그래서 제가 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으로 활용하는 방법을 댓글로 모블님이 알려주셔서 바로 적용하였습니다.

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