adobebrackets是一款開源、簡潔強大的html、css和javascript集成開發(fā)環(huán)境，支持增加外掛程式以提供額外的功能擴展，目前可用的外掛程式例如支持增加偵錯、瀏覽器特定css前綴、jsdoc注解等，下面小編簡單介紹brackets的使用和設(shè)置。

一、項目設(shè)置

1、打開brackets，整個界面很簡潔，頂部菜單欄只提供file>exit退出編輯器功能。左側(cè)為項目組織結(jié)構(gòu)的文件樹，使用ctrl/cmd+shift+h可以呼出與關(guān)閉文件樹。右側(cè)為編輯區(qū)，上部為工具欄，中部為文檔區(qū)域，下部為提示區(qū)域。

2、打開項目使用file>openfolder命令打開項目文件夾，左側(cè)文件樹項目名更新為項目文件夾名，文件樹更新為當(dāng)前項目的文件樹。

在項目名上單擊左鍵，彈出項目編輯菜單，編輯菜單會顯示歷史項目，以及項目編輯命令。

openfolder命令：打開新的項目。

projectsettings命令：設(shè)置當(dāng)前項目的web地址，在頁面調(diào)試預(yù)覽時會用到。

設(shè)置要求：必須是http://開頭的web地址。

如上圖，設(shè)置為http://127.0.0.1/demo/slide時，在瀏覽器預(yù)覽時，會通過web地址打開相應(yīng)的頁面。

如果沒有設(shè)置，會通過文件的盤符地址打開頁面。

二、文件編輯

在文件樹中點擊index.html，主區(qū)域打開index.html的文檔。

1、brackest會檢測文檔是否符合html規(guī)范，如下圖提示，在20行有一個style樣式塊需要放在head節(jié)點里。

2、把光標(biāo)放在一個class或id屬性的標(biāo)簽名稱上，按下ctrl/cmd+e(“編輯”)或退出編輯。brackets將搜索項目下所有css文件，然后打開一個內(nèi)嵌的編輯器嵌入在html文件中，可以讓你迅速修改css代碼。

當(dāng)前class/id標(biāo)簽有多處樣式定義時，編輯窗口提供切換按鈕來切換顯示樣式，也可以使用alt+up/down箭頭鍵切換。

需要注意的是，brackets會檢測當(dāng)前html文檔以及項目下所有css文件來查找class/id樣式，即使某些css文件在當(dāng)前html文檔中未被引用到。

3、brackets同樣支持對js對象定義的快速預(yù)覽/編輯，把光標(biāo)放在一個js函數(shù)名稱上，按下ctrl/cmd+e(“編輯”)或退出編輯。

4、brackets內(nèi)建取色器，提供rgba、hex、hsla的顏色編碼形式。把光標(biāo)放在一個顏色編碼上，按下ctrl/cmd+e(“編輯”)，退出取色器窗口需要使用esc鍵。

三、即時預(yù)覽

brackets提供網(wǎng)頁即時預(yù)覽功能。使用該功能時，brackets調(diào)用chrome瀏覽器打開當(dāng)前頁面，此后修改html、css、javascript并保存后，所修改的內(nèi)容會即時響應(yīng)到瀏覽器中的頁面，無須手動刷新頁面。這是brackets最大的一個亮點，有兩個顯示器的coder有福了，可以分屏顯示brackets和chrome，即時修改即時預(yù)覽，無需切換編輯器/瀏覽器和刷新頁面。

目前即時預(yù)覽功能的一些限制：

它僅適用于chrome瀏覽器為目標(biāo)瀏覽器，你必須安裝chrome。

它依賴于在chrome瀏覽器中的遠(yuǎn)程調(diào)試功能，這是一個命令行標(biāo)志啟用。在mac上，如果你已經(jīng)在使用chrome瀏覽器，這時啟動“即時預(yù)覽”，brackets將詢問你是否要重新啟動chrome瀏覽器啟用遠(yuǎn)程調(diào)試功能。

只能同時對一個html文件進行預(yù)覽-如果切換另一個html文件，brackets將關(guān)閉原來的預(yù)覽。

四、部分快捷鍵

ctrl/cmd+shift+h可以呼出與關(guān)閉文件樹

ctrl/cmd+e快速預(yù)覽/編輯css樣式/javascript函數(shù)

ctrl/cmd++/-放大縮小編輯區(qū)字體大小

ctrl/cmd+0重置編輯區(qū)字體大小

ctrl/cmd+alt+p打開即時預(yù)覽功能

ctrl/cmd+/行注釋

ctrl/cmd+alt+/塊注釋

注：css代碼、html代碼注釋時只能使用塊注釋快捷鍵