[Brackets] Open source code editor for the web

 Brackets 라는 Web 기술로 구현된 Code Editor 를 소개하려고 한다.

Brackets 은 Adobe 에서 관리하고 있는 Opensource 프로젝트이다.

Download site 에서 인스톨러를 다운받아 자신의 PC 에서 Code Editor 로 쓸 수도 있고, Web Page 에서 Editor 로 사용 할 수도 있다.

• Download site: http://download.bracket.io/
• Platform
• Windows XP, 7 or 8 (27MB)
• MAC OSX v10.6, v10.7 or v10.8 (28.3MB)
• Linux is not supported
• Prerequisites
• Google Chrome Browser
• Github
• Source: https://github.com/adobe/brackets
• How to use: https://github.com/adobe/brackets/wiki/How-to-Use-Brackets
• Extensions: https://github.com/adobe/brackets/wiki/Brackets-Extensions
• Video tutorial: http://net.tutsplus.com/tutorials/tools-and-tips/a-peek-at-brackets/

Code Editor 에서는 HTML, CSS, JavaScript 언어를 지원한다.

구성

  Brackets 은 전체적으로 다음과 같은 구성으로 분류된다.

• Menu
• Sidebar
• Editor
• Preview

Menu

  기본으로 File, Edit, View, Navigate, Debug, Help 메뉴로 나뉘며, Extensions 플러그인을 설치하면 추가로 메뉴가 추가될 수도 있다.

• File
•  
• New File: 새로운 파일을 생성한다. 단 확장자까지도 입력해야한다.
• html, javascript, css 파일에 대한 템플릿은 따로 존재하지 않지만, Extenstion 설치를 통하여 템플릿으로 부터 새로운 파일 생성이 가능하다.
• Live Preview: 현재 프로젝트에 대한 Preview 를 크롬을 통해 보여준다.
• Live Highlight: Editor 에서 커서가 위치되어있는 Tag를 Live Preview 에서 해당 태그 위치를 표시
• Project Settings...: Live Preview Base URL 을 변경
• Install Extension: 외부 Extenstion을 설치 할 수 있다.

• Edit
• 

• View
• 

• Navigate
• 

• Debug
• 
• Show Developer Tools: 현재 Brackets 에 대한 Remote Inspector 를 실행한다.    
• Reload Brackets: 현재 실행중인 Brackets 을 다시 실행한다.
• New Brackets Windows: 새로운 창으로 Brackets 을 하나 더 실행한다.
• Switch Languages: 다국어 지원
• 
• 

• Show Performance Data: 현재 수행중인 프로젝트에 대한 퍼포먼스 수치를 보여준다.
• 
• Enable Node Debugger: Node 디버깅을 위한 옵션
  
• Log Node State to Console: Node 현재 상태를 Browser 의 console 에 출력한다.
• Restart Node: Node 를 재시작
• 
• Help
• 

Sidebar

 Sidebar 는 Recent Files, Project Configuration, Resources Control 등에 따라 Contenxt Menu 가  나뉜다.

• Recent Files
• 
• Project Configuration: 한번에 하나의 프로젝트만 열 수 있다.
• 
• Resources Control: Delete, Add, Import 등의 기능은 없어서 프로젝트 폴더에 원하는 Resource 를 Delete, Add 한 후 Brackets 를  F5 로 Sync 를 맞추어야 한다.
• 

Editor

 Editor 에서는 HTML, CSS, Javascript 를 지원한다.

• Code hint
• HTML, CSS, Javascript 에 대해서 Code Asssit 와 같은 기능을 제공한다. 단축키는 Ctrl+Space 이다.
• HTML: tags, attribute names and values
•  
• CSS: property names and values
• 
• Javascript: property names
• 

• Validation
• Javascript Validator 로 JSLint 가 적용되어있으나, Extension 을 통해서, CSS, HTML Validator 를 추가가 가능하다.
• Quick Edit
• HTML Tag 에 대한 스타일이 CSS 파일에 정의되어 있으면, 해당 Tag 에서 단축키(Ctrl+E)로 HTML Editor 내에 CSS 파일의 해당 내용이 보여지며 수정도 가능하다.
• 
• JavaScript 에서는 해당 구현부분이 보여지며 수정도 가능하다.
• 
• CSS 에서는 Color 값에 대해서는 Color Picker 가 제공된다.
• 
• Image Preview 와 Pixel Guides 를 제공하여 CSS Sprite 등에 유용하게 픽셀을 계산할 수 있다.
• 

• Live highlight
• HTML Editor 에서 Tag 를 클릭하면 해당 부분이 Live Preview 상에서 박스로 표현이 된다.
• 

• Live Preview
• Editor 에 대한 실시간 Preview 로 Chrome Base 이다.
• Brackets 의 우측 상단에 번개마크를 클릭하여서도 실행이 가능하다.
• CSS 는 수정시 바로 Preview 에 반영되고, HTML, Javascript 는 Save 시에만 Preview 에 반영이 된다.

Extension

 Extension 은 외부의 플러그인을 추가 설치가능한 옵션으로 다음 URL 에 70여가지 이상의 많은 Extension 들이 구현되어 있다.

 - https://github.com/adobe/brackets/wiki/Brackets-Extensions

 

• Menu > File > Install Extension > 에 해당 Extension 에 대한 URL 을 기술하고 Install 버튼을 누르면 된다.
• 

• Extension 으로 추가가능한 주요 항목들은 다음과 같다.
• Snippets
• Prefixr
• Quick Markup
• HTML Tempaltes
• Auto-match pairs
• Auto Formatter
• TabToSpace
• Beaufiy
• Minifier
• CSSLint
• JSHint
• W3CValidator
• Annotate
• Themes
• Code folding
• Hover Preview
• Markdown Preview
• etc..
• 
• 

Slideshare: http://www.slideshare.net/ChanghyunLee4/brackets-review

BracketsReview.pdf