[브라켓(Brackets)/확장 기능] Brackets Snippets (템플릿 을 만들어 보자)

이건 서브라임에서도 '스니펫' 이라는 패키지로 소개했던적 있습니다.

이와 같은 기능을 하는... 이름도 똑같으니 당연히 기능도 같겠네요ㅋ;

아무튼 다시...

Snippet은 네이버 영어사전 결과 '(작은) 정보, 한 토막' 을 나타냅니다.

이 확장 기능은 내가 자주 사용하는 뭔가를 탭(Tab key)으로 쉽게 그 토막을 꺼내서 사용한다고 생각하시면 됩니다.

쉽게 말해서 이런거죠. (이건 브라켓에 기본적으로 있는 html:5 + tab 입니다.)

이 포스팅에서는

자주 쓰는 템플릿을 자신의 입맛대로 설정할 수 있게

예를들면.... 리셋 css(reset css) 라던가 이런걸로 만들어 볼까 해요.

저런 템플릿도 얼마든지 가능합니다. 그냥 모든게 다 가능 합니다.

속성으로 사용법만 간단하게 적을까 하다가.

제가 어떻게 이걸 이런식으로 사용하게 됐는지 포스팅 합니다.

지루하더라도 끝까지 읽어주신다면

이 에디터를 진짜 본인 마음대로 사용하시리라 생각듭니다.

내용이 귀찮으시면 아래에 '만들어 봅시다.' 부터 읽으시면 됩니다.

설치.

brackets snippets 으로 검색

검색후 맨 아래에 있습니다

설치는 언제나 참 쉽습니다.

하지만 이기능은 서브라임 만큼 사용법이 단순한건 아닌거 같습니다. ㅠㅠ

추가 정보를 눌러봐도 뭐가 뭔지 모르겠어요. (영어 진짜... 하아...)

몸으로 때워가면서 익힌걸 보여 드리겠습니다. ㅋㅋ;;

사용법.

일단 설치를 하게되면 아래와 같이 우측에 'S' 라는 아이콘이 생성이 됩니다.

클릭해 보면 저렇게 창이 뜹니다.

이것들을 잘 보게되면...

맨 먼저 Trigger(트리거)라인을 눈여겨 봅시다.

오호... 저거..

서브라임에서 블라블라 탭 하면 됬던 바로 그 트리거 라는 녀석이네요?

그리고 오른편을 보시면 Source(소스)라는게 있네요!

그럼. 간단하게 트리거 에 있는 키워드를 입력하면 소스에 있는 파일을 불러서 사용하게 된다! 라는것 입니다.

한번 설치후에 해보시면 저 아래 있는 키워드가

전부 정상 동작 합니다. 단.. 삽입시 넣어주게 되는 키는 탭이 아니라

컨트롤 + 알트 + 스페이스 입니다. (바꿔줄 꺼예요 이건 너무 많이 눌러야 해요.)

html5 입력후 컨트롤 + 알트 + 스페이스

근데 잘 보면 그 소스파일은 json(javascript object notation)파일로 생성해야 하네요!

왜냐하면...

그냥 단순하게 아래로 쭉 json 파일로 되어있어서 라는 이유 입니다. ㅠㅠ;

(몸으로 때워가며 익힌 한계 입니다..)

그러면은 본격적으로 해부해 보도록 합시다.

뭐찌됐건 저찌됐건... html.json 이거 한번 클릭해 봅시다.

그랬더니 화면에 '이건 이렇게 되어있어!' 라고 떠요.

그리고 좌측에 html.json 이 있습니다.

하지만.. 이녀석의 위치를 알려고

셋팅을 눌러봐도 경로는 안나와요.

하지만... 맨 위에 저 스샷창에서! 저기 경로 보이시죠? 

저렇게 찾아가도 되지만 너무 길어서 그냥...

이렇게 하시면 순식간에

뙇! 하고 열리네요!

근데...

저기에 잘 보면

