Brackets功能還是很強大的。
官網：brackets.io
常見問題解決：https://github.com/adobe/brackets/wiki/Troubleshooting
快捷鍵：https://github.com/adobe/brackets/wiki/Brackets-Shortcuts
首次打開Brackets
首次打開有一個默認頁面，右上角的波浪按鈕用來預覽，被打開的文件出現在左上角的Working Files選項下，Working Files同行右側還有一個排序按鈕，點擊左上角Getting Started右側的下拉按鈕可以打開另外的工程，在Getting Started下顯示了所有的工程文件，單擊工程文件是預覽，雙擊工程文件開始對文件編輯，在右下角可以改變文件的格式，如果文件有語法錯誤右下角還有一個圓形提示按鈕，鼠標放到css文件上的顏色樣式還可以預覽顏色，如果是圖片點擊圖片可在界面中預覽圖片以及圖片相關信息。
漢化
dubug菜單→language→simple chinese
有關預覽頁面
● 預覽頁面顯示不全
如果出現這種情況，就在chrome中打開：chrome://flags/， 並啟用DirectWrite Windows項，啟用之后還需重新啟動瀏覽器。
● 打開預覽頁面
除了可以點擊右上角的預覽按鈕，還可以用快捷鍵ctrl+alt+p
● 預覽頁面，審查某個元素，再此點擊Brackets的預覽按鈕，原先的預覽頁面就失效了
此時，應該關閉或重新刷新原先的預覽頁面。
View 菜單項
● Increase Font Size，放大字體，快捷鍵ctrl++
● Decrease Font Size, 縮小字體，快捷鍵ctrl+-
● Restore Font Size, 恢復字體，快捷鍵ctrl+0
● Line Numbers
● Word Wrap
● Hightlight Active Line
● Hide Sidebar, 快捷鍵ctrl+alt+H
● Themes,右上角的Extension Manager可以獲取到更多的themes
打開菜單項
● 快速導航：ctrl+shift+O
● 轉到某行：ctrl + G
● 轉到定義：ctrl + T
● tab跳轉：ctrl + tab 和 ctrl + shift + tab
打開工程和文件
● 打開工程，即文件夾
→ 方法一：點擊當前項目右側，下拉箭頭(快捷鍵ctrl+alt+R)，點擊"Open Folder"
→ 方法二：點擊當前項目右側，下拉箭頭(快捷鍵ctrl+alt+R)，點擊選擇其他工程,當在不同的工程切換的時候，Working Files會記錄下切換前的打開文件
→ 方法三：File菜單下的Open Folder
→ 方法四：把工程文件夾直接拖到軟件界面區域
● 打開文件
→ 方法一：打開工程中的文件
→ 方法二：右鍵文件，選擇Brackets這種打開方式
→ 方法三：直接把文件拖動到軟件界面區域
→ 方法四：File菜單下的Open
文件相關
● 新建文件:右鍵左側面板，New File，或ctrl+N。如果新建一個文件，保存為hello.js,Brackets會自動為我們檢測語法錯誤，右下角的文件類型自動變為JavaScript,
● 重命名：單擊文件名進行重命名
● 在資源管理器中打開：右鍵文件，Show in Explorer
● 快速打開某個文件：ctrl+shift+o
● 在文件中查找關鍵字：右鍵文件，Find in
● 在文件中替換：郵件文件，Replace in
插件
→ 點擊右上角的"擴展管理器"
→ 搜索emmet
→ 點擊"安裝"，安裝成功后，關閉"擴展管理器"
→ 在菜單欄上出現"Emmet"菜單項
創建一個文件，保存命名為main.html。輸入p,按tab鍵，就自動補全為<p></p>。輸入div.hello按tab鍵,就自動補全為<div class="hello"></div>。輸入span*4,再輸入tab，會出現4對span。
常用的插件
● Brackets Git：集成Git
● Code Folding:代碼折疊，比如折疊js的function
● Beautify:會出現在"編輯"菜單項下
● Emmet:html,css自動補全
● Documents Toolbar:出現橫向的tab
● HTMLHint:有關html的錯誤提示
● Minimap:界面右側出現縮略導航
插件更新
當"擴展管理器"出現綠色提示，就說明有安裝的插件更新了。
Emmet更多的用法
● ul>li自動補全為：
<ul>
<li></li>
</ul>
● ul#item>li*4，自動補全為：
<ul id="item">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
● ul.menu>li*4>{Item $}，自動補全為：
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
● table>tr*4>td+td+td，自動補全為：
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
● p*4>lorem，自動補全為：
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure impedit ducimus culpa quisquam eaque veritatis, reprehenderit quia numquam asperiores cupiditate consectetur eligendi libero corporis quibusdam, porro voluptatem, aperiam repellendus vitae!</p>
<p>Dolorem quis laudantium odit modi excepturi officiis amet atque dolor sint, ut officia illum ratione qui aut magni molestias ipsa error assumenda quae voluptas in vero numquam aspernatur. Veniam, commodi?</p>
<p>Totam quibusdam ipsam, assumenda maxime hic repudiandae ipsa, unde sunt. Necessitatibus reiciendis, doloribus nihil quisquam quasi, non voluptas ipsam ducimus dolor pariatur maiores, cum tempora laboriosam dolorem fugit, officiis aspernatur.</p>
<p>Architecto praesentium harum aspernatur nesciunt deleniti quis repellendus, dignissimos facere tenetur provident iure est quae et voluptas numquam iusto minus ab saepe odio vitae soluta cum enim veritatis. Ea, recusandae.</p>
● 在css文件中，m10,自動補全為：
margin: 10px;
● 在css文件中，m10e,自動補全為：
margin: 10em;
● 更多在這里：http://docs.emmet.io/
主題
在"擴展管理器"安裝主題，在"視圖"菜單下的"主題"中設置。
Lint for css
→ 點擊右上角的"擴展管理器"
→ 搜索csslint
→ 點擊"安裝"，安裝成功后，關閉"擴展管理器"
其它快捷鍵
● ctrl+A 全選
● ctrl+S 保存
● ctrl+C 復制
● ctrl+V 粘帖
● // 注釋,或快捷鍵ctrl+/
● 復制行，把鼠標放在行的任意處，ctrl+D
● 復制多個連續字母，拖選要選擇的的字母，ctrl+D
● 在文件中查找款關鍵字：ctrl+F
● ctrl+E, 把光標放在類名或元素上后ctrl+E