Adobe 브라켓(Brackets) 유용한 플러그인 (plug-in) 추천

안녕하세요.!

오늘은 추천 에디터인 브라켓 ( brackets )의 유용한 플러그인을 추천해드리려고 합니다.!

물론, 각자의 성향에 따라 유용할 수도, 불편할 수도 있으니 이 점 잘 참고하시고 

각자 편하신 것을 사용하시면 될 것 같습니다.!

HTML 편집기 무료 소프트웨어 Adobe Brackets

▼ 아래 텍스트를 클릭하시면 다운로드 및 설치 방법에 대한 페이지로 이동하게 됩니다.

" Adobe Brackets 설치방법 "

일단, 다운로드 받은 Brackets을 실행하게 되면 ,

아래 이미지와 같은 페이지가 나타나게 됩니다.

그 후, 해당 이미지 버튼을 클릭해주시면 플러그인 다운로드 창이 나타나게 됩니다.

▼ 플러그인 다운로드 창

제가 사용하는 플러그인을 소개해드리도록 하겠습니다. ! 

1. Popup-menu-extension ( 우클릭 메뉴 확장 )

사용 : 마우스 클릭

우클릭 컨텍스트 메뉴에 잘라내기, 복사, 붙여넣기, 저장, 케이스 변환 등의 기능을 추가합니다.

( 마우스 우클릭 버튼 확장 플러그로 지금까지 본 것 중 유일하게 한국어 지원이 된다. )

2. Emmet

사용 : 다운시 도움말 옆  Emmet 메뉴가 생성된다.

High-speed HTML and CSS workflow.

( 축약코드로 빠르게 작업 할 수 있게 하는 것이라 생각하시면 됩니다. )

3. HTML Templates

사용 : 편집 > HTML Templates.. > 원하는 버전 선택

Inserts HTML from a pre-made list of templates.

( HTML 템플릿을 만들어 준다. )

4. Beautify

사용 : Format JavaScript, HTML and CSS files.

( 자동으로 인덴트 정리해 주는 플러그인이라고 생각하시면 됩니다. )

5. Brackets Icons

사용 : 자동적용

File icons in Brackets' file tree.

( 좌측의 사이드바에 있는 목록의 아이콘을 간편히 볼 수 있도록 바꿔준다. )

( + Brackets File Icon 이라고 유사한 것이 하나 더 있는데 그것보다 이 것이 더 알아보기 편할 것 같습니다. )

6. HTML Designer for Brackets

사용 : 다운시 편집기 하단에 view메뉴가 형성 됨. 클릭 후 원하는 모드 변경 후 사용.

NOW WITH RESPONSIVE DESIGN TOOLS (BETA)! Design and customize web ui with HTML and CSS.

Now with taggable Design snippet/bookmark supprot.

( 드림위버의 design뷰나 split뷰 처럼 code뷰와 함께 뷰를 자유롭게 전환하며 작업할 수 있는 것 같다. )

7. Indent Guides

사용 : 보기 > Indent Guides 체크

Show indent guides in the code editor.

( 들여쓰기 만으로는 가독성이 떨어질 때 도움을 주는 가이드 라인을 생성하여 준다. )

8. Brackets Outline List

사용 : 다운 시 우측 아이콘 바에 toggle Outline 아이콘 생성 > 클릭시 좌측 사이드바 하단에 리스트 형성

( 자신이 짠 코드의 Outline을 간편히 확인해 볼 수 있다 )

더 유용한 것들이 많을 수 있습니다.

일단은 제가 사용하는 몇가지 플러그인에 대해 알아보았습니다.

제가 알려드리는 플러그인으로 인하여 여러분들의 작업 능률이 더욱더 효과적이 되기를 바라며 

이만 물러나도록 하겠습니다.!

▼ 아래 텍스트를 클릭하시면, 제가 올린 HTML 기초강좌로 넘어가게 됩니다.

2018/05/06 - [Dairy] - html 01_basic

도움이 되셨다면 공감과 덧글을 남겨주세요 

글 작성에 큰 힘이됩니다. ^^