AdobeBrackets是一款開源、簡(jiǎn)潔強(qiáng)大的HTML、CSS和JavaScript集成開發(fā)環(huán)境，支持增加外掛程式以提供額外的功能擴(kuò)展，目前可用的外掛程式例如支持增加偵錯(cuò)、瀏覽器特定CSS前綴、JSDoc注解等，下面小編簡(jiǎn)單介紹Brackets的使用和設(shè)置。

一、項(xiàng)目設(shè)置

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

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

在項(xiàng)目名上單擊左鍵，彈出項(xiàng)目編輯菜單，編輯菜單會(huì)顯示歷史項(xiàng)目，以及項(xiàng)目編輯命令。

OpenFolder命令：打開新的項(xiàng)目。

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

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

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

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

二、文件編輯

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

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

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

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

需要注意的是，Brackets會(huì)檢測(cè)當(dāng)前html文檔以及項(xiàng)目下所有CSS文件來(lái)查找class/id樣式，即使某些CSS文件在當(dāng)前html文檔中未被引用到。

3、Brackets同樣支持對(duì)JS對(duì)象定義的快速預(yù)覽/編輯，把光標(biāo)放在一個(gè)js函數(shù)名稱上，按下Ctrl/Cmd+E(“編輯”)或退出編輯。

4、Brackets內(nèi)建取色器，提供RGBa、HEX、HSLa的顏色編碼形式。把光標(biāo)放在一個(gè)顏色編碼上，按下Ctrl/Cmd+E(“編輯”)，退出取色器窗口需要使用Esc鍵。

三、即時(shí)預(yù)覽

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

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

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

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

只能同時(shí)對(duì)一個(gè)HTML文件進(jìn)行預(yù)覽-如果切換另一個(gè)HTML文件，Brackets將關(guān)閉原來(lái)的預(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打開即時(shí)預(yù)覽功能

Ctrl/Cmd+/行注釋

Ctrl/Cmd+Alt+/塊注釋

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

更多信息請(qǐng)查看IT技術(shù)專欄