Brackets review

Brackets

leechwin1@gmail.com

2013. 11

Outline

• Introduction

• Composition

• Menu

• Sidebar

• Editor

• Live Preview

• Extensions

Introduction(1) • Brackets

• Open-source code editor for the web

• It’s built with JavaScript, HTML and CSS

Introduction(2) • Brackets

• Download site: http://download.brackets.io/

• Platform

• Windows XP, 7 or 8 (27MB)

• MAC OSX v10.6, v10.7 or v10.8 (28.3MB)

• Linux is not supported

• 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 • http://net.tutsplus.com/tutorials/tools-and-tips/a-peek-at-brackets/

• http://www.youtube.com/user/CodeBrackets?feature=CAQQwRs%3D

Composition • Menu, Sidebar, Editor and Live Preview

Menu(1)

• New File • 파일종류 관계없이 empty 파일 생성

• Template 없음

• Live Preview

• Live Highlight

• Project Settings..

• Live Preview Base URL 변경

• Install Extension • 외부 플러그인 설치가능

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

Menu(2)

Menu(3)

• Show Developer Tools • Remote Inspector

• 선택한 html 이 아닌 Brackets 전체에 대한 Inspector

• Reload Brackets

• New Brackets Windows

• Switch Languages

Menu(4)

• Show Performance Data

• Enable Node Debugger

• Log Node State to Console

• Restart Node

Menu(5)

• About Brackets

Sidebar • Recent Files

• Project Configuration

• Resources Control

• Review

• Project

• Multi Project Management • 한 개 이상의 프로젝트를 열 수 없다.

• 하나의 프로젝트만 지원

• Resource

• New, Rename 기능만 지원

• Delete, Add 미지원 • Delete, Add 를 위해서는 프로젝트폴더

에 Resource 를 Delete, Add 후 Brackets 를 F5 로 Sync

• Build/Run/Debug

• Live Preview 에서 care

Editor(1) • Code hint

• HTML • Tags

• Attribute names and values

• CSS • Property names and values

• JavaScript • Property names

Editor(2) • Validation

• JavaScript • JSLint

Editor(3) • Quick Edit

• HTML Element 내에서 CSS 파일에 정의되어 있는 Element 나 class 가 있는 경우 단축키(Ctrl+E)로 HTML Editor 내에서 CSS의 해당 내용이 보여지며 수정이 가능

• JavaScript 에서는 해당 구현부분이 보여지며 수정이 가능

• CSS 에서는 color 에 대해서 Color Picker 제공

Editor(4) • Image Preview and Pixel Guides

• Image Preview 와 Pixel Guides 를 제공하여 CSS Sprite 등에 유용하게 픽셀을 계산

Editor(5) • Live highlight

• HTML Element 해당 부분이 Preview 에서 박스로 표현됨

Live Preview • Live Preview

• HTML, JS 는 Save 시에 Preview 에 반영

• CSS 는 수정시 바로 Preveiw 에 반영

• It only works with Chrome as the target browser

• Only one HTML file can have a live connection to the browser at a time

• Opening the developer tools in Chrome will close the live development connection

Extensions(1) • Menu > File > Install Extension

Extensions(2) • https://github.com/adobe/brackets/wiki/Brackets-Extensions

• Snippets

• Prefixr

• Quick Markup

• HTML Templates

• Auto-match pairs

• Auto Formatter

• TabToSpace

• Beautify

• Minifier

• CSSLint

• JSHint

• W3CValidator

• Annotate

• Themes

• Code folding

• Hover Preview

• Markdown Preview

• Etc.. 70종 이상

Thank you.