Brackets 擴展工具

Brackets是一款基於web(html+css+js)開發的web前端編輯器。它有許多普通編輯器難以實現的功能,是web前端開發者的神器。

戳我去下載

 

其功能如下:

1、快速編輯

將光標定在顏色上,按下快捷鍵Ctrl+E即可編輯顏色。

將光標定在標籤或者class或者id上,Brackets就會搜索整個目錄下的css,列出匹配的項,快速編輯樣式,再也不用到處找樣式啦!


2、快速文檔

文檔是英文的,快捷鍵是Ctrl+K,簡單測試得出,可以提示css屬性的用法

 

3、多點編輯

選中一串字符,按Ctrl+B可以連續選擇相同的字符一起編輯。或者可以通過按住Ctrl+鼠標左鍵點擊來設定多個編輯點。


4、目錄管理

側邊欄分爲兩塊,上面一塊工作區,顯示當前打開的文檔,下面一塊是當前目錄的文件列表,點擊目錄名稱可以添加新的目錄或者切到其它目錄(Brackets裏叫目錄,不叫項目,其實一樣)。工作區右邊兩個按鈕,一個是設置排序按鈕,一個是分屏按鈕,可以將屏幕橫切或豎切成兩塊。


5、實時預覽

實時預覽,你懂的。用過Sublime Text的應該知道Emmet LiveStyle,但是有許多問題。而Brackets的實時預覽是編輯器本身就整合的,使用起來要好的多。點擊右側擴展裏的第一個閃電圖標打開實時預覽。

第二個圖標是同步手機端實時預覽,手機端需要安裝Edge CC。

其實Brackets還有另外一個名字Adobe Edge Code CC,他們的功能幾乎一模一樣,至於到底什麼關係,就等英語學的好的大神們去窺探了。

 

6、JSLint語法檢查

對js文件,內置JSLint語法檢查器,它可以檢查出一些難以用肉眼發覺的錯誤,吐槽一下,少個空格你也算個問題?一個alert函數你報了8個問題。。。


7、擴展插件

Brackets也支持插件,點擊右側工具箱的圖標,可以打開擴展管理,當然,有時候會被牆一下。

推薦幾個常用插件:

Emmet

Minifier

Beautify(代碼美化,格式化)

Brackets Snippets(代碼片段)

 

 

 

總結

Brackets用着漂亮的UI,還有許多特色功能,它是一款基於web語言開發的編輯器,在編輯器中按F12會在Chrome瀏覽器中打開控制檯,可以看到Brackets的“內臟”。

本人使用的是Sublime Text,由於熟悉了ST的快捷鍵,自定義了許多代碼片段,宏命令等,轉到Brackets實在不捨。

目前我發現它也有一些缺點,如下:

1、快速樣式編輯因爲要搜索整個目錄,所以速度會很慢,要用它得配個SSD才行。。。

2、目前沒有發現宏功能,不過對宏的需求不是很大。

3、代碼片段沒有ST好用,快捷鍵需要設置組合鍵,其他鍵按了不是沒反應就是觸發默認功能了。

4、沒有ST那麼隨心所欲,ST甚至可以修改Tab鍵、Enter的默認功能,觸發順序等,非常強大。

但對於新手來說,我比較推薦這款編輯器,畢竟除去了習慣的問題,它還是有許多地方做的比Sublime Text要好。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章