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

에디터/브라켓 에디터(Brackets editor) 2015.11.02 00:01

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

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


아무튼 다시...

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 버튼을 한번 더 눌러주시면 됩니다.


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

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

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

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

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



다음 브라켓 포스팅 부터는

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

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

댓글 16

  • ^^ (2015.12.10 15:16 신고)

    저는 왜 Shift-Space 키가 안먹힐까요 ㅠㅠ

    • 회복맨 (2015.12.10 16:15 신고)

      몇가지 경우의 수를 생각해봤습니다.
      우선 스샷에 나와있는 데로
      첫번째는, '내가만든_임의의_폴더' 아래에 'snippets' 라는 폴더가 있는지,
      두번째는, json 파일이 '내가만든_임의의_폴더' 에 있는지,
      세번째는, snippet 파일이 snippets 폴더에 있는지

      체크를 해보셔야 할꺼 같습니다.
      음... 어떠한 환경에서 테스트를 하는지 모르겠으니 ㅠㅠ 생각나는걸 적어봅니다.

  • ss (2016.06.16 00:51 신고)

    브라켓으로 스니펫 다룬 포스팅 거의 없던데 이렇게 잘 설명해주셔서 감사해요
    도움도 많이 됐고 잘 이해했습니다~~!!!

    • 회복맨 (2016.06.16 01:00 신고)

      방문해 주셔서 감사합니다 ㅎㅎ
      브라켓 스니펫 알아보시던 중이셨군요!
      저도 유용하게 쓰는 기능 중 하나라 잊지 않으려 이렇게 포스팅 하게 되었습니다

  • (2016.07.15 14:34)

    비밀댓글입니다

    • 회복맨 (2016.07.15 17:04 신고)

      프로그램을 종료 후 재 실행 시키거나, 컴퓨터를 재부팅 해보시겠어요?

      프로그램 종료할 때 왼쪽 상단의 빨간 버튼으로 종료하지 마시고, 단축키 cmd+q 로 종료하시고 재실행 시켜주세여

  • rainman (2017.03.29 14:22 신고)

    브라켓을 사용한지 얼마안된 초보자입니다.
    자바스크립트의 function을 스니펫을 이용해서 템플릿을 만들려고 하는데, 너무 어렵네요. ^^
    이것도 포스팅 해 주실 수 있을까요?
    님께서 해주신 포스팅으로 여러가지 많은 도움이 되고 있습니다. 감사합니다. *^^*

  • 지브로 (2017.08.16 02:28 신고)

    와..감사합니다^^

  • 최재욱 (2018.06.02 13:51 신고)

    덕분에 좋은 기능 잘 배워 갑니다 감사합니다!

  • yum (2018.08.13 10:54 신고)

    안녕하세요
    오늘 brackets 사용을 위해 이것저것 깔아서 쓰구 있는데 포스팅 대루
    brackets snippets 을 설치하는데
    확장기능 에러라고 뜨는건 왜 그런가요?
    그리구 저 s 아이콘도 안떠요 ㅠㅠㅠㅠ

    • 회복맨 (2018.08.13 11:10 신고)

      snippets 플러그인이 제대로 설치가 되지 않아서 S 아이콘이 안뜨는것 같습니다.

      오류 발생시 프로그램을 종료 후 재시작 또는 컴퓨터를 재부팅 하신후 시도해 보시기 바랍니다.

      그래도 해결이 안될 시 프로그램을 삭제 후 재설치를 추천드립니다.

      현재 저는 이 브라켓 에디터를 사용하고 있지 않습니다.
      방문해 주신 분께는 정말 죄송하지만 이렇게 오류가 쇄도하는 에디터는 저 사용하기가 너무 불편하더라구요.
      다른 좋은 에디터 들이 많아서 차라리 다른 에디터를 권유드립니다.

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

    • yum (2018.08.13 13:57 신고)

      아- 그렇군요!! 감사합니다. 오류가 많은것도 몰랐네요.
      염치없지만 혹 추천해 주실수 있는 것이 있으면 한가지 알려주실수 있으신가요?ㅠ

    • 회복맨 (2018.08.13 14:02 신고)

      무료 에디터로는
      vscode (비주얼 스튜디오 코드) 를 추천합니다.
      비주얼 스튜디오 와 비주얼 스튜디오 코드는 전혀 다른 프로그램이니까 검색 시 vscode 로 검색하셔서 설치하시는걸 추천드립니다.

      돈을 내고 사용하는 에디터라면 웹스톰(webstorm) 이 최고 입니다. 회사 또는 개인의 여건이 충분히 만족이 될 때 이 에디터를 권장해 드리고 있습니다.


      브라켓 이제 더는 사용 안하셔도 됩니다! 안해야 될꺼 같습니다 ;;

    • yum (2018.08.13 15:32 신고)

      감사합니다!!!
      정보 정말 감사합니다!!!!
      브라켓 지우고 vscode를 깔아볼게요!!!!!!!!