Brackets是一個(gè)現(xiàn)代的、開源的文本編輯器，是由網(wǎng)頁(yè)設(shè)計(jì)師和前端開發(fā)人員在集中可視化工具和預(yù)處理器的支持下精心制作而成。Brackets能夠有效的支持Windows，Mac以及Linux操作系統(tǒng)，內(nèi)置HTML、CSS、以及JavaScript編碼，可以用于編寫HTML，CSS以及JavaScript，其中的Live Preview功能可以在瀏覽器預(yù)覽和源代碼之間輕松切換，可有效提高網(wǎng)頁(yè)編輯速度。

【基本介紹】

Brackets 是 Adobe 的開源 HTML/CSS/JavaScript 集成開發(fā)環(huán)境。Brackets 當(dāng)前為Mac, Windows以及Linux (Debian/Ubuntu)提供最新穩(wěn)定版的二進(jìn)制發(fā)布, 源代碼托管在GitHub上，Adobe Brackets的聯(lián)機(jī)編輯器無(wú)需彈出窗口或輔助標(biāo)簽就可以在一些特定的代碼上運(yùn)行。用戶還可以下載、并使用擴(kuò)展插件(比如Git整合，JSHint支持，等)添加功能，以支持自己的工作流程。

【功能特性】

1、快速編輯
將光標(biāo)定在顏色上，按下快捷鍵Ctrl+E即可編輯顏色。
將光標(biāo)定在標(biāo)簽或者class或者id上，Brackets就會(huì)搜索整個(gè)目錄下的css，列出匹配的項(xiàng)，快速編輯樣式，再也不用到處找樣式啦！
2、快速文檔
文檔是英文的，快捷鍵是Ctrl+K，簡(jiǎn)單測(cè)試得出，可以提示css屬性的用法
3、多點(diǎn)編輯
選中一串字符，按Ctrl+B可以連續(xù)選擇相同的字符一起編輯。或者可以通過按住Ctrl+鼠標(biāo)左鍵點(diǎn)擊來(lái)設(shè)定多個(gè)編輯點(diǎn)。
4、目錄管理
側(cè)邊欄分為兩塊，上面一塊工作區(qū)，顯示當(dāng)前打開的文檔，下面一塊是當(dāng)前目錄的文件列表，點(diǎn)擊目錄名稱可以添加新的目錄或者切到其它目錄（Brackets里叫目錄，不叫項(xiàng)目，其實(shí)一樣）。工作區(qū)右邊兩個(gè)按鈕，一個(gè)是設(shè)置排序按鈕，一個(gè)是分屏按鈕，可以將屏幕橫切或豎切成兩塊。
5、實(shí)時(shí)預(yù)覽
實(shí)時(shí)預(yù)覽，你懂的。用過Sublime Text的應(yīng)該知道Emmet LiveStyle，但是有許多問題。而Brackets的實(shí)時(shí)預(yù)覽是編輯器本身就整合的，使用起來(lái)要好的多。點(diǎn)擊右側(cè)擴(kuò)展里的第一個(gè)閃電圖標(biāo)打開實(shí)時(shí)預(yù)覽。
第二個(gè)圖標(biāo)是同步手機(jī)端實(shí)時(shí)預(yù)覽，手機(jī)端需要安裝Edge CC。
其實(shí)Brackets還有另外一個(gè)名字Adobe Edge Code CC，他們的功能幾乎一模一樣，至于到底什么關(guān)系，就等英語(yǔ)學(xué)的好的大神們?nèi)ジQ探了。
6、JSLint語(yǔ)法檢查
對(duì)js文件，內(nèi)置JSLint語(yǔ)法檢查器，它可以檢查出一些難以用肉眼發(fā)覺的錯(cuò)誤
7、擴(kuò)展插件

【中文設(shè)置】

brackets 怎樣設(shè)置中文
brackets 中文設(shè)置菜單藏在了Debug菜單里邊，設(shè)置方法如下：
第一步、打開brackets

第二步、點(diǎn)擊Dubug，選擇Switch Language2

第三步、選擇你想要的語(yǔ)言（簡(jiǎn)體中文在最后面），再點(diǎn)擊 Reload Brackets

這樣子界面就切換成簡(jiǎn)體中文版了

【安裝教程】

下載好后，雙擊后綴名為.msi的文件進(jìn)行安裝，彈出如下界面。

這里都保持默認(rèn)不變，單擊next，單擊install進(jìn)行安裝如下圖所示

下圖是按照進(jìn)行過程

單擊finish完成安裝

【使用教程】

Brackets使用入門教程
打開目錄
一般開始一個(gè)項(xiàng)目，你可以去新建一個(gè)目錄，把項(xiàng)目所需求的文件放在這個(gè)目錄下面，Brackets 支持打開整個(gè)目錄，通過編輯器邊欄上的樹形結(jié)構(gòu)，可以方便的管理項(xiàng)目文件 。
方法一：打開菜單，文件 -> 打開目錄
方法二：使用快捷鍵：alt + command + O
這個(gè)目錄的結(jié)構(gòu)會(huì)顯示在編輯器的邊欄上，點(diǎn)開對(duì)應(yīng)的目錄，會(huì)繼續(xù)顯示這個(gè)目錄里所包含的東西。你也可以在不需要邊欄的時(shí)候隱藏它（視圖 -> 隱藏邊欄 或 shift + command + H）。

