Adobe Brackets官方版 v2.2.1

Brackets是由Adobe公司推出的一款免費(fèi)、開源且跨平臺(tái)的HTML/CSS/JavaScript集成開發(fā)環(huán)境 (web前端開發(fā)工具)，目前支持 Windows、Linux 以及 OS X 平臺(tái)。Brackets非常靈活，其擴(kuò)展性強(qiáng)非常強(qiáng)，您可以按自已的需求來添加擴(kuò)展來增強(qiáng)其功能。軟件視圖面板比較簡潔，沒太多花哨的功能。

新發(fā)布的Brackets 1.0版本包括Extract for Brackets預(yù)覽版，Extract for Brackets是一個(gè)擴(kuò)展，可以直接導(dǎo)入PSD文件，可自動(dòng)從PSD(如顏色、字體、坡度和圖像等)抽取設(shè)計(jì)信息，并生成純凈的CSS，非常實(shí)用、方便。

Brackets 中文設(shè)置方法

1、打開軟件，選擇“Debug”—"Switch Language"進(jìn)入語言設(shè)置界面

2、將語言更改為“chinese,simplified”簡體中文即可

功能介紹

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

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

2、在【文件】菜單中，我們可以打開或者新建新的項(xiàng)目，同時(shí)需要對項(xiàng)目的Web地址進(jìn)行設(shè)置，其要求是：必須是http://開頭的web地址(在之后的預(yù)覽中需要用到)

二、文件編輯

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

2、軟件會(huì)自動(dòng)檢測文檔是否符合html規(guī)范，如出現(xiàn)JS錯(cuò)誤，會(huì)自動(dòng)提示，如下圖所示則表示在20行有一個(gè)style樣式塊需要放在head節(jié)點(diǎn)里。

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

4、軟件還支持對JS對象定義的快速預(yù)覽/編輯，把光標(biāo)放在一個(gè)js函數(shù)名稱上，按下“Ctrl + E”即可

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

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

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

關(guān)于Brackets的部分功能快捷鍵說明：

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í)只能使用塊注釋快捷鍵