Brackets編輯器介紹
"一個(gè)現(xiàn)代的，開源的，了解網(wǎng)頁設(shè)計(jì)的編輯器"這是官方的宣傳語。也就是說它適用于網(wǎng)頁開發(fā)，包含了許多亮點(diǎn)功能：實(shí)時(shí)預(yù)覽(Live Preview)、內(nèi)聯(lián)編輯(Inline Edit)、多行編輯（Multiple Selections）、快速文檔（Quick Document）。它是基于Chrominu V8引擎運(yùn)行的軟件，在實(shí)際使用過程中偶爾會(huì)有卡頓（i5處理器+4G內(nèi)存+固態(tài)硬盤）；
官方網(wǎng)址：http:///
官方使用教程：https://github.com/adobe/brackets/wiki/How-to-Use-Brackets
多重選擇教程：https://github.com/adobe/brackets/wiki/Working-with-Multiple-Selections
Top100插件：http://brackets./extensions
墜入愛河
實(shí)時(shí)預(yù)覽、行內(nèi)編輯
基本使用
打開一個(gè)文件夾就可以作為項(xiàng)目進(jìn)行開發(fā)了，File -> Open Folder就可以進(jìn)行項(xiàng)目開發(fā)了
編輯(Edit)
| 快捷鍵 | 功能 | 詳細(xì)描述 |
|---|
| ctrl + l |
選擇行 |
非選中狀態(tài)則選擇當(dāng)前行，選中狀態(tài)執(zhí)行會(huì)添加選中下一行 |
| ctrl + [ / ] |
縮進(jìn)/反縮進(jìn) |
無 |
| ctrl + d |
重復(fù)當(dāng)前行 |
未選中狀態(tài)，復(fù)制當(dāng)前行；選中狀態(tài)復(fù)制選中區(qū)域 |
| ctrl + shift + d |
刪除當(dāng)前行 |
無 |
| ctrl + shift + 上/下箭頭 |
上下移動(dòng)當(dāng)前行 |
無 |
| ctrl + / 或 ctrl + shift + / |
注釋當(dāng)前或取消注釋 |
非選中狀態(tài)下，處理當(dāng)前行；否則處理選中區(qū)域 |
| ctrl + space |
顯示代碼提示 |
中文輸入法占用了此快捷鍵，可自定義快捷鍵 |
導(dǎo)航(Navigation)
| 快捷鍵 | 功能 | 詳細(xì)描述 |
|---|
| ctrl + alt + [/] |
代碼折疊或展開 |
無 |
| alt + 1 |
折疊所有代碼 |
無 |
| ctrl + alt + o |
文檔跳轉(zhuǎn) |
跳轉(zhuǎn)到某個(gè)文件 |
| ctrl + g |
行跳轉(zhuǎn) |
等價(jià)于在文檔跳轉(zhuǎn)中輸入: |
| ctrl + T |
符號(hào)跳轉(zhuǎn) |
跳轉(zhuǎn)到定義的符號(hào)，比如css選擇器，js方法，變量,等價(jià)于文檔跳轉(zhuǎn)輸入@ |
| ctrl + e |
快速編輯 |
不離開當(dāng)前文件進(jìn)行外部文件的查看和修改 |
它的美
多重選擇
多重選擇，意味著你可以一次修改的多處代碼，Esc鍵取消多重編輯
-
分隔選中到行：選中文本狀態(tài)下，按ctrl + alt + l
"選中后，按ctrl + alt + l")
-
連續(xù)選擇：alt + 鼠標(biāo)拖動(dòng)
-
斷續(xù)選擇：ctrl + 鼠標(biāo)點(diǎn)擊
實(shí)時(shí)預(yù)覽
Brackets支持兩種預(yù)覽方式，均是基于chrome瀏覽器提供的開發(fā)者調(diào)試功能，所以只支持chrome實(shí)時(shí)瀏覽，一使用內(nèi)置的靜態(tài)服務(wù)器，二使用服務(wù)器（通常是本地）
- 內(nèi)置靜態(tài)服務(wù)器：支持css/html修改,以及l(fā)ess/sess
- 遠(yuǎn)程服務(wù)器：通常是本地，需要設(shè)置File -> project setting指定當(dāng)前頁面的url
注： 快捷鍵 ctrl + alt + p
行內(nèi)編輯
不離開上下文即可編輯外部文件，例如在html頁面就可以修改某元素的css、css文件內(nèi)就可以使用取色器修改顏色、js可以修改外部的js文件;
注： 快捷鍵 ctrl + e
代碼提示
html支持標(biāo)簽和屬性的提示,css支持key和value的提示，js提示很好，默認(rèn)使用Jshit進(jìn)行代碼檢測(cè)
插件
使用包管理器進(jìn)行插件安裝，右側(cè)Extension Manager。在線選中安裝、從指定url中安裝、本地安裝，由于國內(nèi)網(wǎng)絡(luò)的原因部分插件可能無法下載；推薦以下插件：
| 名稱 | 作用 |
|---|
| 名稱 |
功能 |
| 代碼編寫 |
|
| *Emmet |
快速編寫HTML代碼 |
| Autoprefixer |
CSS自動(dòng)補(bǔ)全前綴，實(shí)現(xiàn)瀏覽器兼容 |
| *Markdown Preview |
mardkdown實(shí)時(shí)預(yù)覽 |
| 代碼處理 |
|
| *Beautify |
HTML、CSS、JavaScript代碼格式化 |
| JSLint |
javaScript檢查，brackets已經(jīng)內(nèi)置了 |
| JSHint |
javaScript檢查 |
| *CSSLint |
CSS檢查 |
| *HTMLHint |
HTML檢查 |
| *JS CSS Minifier |
JS CSS文件壓縮 |
| CanIUse |
使用canIUse網(wǎng)站的數(shù)據(jù)，查看各個(gè)瀏覽器對(duì)css的支持程度 |
| 版本控制 |
|
| Brackets Git |
brackets繼承g(shù)it，依然需要安裝git才能使用 |
| 外觀 |
|
| Custom Work |
自定工作空間，修改了文本標(biāo)簽為水平 |
| Minimap |
像sublime一樣能限時(shí)代碼的縮略圖 |
| brackets-power-mode |
很火的代碼輸入特效，特效顆粒、閃屏，無聲音 |
| Brackets Icons |
文件列表對(duì)不同類型的文件前添加圖標(biāo) |
| Indent Guides |
代碼層次的縮進(jìn)線 |
注：插件編寫官方教程
設(shè)置
菜單僅僅能修改少量的設(shè)置，如：字體、主題等少量的。更多的設(shè)置需要修改json格式的配置文件，軟件為中文語言狀態(tài)下配置文件有中文注釋。
- 菜單
Debug -> Open Preferences File進(jìn)行設(shè)置 - 菜單
Debug -> Open User keyMap File進(jìn)行設(shè)置
總結(jié)
- 跨平臺(tái)：支持windows、linux、ox系統(tǒng)
- 外觀：Brackets可以說是源代碼編輯器中的美人，它是基于瀏覽器的軟件，它的UI就像網(wǎng)頁一樣絢麗多彩，同時(shí)又簡(jiǎn)潔大方
- 運(yùn)行速度：整體運(yùn)行很流暢，偶爾會(huì)有1s左右的延遲
- 代碼處理：html支持標(biāo)簽和屬性的提示,css支持key和value的提示，js提示很好，默認(rèn)使用Jshit進(jìn)行代碼檢測(cè)
- 插件：插件豐富，很多功能可以使用插件完成，brackets自帶了nodejs對(duì)于依賴于nodejs的插件不必額外安裝nodejs
- 發(fā)展前景：社區(qū)使用比較活躍，js編寫插件，文檔比較完善
- 使用建議：做為后端開發(fā)人員不推薦長期使用，可以選擇sublime做為輕量的源代碼編輯器。使用過程中偶爾會(huì)有小bug，總之不要被工具左右，而要其為我所用
|
