브라켓(Brackets) 웹에디터 설치해두면 유용한 추천 플러그인 모음

열심히 브라켓 (Brackets) 으로 웹코딩을 배우고 있습니다. 아직까지는 쉬운 부분만 나와서 그런지 이해를 못하고 있는건 없습니다. 그리고 직접 태그 요소들을 하나하나 배워가면서 작성하고, 그 결과값을 확인하는 재미가 무척이나 쏠쏠합니다. 과연 이 재미가 언제까지 지속될지는 저도 모르겠지만, 확실한건 이해할때까지 무조건 배운다는 마음입니다.

 

브라켓을 이용하면 여러가지 추천 플러그인이 많은데, 그 중에서 제가 사용하는 플러그인을 좀 나열해 보려고 합니다. 나중에 저도 까먹을수도 있으니 일종의 백업용이죠. 설치하면 정말 유용한 기능을 가진 것들이므로 이제 막 브라켓을 이용하시는 분들에게는 강추하는 부분입니다.

 

현재 저의 브라켓 설치 플러그인 정보 입니다. 위에서부터 하나하나 어떤 기능을 갖고 있는 플러그인인지 설명드리겠습니다.

 

TIP

 

 

만약 설치가 되지 않는 플러그인이 있다면 억지로 설치하려 하지 마시고 그냥 삭제헤 주시기 바랍니다. 브라켓 전체적으로 프로그램 오류가 생겨서 실행이 되지 않는 문제가 발생하기도 합니다.

 

 

Beautify : 코드를 보기 좋게 자동 정리해 줍니다. 단축키는 Ctrl + Shift + L 입니다.

Emmet : 코딩을 한층 더 빠르게 해줍니다. 예를 들어서 <div></div> 라고 입력을 했으면 div 요소 사이에서 엔터를 입력하면 자동으로 </div>가 한줄 더 아래로 내려가고 그 사이에 알아서 들여쓰기 공간이 만들어 집니다. 브라켓 필수 플러그인 중 하나입니다.

HTML Templates, Updated : HTML 버전별로 기본 세팅을 해줍니다. 새 문서를 만드시고 편집 > HTML Templates 로 가시면 됩니다.

Interactive Linter : 현재 코딩에서 오류가 있는 부분을 느낌표로 알려줍니다. 확실히 있으면 실수한 부분이 어딘지 알 수 있어서 처음 코딩을 하시는 분들이라면 꼭 필요한 플러그인 입니다.

HTMLHint : 위의 Interactive Linter와 비슷한 기능을 갖고 있는 플러그인 입니다. HTML 구조상 문제, 혹은 꼭 마크업해야 하는 부분에 빠진 곳 등등을 맨 밑에 공간이 생성되며 그곳에 에러메세지로 알려줍니다. Interactive Linter 플러그인이 설치가 되지 않는다면 이것으로 설치하시면 됩니다.

Custom Work : 웹문서별로 탭을 만들어 줍니다. 브라켓 기본 화면은 왼쪽에 파일명으로 나열되는게 전부여서 문서 이동 시 불편함이 있는데, 이 플러그인을 설치하면 이 불편함이 어느정도 해소됩니다.

Color Highlighter : 색상 요소의 색을 미리 볼 수 있습니다. 가령 16진수 색상의 경우 해당 컬러가 요소를 감싸고 있습니다. (버그 좀 있는 듯)

Brackets Icons : 현재 브라켓에서 작업중인 웹문서에 대한 아이콘을 시각적으로 표시해 줍니다. 예를 들어서 HTML 문서는 <> 으로, CSS 문서는 # 으로, 스크립트 문서는 {} 으로 표시됩니다.

 

Stripper : 개인적으로 사용하고 있는 브라켓 테마 입니다. 어두운 테마이며, 스타일은 위의 스크린샷 이미지를 참고하시기 바랍니다.

 

저는 이 정도로 플러그인을 설치해서 사용하고 있습니다. 더 많은 플러그인이 있지만, 너무 많으면 오히려 좋지 않을 것 같아서 지금은 이 정도만 사용하는데 전혀 불편함 없이 사용 중 입니다. 혹시 이 글을 보신 분 중에서 좋은 플러그인을 알고 계신다면 댓글로 알려주세요! 저도 한번 사용해 보겠습니다.

 

브라켓 플러그인 TOP 101

Top 101 Brackets Extensions for Web Developers — TutorialBrain

 

플러그인을 설치하는 방법은 아래의 관련글에 있습니다. 살펴보시고 그대로 따라하시면 될 것 같습니다. 그리고 브라켓 플러그인에서 검색이 안 되는 경우는 위의 TOP 100 페이지에 가셔서 수동으로 다운로드 받으시고 설치하시면 됩니다. 끝.