快速導(dǎo)航
使用快速導(dǎo)航，可以快速找到項(xiàng)目里的文件。
方法一：打開菜單：導(dǎo)航 -> 打開快速導(dǎo)航
方法二：使用快捷鍵：shift + command + O
直接輸入想要找的文件名稱，Brackets 會(huì)給你一個(gè)包含這個(gè)文件名的文件列表，點(diǎn)擊對(duì)應(yīng)的文件，可以打開這個(gè)文件。

工作區(qū)
打開的文件，會(huì)在 工作區(qū) 里面顯示出來(lái)，點(diǎn)擊對(duì)應(yīng)的文件，可以快速地在不同的文件之間切換。已經(jīng)修改的文件沒有保存，在文件名稱的左邊會(huì)顯示一個(gè) 圓點(diǎn)。

實(shí)時(shí)預(yù)覽
方法一：打開菜單：文件 -> 實(shí)時(shí)預(yù)覽
方法二：使用快捷鍵：alt + command + P
方法三：點(diǎn)擊主界面右上角的 閃電 圖標(biāo)
Brackets 會(huì)為你打開一個(gè) Chrome 瀏覽器的窗口，實(shí)時(shí)顯示正在編輯的文檔。也就是，你現(xiàn)在可以去修改文檔里的內(nèi)容，或者文檔所鏈接的樣式表還有腳本文件，所做的修改會(huì)實(shí)時(shí)的在瀏覽器中顯示。注意，在實(shí)時(shí)預(yù)覽時(shí)，你不能使用瀏覽器的開發(fā)者工具，一但打開開發(fā)者工具，實(shí)時(shí)預(yù)覽就會(huì)失效了。

如果不特別指定，Brackets 會(huì)使用內(nèi)置的 Web Server 實(shí)時(shí)預(yù)覽文件，你也可以去為實(shí)時(shí)預(yù)覽指定一個(gè) Web Server ，比如你可能想實(shí)時(shí)預(yù)覽 PHP 文件，那么，你可以使用搭建在本地電腦上的開發(fā)環(huán)境，把項(xiàng)目目錄放在你自己的服務(wù)器的目錄里面，比如 semantic 這個(gè)目錄的下面，這樣，使用 localhost/semantic 這個(gè)地址可以訪問到你的項(xiàng)目，那么你可以把這個(gè)地址做為實(shí)時(shí)預(yù)覽的基本地址。
打開 文件 -> 項(xiàng)目設(shè)置，然后輸入預(yù)覽的地址，例如：http://localhost/semantic，這樣你在使用實(shí)時(shí)預(yù)覽的時(shí)候，會(huì)基于這個(gè)地址去預(yù)覽文件。

快速編輯
方法一：打開菜單：導(dǎo)航 -> 快速編輯
方法二：使用快捷鍵：command + E
Brackets 允許我們快速去編輯 HTML 或者 CSS 文檔?？焖倬庉?HTML 文檔，可以去為選中的元素快速添加或者修改樣式。編輯器會(huì)給你顯示出應(yīng)用在所選中元素上的所有的樣式，選中對(duì)應(yīng)的樣式，直接去修改，這樣你就不需要再去找到對(duì)應(yīng)的樣式表，對(duì)應(yīng)的地方去修改了?？焖倬庉嬐瑯舆m用 CSS 文檔，比如放在顏色屬性上，會(huì)顯示一個(gè)顏色選擇器，或者動(dòng)畫屬性上，會(huì)顯示一個(gè)可以調(diào)整動(dòng)畫曲線的工具。非常非常方便。

擴(kuò)展
你可以為 Brackets 編輯安裝擴(kuò)展來(lái)增加它的功能。 在 Brackets Extension Registry 里可以查看可用的擴(kuò)展，在這里，你也可以提交自己編寫的擴(kuò)展。
方法一：文件 -> 擴(kuò)展管理器
方法二：點(diǎn)擊主界面右上角的積木樣式的圖標(biāo)（閃電圖標(biāo)下面的那個(gè)）
打開 擴(kuò)展管理器 以后，在 可獲取 這個(gè)選項(xiàng)卡里面，可以找到想要使用的擴(kuò)展，點(diǎn)擊 安裝，可以安裝這個(gè)擴(kuò)展。打開 已安裝 這個(gè)選項(xiàng)卡，可以管理已經(jīng)安裝在編輯器上的擴(kuò)展，在這里，你可以升級(jí)或移除這些擴(kuò)展。

