Bracket 使用指南

Brackets 是一個免費、開源且跨平臺的 HTML/CSS/JavaScript 前端 WEB 集成開發環境 (IDE工具)。該項目由Adobe 建立和維護,根據MIT許可證發佈,支持 Windows、Linux 以及 OS X 平臺。javascript

Brackets 的特色是簡約、優雅、快捷!它沒有不少的視圖或者面板,也沒太多花哨的功能,它的核心目標是減小在開發過程當中那些效率低下的重複性工做,例如瀏覽器刷新,修改元素的樣式,搜索功能等等。和 Sublime TextEveredit 等通用代碼編輯器不同,Brackets 是專門針對 WEB 前端開發而生……php

Brackets - 優秀免費的開源前端開發工具演示視頻:

1、項目設置

一、打開 Brackets,整個界面很簡潔,頂部菜單欄只提供file > exit退出編輯器功能。左側爲項目組織結構的文件樹,使用Ctrl/Cmd+Shift+H能夠呼出與關閉文件樹。右側爲編輯區,上部爲工具欄,中部爲文檔區域,下部爲提示區域。css

brackets
二、打開項目 使用File > Open Folder命令打開項目文件夾,左側文件樹項目名更新爲項目文件夾名,文件樹更新爲當前項目的文件樹。html

brackets

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

brackets

Open Folder命令:打開新的項目。
Project Settings命令:設置當前項目的Web地址,在頁面調試預覽時會用到。
設置要求:必須是http://開頭的web地址。java

brackets

如上圖,設置爲http://127.0.0.1/demo/slide時,在瀏覽器預覽時,會經過web地址打開相應的頁面。css3

brackets

若是沒有設置,會經過文件的盤符地址打開頁面。git

brackets

2、文件編輯

在文件樹中點擊index.html,主區域打開index.html的文檔。github

brackets

一、Brackest會檢測文檔是否符合html規範,以下圖提示,在20行有一個style樣式塊須要放在head節點裏。web

brackets

二、把光標放在一個class或id屬性的標籤名稱上,按下Ctrl/Cmd + E(「編輯」)或退出編輯。Brackets將搜索項目下全部CSS文件,而後打開一個內嵌的編輯器嵌入在HTML文件中,可讓你迅速修改CSS代碼。

brackets

當前class/id標籤有多處樣式定義時,編輯窗口提供切換按鈕來切換顯示樣式,也可使用Alt + Up/Down箭頭鍵切換。
須要注意的是,Brackets會檢測當前html文檔以及項目下全部CSS文件來查找class/id樣式,即便某些CSS文件在當前html文檔中未被引用到。

三、Brackets一樣支持對JS對象定義的快速預覽/編輯,把光標放在一個js函數名稱上,按下Ctrl/Cmd + E(「編輯」)或退出編輯。

brackets

四、Brackets內建取色器,提供RGBa、HEX、HSLa的顏色編碼形式。把光標放在一個顏色編碼上,按下Ctrl/Cmd + E(「編輯」),退出取色器窗口須要使用Esc鍵。

brackets

五、根據讀者的反映,新版本中的 Brackets 已經支持 HTML、HTML五、CSS 以及 Javascript 的代碼提示(代碼補全)了。

3、即時預覽

Brackets提供網頁即時預覽功能。使用該功能時,Brackets調用 Chrome 瀏覽器打開當前頁面,此後修改html、css、javascript並保存後,所修改的內容會即時響應到瀏覽器中的頁面,無須手動刷新頁面。這是 Brackets 最大的一個亮點,有兩個顯示器的coder有福了,能夠分屏顯示Brackets和chrome,即時修改即時預覽,無需切換編輯器/瀏覽器和刷新頁面。

目前即時預覽功能的一些限制:
它僅適用於 Chrome 瀏覽器爲目標瀏覽器,你必須安裝 Google Chrome
它依賴於在Chrome瀏覽器中的遠程調試功能,這是一個命令行標誌啓用。在Mac上,若是你已經在使用Chrome瀏覽器,這時啓動「即時預覽」,Brackets將詢問你是否要從新啓動Chrome瀏覽器啓用遠程調試功能。
只能同時對一個HTML文件進行預覽 - 若是切換另外一個HTML文件,Brackets將關閉原來的預覽。

4、部分快捷鍵

Ctrl/Cmd+Shift+H 能夠呼出與關閉文件樹
Ctrl/Cmd + E 快速預覽/編輯 css樣式/javascript函數
Ctrl/Cmd + +/- 放大縮小編輯區字體大小
Ctrl/Cmd + 0 重置編輯區字體大小
Ctrl/Cmd + Alt + P 打開即時預覽功能
Ctrl/Cmd + / 行註釋
Ctrl/Cmd + Alt + / 塊註釋
注:css代碼、html代碼註釋時只能使用塊註釋快捷鍵

有待改進之處:

一、撤銷修改功能支持的步數較少
二、未保存的修改在撤銷時會一次撤銷到最後一次保存的狀態
三、取色器不支持Ctrl/Cmd + E關閉
四、Javascript只支持對函數的快速預覽/編輯
五、對於css樣式、javascript函數的快速預覽:Brackets會檢測當前html文檔以及項目下全部css、javascript文件來查找目標,即便某些css、javascript文件在當前html文檔中未被引用到。對於做爲JSON對象屬性的函數的查找結果,其餘對象中的同名函數也會被索引到
六、在使用網頁即時預覽功能時,打開Chrome控制檯,Brackets會退出即時預覽
七、不支持雙擊選中中文字符串
八、不支持代碼摺疊

總的來講,Brackets 這個項目還很新,潛力巨大,並且如今 WEB 前端開發需求極其旺盛,真正好用強大的免費工具也不是特別多,加上 Brackets 開源,支持多平臺,因此仍是很是值得嘗試與學習的,但願這款開發工具能夠對你有所幫助吧

Brackets插件推薦

1.代碼格式化插件:Beautify

直接打開Brackets 插件管理器,搜索安裝beautify。
安裝完畢後,選擇菜單上的編輯→beautify(或使用快捷鍵ctrl+alt+L)完成代碼格式化

2.HTML代碼編輯:Emmet

最強大的HTML和CSS快速編輯插件

3.CSS和JS壓縮插件:Minify

很強大的插件,集成了CSS和JS的壓縮,會在同個目錄下自動生成*.min.*格式的文件。

4.CSS3代碼自動補全插件:auto prefix

使用CanIUse上的css3數據,自動補全css3前綴和瀏覽器兼容,不過可能有些新了。有一些舊版本的瀏覽器會被拋棄掉。

5.代碼摺疊插件:brackets-code-folding

安裝URL:https://github.com/thehogfather/brackets-code-folding

默認不支持代碼的可摺疊功能。經過此擴展的安裝,對代碼添加可摺疊功能。

6.當關閉編輯器時自動保存全部打開未保存的文件:Autosave Files on Window Blur

相似Sublime Text二、phpstorm / webstorm的風格,以前提到的不足所有解決了。

7.Brackets主題:theme

安裝URL:https://github.com/MiguelCastillo/Brackets-Themes

該擴展爲一個用於使用基於CodeMirror的主題集的擴展。安裝該擴展後應用程序菜單中出現「Themes」菜單,開發者能夠爲應用程序界面從中選用一個主題。



相關文件下載地址:

官方網站:訪問
軟件性質:免費開源

下載 Brackets (Win)  |  Mac  |  Linux64位32位  |  來自異次元  |  開發相關  |  WEB相關  |  更多編輯器

相關文章
相關標籤/搜索