brackets review
TRANSCRIPT
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.