Brackets 前端編輯器試用

Brackets編輯器介紹

"一個現代的，開源的，瞭解網頁設計的編輯器"這是官方的宣傳語。也就是說它適用於網頁開發，包含了許多亮點功能：實時預覽(Live Preview)、內聯編輯(Inline Edit)、多行編輯（Multiple Selections）、快速文檔（Quick Document）。它是基於Chrominu V8引擎運行的軟件，在實際使用過程當中偶爾會有卡頓（i5處理器+4G內存+固態硬盤）；

官方網址：http://brackets.io/
官方使用教程：https://github.com/adobe/brackets/wiki/How-to-Use-Brackets
多重選擇教程：https://github.com/adobe/brackets/wiki/Working-with-Multiple-Selections
Top100插件：http://brackets.dnbard.com/extensions

---

墜入愛河

實時預覽、行內編輯

---

基本使用

打開一個文件夾就能夠做爲項目進行開發了，File -> Open Folder就能夠進行項目開發了

編輯(Edit)

快捷鍵	功能	詳細描述
ctrl + l	選擇行	非選中狀態則選擇當前行，選中狀態執行會添加選中下一行
ctrl + [ / ]	縮進/反縮進	無
ctrl + d	重複當前行	未選中狀態，複製當前行；選中狀態複製選中區域
ctrl + shift + d	刪除當前行	無
ctrl + shift + 上/下箭頭	上下移動當前行	無
ctrl + / 或 ctrl + shift + /	註釋當前或取消註釋	非選中狀態下，處理當前行；不然處理選中區域
ctrl + space	顯示代碼提示	中文輸入法佔用了此快捷鍵，可自定義快捷鍵

導航(Navigation)

快捷鍵	功能	詳細描述
ctrl + alt + [/]	代碼摺疊或展開	無
alt + 1	摺疊全部代碼	無
ctrl + alt + o	文檔跳轉	跳轉到某個文件
ctrl + g	行跳轉	等價於在文檔跳轉中輸入:
ctrl + T	符號跳轉	跳轉到定義的符號，好比css選擇器，js方法，變量,等價於文檔跳轉輸入@
ctrl + e	快速編輯	不離開當前文件進行外部文件的查看和修改

---

它的美

多重選擇

多重選擇，意味着你能夠一次修改的多處代碼，Esc鍵取消多重編輯

• 分隔選中到行：選中文本狀態下，按ctrl + alt + l
  
  "選中後，按ctrl + alt + l")

• 連續選擇：alt + 鼠標拖動
  

• 斷續選擇：ctrl + 鼠標點擊
  

實時預覽

Brackets支持兩種預覽方式，均是基於chrome瀏覽器提供的開發者調試功能，因此只支持chrome實時瀏覽，一使用內置的靜態服務器，二使用服務器（一般是本地）

• 內置靜態服務器：支持css/html修改,以及less/sess
• 遠程服務器：一般是本地，須要設置File -> project setting指定當前頁面的url

注： 快捷鍵 ctrl + alt + p

行內編輯

不離開上下文便可編輯外部文件，例如在html頁面就能夠修改某元素的css、css文件內就可使用取色器修改顏色、js能夠修改外部的js文件;

注： 快捷鍵 ctrl + e

---

代碼提示

html支持標籤和屬性的提示,css支持key和value的提示，js提示很好，默認使用Jshit進行代碼檢測

---

插件

使用包管理器進行插件安裝，右側Extension Manager。在線選中安裝、從指定url中安裝、本地安裝，因爲國內網絡的緣由部分插件可能沒法下載；推薦如下插件：

名稱	做用
名稱	功能
代碼編寫
*Emmet	快速編寫HTML代碼
Autoprefixer	CSS自動補全前綴，實現瀏覽器兼容
*Markdown Preview	mardkdown實時預覽
代碼處理
*Beautify	HTML、CSS、JavaScript代碼格式化
JSLint	javaScript檢查，brackets已經內置了
JSHint	javaScript檢查
*CSSLint	CSS檢查
*HTMLHint	HTML檢查
*JS CSS Minifier	JS CSS文件壓縮
CanIUse	使用canIUse網站的數據，查看各個瀏覽器對css的支持程度
版本控制
Brackets Git	brackets繼承git，依然須要安裝git才能使用
外觀
Custom Work	自定工做空間，修改了文本標籤爲水平
Minimap	像sublime同樣能限時代碼的縮略圖
brackets-power-mode	很火的代碼輸入特效，特效顆粒、閃屏，無聲音
Brackets Icons	文件列表對不一樣類型的文件前添加圖標
Indent Guides	代碼層次的縮進線

注：插件編寫官方教程

---

設置

菜單僅僅能修改少許的設置，如：字體、主題等少許的。更多的設置須要修改json格式的配置文件，軟件爲中文語言狀態下配置文件有中文註釋。

• 菜單Debug -> Open Preferences File進行設置
• 菜單Debug -> Open User keyMap File進行設置

總結

• 跨平臺：支持windows、linux、ox系統
• 外觀：Brackets能夠說是源代碼編輯器中的美人，它是基於瀏覽器的軟件，它的UI就像網頁同樣絢麗多彩，同時又簡潔大方
• 運行速度：總體運行很流暢，偶爾會有1s左右的延遲
• 代碼處理：html支持標籤和屬性的提示,css支持key和value的提示，js提示很好，默認使用Jshit進行代碼檢測
• 插件：插件豐富，不少功能可使用插件完成，brackets自帶了nodejs對於依賴於nodejs的插件沒必要額外安裝nodejs
• 發展前景：社區使用比較活躍，js編寫插件，文檔比較完善
• 使用建議：作爲後端開發人員不推薦長期使用，能夠選擇sublime作爲輕量的源代碼編輯器。使用過程當中偶爾會有小bug，總之不要被工具左右，而要其爲我所用