저렇게 많은 트리거들이 있는데 html.json, javascript.json 에다가 다 들어가 있네요?

왜일까 고민하다가 에디터 창을 봤습니다.

오호라... 저걸 쓸려면 xxx.snippet 파일을 만들어야 하는구만!

name = 이건 이 토막의 이름 을 뜻하고,

trigger = 이건 이 토막을 가져오려면 'xxx'를 입력해야 하고,

usage = 이건 이 토막의 용도를 말하는 것이고,

description = 이건 이 토막이 뭔지 알려주는 설명문 이고,

template = 이건 이 토막이 어디 위치에 있는지

자 그럼... 굵게 표시된게 중요한거 아닌가 생각이 들었습니다.

저거만 알면 사용할 수 있는거네 ㅎㅎㅋ!

그럼 xxx.snippet 는 어디에 있을까? 고민하다가.

해답은 언제나 곁에 있는 법이죠 ㅎ.

드래그 하면

저렇게 xxx.snippets 의 구성을 알 수 있습니다.

저 구성을 잘 보시면..

!!{cursor}

라는게 있는데..

저건 자동적으로 커서를 저 위치에 위치시켜 줍니다.

그러면

우리가 직접 한번 만들어 보겠습니다.

----------------------------------------------------------------------

만들어 봅시다.

저는 경로는 C 드라이브의 brackets 라는 폴더를 만들었습니다.

그 폴더안에 snippets 라는 폴더를 하나 더 만들어 뒀습니다.

그리고 단축 설정은 쉬프트(Shift)키 와 스페이스(Space)키 로 바꿨습니다.

컨트롤 + 스페이스는 안되더라구요; 걍 탭도 안됬던거로 기억합니다.

스니펫 이라는 폴더가 없으면 읽어오질 못하는것 같습니다.

폴더를 이렇게 만들었습니다. 라고 적어두면 잘 모르겠습니다. 하시는 분들이 있으셔서

gif를 첨부했습니다.

그리고 원활하게 작업하기 위해 

brackets 폴더를 통째로 드래그 해줍니다.

빈공간에 오른쪽 클릭 하셔서 파일 만들기를 눌러 줍니다.

제가 해볼것은 아까 말씀드렸던 리셋 css 를 템플릿화 시키려고 합니다.

저는 이렇게 마크업 한뒤 저장하였습니다.

(저장 단축키 : 컨트롤 + S )

테스트 용이라 간단하게 마크업 했습니다.

세이브 합니다.

(저장 단축키 : 컨트롤 + S)

여기서 세이브를 한번 더 눌러 줍시다.

해주면...프로그램을 스스로 재시작 합니다.

이제... 확인을 한번 해봅시다.

다들 이렇게 뜨셨으리라 생각 됩니다.

저는 css 폴더를 하나 만들어서 css 파일을 하나 생성한 뒤에 기능을 한번 써보겠습니다.

그 결과는 아래와 같습니다.

※ 스니펫에 새로운 스니펫 이나 JSON 을 추가했다면 반드시 새로 저장해야 합니다.

이 저장 이라는게 컨트롤 + S 를 말하는게 아니라 그런 템플릿을 입력후 저장 은 당연하지만 제가 말하는건 그게 아니라

에디터의 우측에 'S' 아이콘 눌러서 SAVE 버튼을 한번 더 눌러주시면 됩니다.

여기까지가 브라켓 셋팅 기본 부분이라 생각됩니다.

저는 굳이 스니펫이 아니더라도

꼭 템플릿을 만들 수 있어야 진짜 에디터 라고 생각하고 있습니다.

템플릿을 만드는건 정말 중요 합니다.

브라켓이 이런게 안됬다면 전 사용 안했을 꺼예요.

다음 브라켓 포스팅 부터는

굳이 안깔아도 되지만 깔아두면 좋은 확장 기능을 가지고 오겠습니다.

근데 그게 다른 사람한테는 엄청나게 유용할 수 있으니까요ㅎㅎ