常用擴(kuò)展
快速編輯代碼 - Emmet
emmet 可以讓我們使用編寫形式去撰寫 HTML 與 CSS 代碼，非常方便。
改變樣式 - Themes
可以改變編輯器的樣式。安裝以后，主菜單上會(huì)多出一個(gè) Themes ，打開以后，選擇想要的主題。

折疊代碼塊 - Code Folding
讓 HTML，CSS，JavaScript，PHP 的代碼可以折疊起來(lái)。在 視圖 菜單下，會(huì)多出幾個(gè)菜單項(xiàng)目。
Collapse Current：折疊當(dāng)前代碼塊Expand Current：展開當(dāng)前代碼塊Collapse All：折疊所有代碼Expand All：展開所有代碼
自動(dòng)格式化 - Beautify
自動(dòng)給你格式化 JavaScript，HTML，CSS 等代碼。在 編輯 菜單下，多了兩個(gè)菜單項(xiàng)：Beautify 還有 Beautify On Save。
PHP 幫助文檔 - QuickDocsPHP
選中位置，使用快捷鍵 command + K（mac），ctrl + K （windows），可以快速查看 PHP 的幫助文檔。
JS 幫助文檔 - QuickDocsJS
選中位置，使用快捷鍵 command + K（mac），ctrl + K （windows），可以快速查看 JavaScript 的幫助文檔。

【使用技巧】

Brackets編輯器怎樣自動(dòng)格式化HTML代碼
先打開Brackets編輯器，可以看到左邊是目錄，右邊是代碼區(qū)。
打開一個(gè)HTML文件，右上角有個(gè)閃電樣子的圖標(biāo)就是實(shí)時(shí)預(yù)覽功能，需要電腦中安裝Chrome瀏覽器

其他的編輯器比如sublime之所以強(qiáng)大是因?yàn)橛泻芏嗖寮闹С?，可以打造最適合自己的編輯器，那Brackets有沒有插件呢？經(jīng)過一番尋找終于找到：
點(diǎn)擊文件--擴(kuò)展管理器
可以看到里面有很多插件

而格式化代碼是比較常用的功能，里面會(huì)不會(huì)有呢？先模糊搜索一下把，輸入format關(guān)鍵字搜索，看見的第一個(gè)插件Beautify，名字聽起來(lái)不錯(cuò)，再看下介紹：Format JavaScript, HTML, and CSS files，正和我們的需要，點(diǎn)擊安裝它把～

安裝完成先別著急關(guān)掉擴(kuò)展管理器，點(diǎn)擊Beautify下面的更多信息，進(jìn)入它在github的主頁(yè)，往下看可以看到這樣一行字：
Format HTML, CSS, and JavaScript files by Edit > Beautify menu or Cmd-Alt-L(Mac) / Ctrl-Alt-L(Win) key.
也就是說從Edit-Beautify可以找到它，而且快捷鍵是Ctrl+Alt+L

因?yàn)槭莡buntu系統(tǒng)，Ctrl+Alt+L默認(rèn)是鎖屏的快捷鍵，跟它有沖突，所以按下后直接就鎖屏了，再看一下編輯中的選項(xiàng)，發(fā)現(xiàn)不但有個(gè)Beautify還有個(gè)Beautify On Save,也即保存后就自動(dòng)格式化，把它勾上，然后弄亂自己的HTML代碼試一下把～～～

【快捷鍵】

ctrl+b 當(dāng)選中一個(gè)文本時(shí),會(huì)出現(xiàn)相同的文本,被高亮顯示 按ctrl+b 相同的文本就全部獲得了焦點(diǎn) 這樣就可以同時(shí)更改這些相同的文本
ctrl+e 打開或關(guān)閉快速編輯
alt+u 注釋
ctrl+/ 注釋
ctrl+\ 注釋
ctrl+d 復(fù)制一行
ctrl+shift+d 刪除一行
alt+u 注釋
ctrl+/ 注釋
ctrl+\ 注釋
ctrl+q 退出整個(gè)編輯器
ctrl+w 關(guān)閉當(dāng)前文件
ctrl+e 查找文檔
ctrl+k 查找文檔
ctrl+g 跳到某一行 (輸行號(hào))
tab 自動(dòng)補(bǔ)全
ctrl+x 剪切 一行全剪切掉
ctrl+l (英文字母) 選中一行
ctrl+shift+k 刪除整個(gè)標(biāo)簽
shift+command+, 進(jìn)行選擇 移動(dòng),擴(kuò)大范圍
shift+command+. 進(jìn)行選擇 縮小范圍
Ctrl/Cmd+Shift+H可以呼出與關(guān)閉文件樹。
ctrl+shift+a 選中一段文字后加標(biāo)簽 里面可以是 div.container 或 ul>li* 等
ctrl+alt+b 選中標(biāo)簽內(nèi)的內(nèi)容 再按一次 包含標(biāo)簽
ctrl+shift+m 選中標(biāo)簽內(nèi)的內(nèi)容 (包括標(biāo)簽) 但是代碼全集中堆在一起了
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 + / 塊注釋