前端開發(fā)神器Brackets的那些秘密

那些神秘強大的bracket插件

1.代碼格式化插件:Beautify

直接打開Brackets 插件管理器,搜索安裝beautify。

或者通過url下載:https://github.com/brackets-beautify/brackets-beautify

安裝完畢后,選擇菜單上的編輯→beautify(或使用快捷鍵ctrl+alt+L)完成代碼格式化

2.HTML代碼編輯:Emmet

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

直接打開Brackets 插件管理器,搜索安裝Emmet。

或者通過url下載:https://github.com/emmetio/brackets-emmet

3.CSS和JS壓縮插件:Minify

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

直接打開Brackets 插件管理器,搜索安裝Minify。

或者通過url下載:https://github.com/abagshaw/brackets-minifier

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

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

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

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

默認(rèn)不支持代碼的可折疊功能。通過此擴展的安裝,對代碼添加可折疊功能。

6.當(dāng)關(guān)閉編輯器時自動保存所有打開未保存的文件:Autosave Files on Window Blur

類似Sublime Text2、phpstorm / webstorm的風(fēng)格,之前提到的不足全部解決了。

7.Brackets主題:theme

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

該擴展為一個用于使用基于CodeMirror的主題集的擴展。安裝該擴展后應(yīng)用程序菜單中出現(xiàn)“Themes”菜單,開發(fā)者可以為應(yīng)用程序界面從中選用一個主題。

8.JS調(diào)試(JSHint)

搜索JSHint即可安裝

9.QuickDocsPHP

內(nèi)嵌的php函數(shù)文檔,包括語法,值和規(guī)則。

10.CSSLint

CSS語法調(diào)試

11.Markdown Preview

markdown preview是一款支持markdown的實時預(yù)覽的插件,對于經(jīng)常寫項目文檔的用戶,算是一個福音。

12.Brackets Color Palette

支持直接在圖片上吸取顏色的小插件,切圖利器。

13.brackets-snippets

搜集代碼片段用的,方便快速編輯。

14.html-designer

專門為設(shè)計師提供的一款可實時預(yù)覽設(shè)計的插件,讓我想起了DW.

15.Popup Menu Brackets

支持鼠標(biāo)右鍵,可以選擇復(fù)制或者剪切功能。

16.AngularJS for Brackets

Angular 的一款擴展插件

17.Brackets Vue

一款支持 VUE語法高亮的插件

更多請登錄官網(wǎng):https://ingorichter.github.io/BracketsExtensionTweetBot/

常用快捷鍵

Ctrl/Cmd+Shift+H 可以呼出與關(guān)閉文件樹

Ctrl/Cmd + E 快速預(yù)覽/編輯 css樣式/javascript函數(shù)

Ctrl/Cmd + +/- 放大縮小編輯區(qū)字體大小

Ctrl/Cmd + 0 重置編輯區(qū)字體大小

Ctrl/Cmd + Alt + P 打開即時預(yù)覽功能

Ctrl/Cmd + / 行注釋

Ctrl/Cmd + Alt + / 塊注釋

注:css代碼、html代碼注釋時只能使用塊注釋快捷鍵

下載地址

官網(wǎng)下載地址:http://brackets.io/ 但好多人下載特慢或者下載不下來原因是有一道墻?。?!

所以小編放在了安全的地方,大家可以關(guān)注微信公眾號"全棧弄潮兒",回復(fù):brackets,即可獲取下載鏈接。

前端面試題每日更新,歡迎參與討論,地址:https://github.com/daily-interview/fe-interview。


更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技術(shù)文章、視頻教程和開源項目,請關(guān)注微信公眾號——全棧弄潮兒。

腦筋急轉(zhuǎn)彎:

生活小竅門

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容