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


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

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


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



'Web' 카테고리의 다른 글

Browser Object Model  (0) 2014.02.03
[Browserling] Cross Browser Testing Service  (0) 2013.12.10
Web Dev Tools Review  (0) 2013.12.10
[jsFiddle] Online 웹개발 및 공유 서비스  (1) 2013.03.14
[Browser] 사용중인 Web Browser 알아내기  (2) 2013.03.14
Posted by leechwin
,