關于
Brackets 號稱是懂web設計的開源編輯器愧哟。之所以這樣說霞赫，是因為它是為前端工程師準備的端衰，在前端開發(fā)方面做了很多特別設計。比如 可以在HTML里面直接跨文件編輯標簽所涉及的CSS抵代、PSD生成web文件禀倔、實時預覽等。
該項目由Adobe創(chuàng)建和維護鞋既，并在Github上開源邑闺。
該編輯器是用HTML/CSS/JavaScript開發(fā)的，所以前端工程師可以能很容易讀懂并進行改進靶衍。
早在兩年前剛起步時我就開始關注了，但鑒于功能還不完善涛酗、社區(qū)不夠活躍商叹，一直保持觀望狀態(tài)。最近重裝電腦，索性把一直用的Sublime放到一邊籍滴，試著用Brackets。
初體驗
用慣Sublime勋功，初次使用Brackets的時候總會不自覺的進行比較片择。感覺Brackets更像干凈的白紙，等著開發(fā)者去圖畫嘲叔。Brackets要靠插件來完成Sublime很多基本功能。
下面先介紹Brackets特有的功能丁逝，再介紹插件和小技巧。
特別的功能
在HTML里編輯CSS
在HTML文件里辛掠，鼠標放到一個要編輯樣式的標簽上，快捷鍵CTL + E，就可以看到有個下拉編輯框牌捷，這里顯示了與這個標簽有關的樣式粱玲，直接修改后椰弊，相應的樣式文件也會改變寄月。
可以看到，這個樣式定義在style.css文件里初橘，你還可以new rule新建樣式耕蝉。
預覽顏色
在樣式文件里扔亥，鼠標放到一個顏色屬性上踢关，就可以預覽顏色
用取色器編輯顏色
在顏色值上按CTRL + E粘茄，調(diào)出取色器進行編輯：
文件地址提示
圖片預覽
HTML：
Markdown：
主題
更換主題
在網(wǎng)上找的你喜歡的主題签舞，我用的是一個基于 Sublime Monokai 的主題。GIthub 的地址是 https://github.com/Brackets-Themes/Monokai柒瓣。
有幾種方法添加：
- 通過URL
在右邊工具欄找到一個望遠鏡的圖標儒搭，點擊Install from URL，粘貼地址上去安裝芙贫。
- 上傳壓縮包
同樣在上圖的位置媒吗，拖拽zip文件即可
- 在線搜索
Brackets已經(jīng)被墻，能用的幾率很小。完全無法理解為什么編輯器網(wǎng)站都被墻 = =
- 復制到插件文件夾
從菜單Help > Show Extensions Folder > User中進入擴展文件夾灸蟆，把壓縮包解壓到這里，或者 git clone 主題項目缘滥。重啟編輯器即可观游。重啟快捷鍵是 F5索烹。
創(chuàng)建新主題
創(chuàng)建主題文件
- 打開編輯器，從菜單
Help > Show Extensions Folder > User中進入擴展文件夾 - 新建一個文件夾仑嗅，起一個你喜歡的主題名字
- 在這個文件夾新增文件
package.json地沮、theme.less（CSS也行）
修改package.json
按照以下模板填寫楷怒，可以參考別人的主題的文件;
{
"name": "yourname.my-shiny-theme",
"title": "My Shiny Theme",
"description": "This theme is so shiny that you'll need to wear shades!",
"homepage": "https://github.com/yourname/my-shiny-theme",
"version": "1.0.0",
"author": "Your Name <your@email> (http://your.url)",
"license": "MIT",
"theme": {
"file": "theme.less",
"dark": true,
"addModeClass": true
},
"keywords": ["theme"]
}
添加主題
- 在編輯器菜單
View > Themes里添加你的主題 - 編輯你的
theme.less文件，保存后即可生效纳账，在編輯器里看到效果
開發(fā)
前面說到官扣，Brackets是用HTML泪蔫、CSS旁舰、JavaScript開發(fā)的，所以前端工程師能很輕易掌握開發(fā)這個編輯器的技能。
修改編輯器主題起趾，就行開發(fā)網(wǎng)頁一樣。按F12就能看到Development Tool渔呵，是不是Chrome的開發(fā)者工具的既視感趴生！是不是一下子就對Brackets有很強烈的歸屬感~
所以你可以審查元素窍株，獲得類名，然后到CSS/LESS文件里進行修改攻柠。
比如球订，我找到JS文件里for用到的class是cm-keyword，然后就可以在樣式文件里修改瑰钮。
為不同文件格式設置不同注釋樣式
在1.1版本之后冒滩，在主題package.json 文件里開啟 addModeClass 模式，就可以這樣為CSS的注釋寫樣式：
.cm-m-css.cm-tag {
color: #6c9ef8;
}
其他Common modes：
.cm-m-clike: PHP
.cm-m-css: CSS, LESS
.cm-m-javascript: JavaScript
.cm-m-xml: HTML, XML
修改
比起從0開始浪谴，還是站在巨人的肩上比較好开睡。這是我在主題上進行的修改，不過牽一發(fā)動全身苟耻，修改需謹慎：
span.cm-builtin { /*CSS id*/
color: #FFFD83;
}
span.cm-header { /*MD標題*/
color: #53C0E0;
}
.cm-s-monokai-dark-soda .cm-tag { /*CSS標簽篇恒、MD圖片標簽*/
color: #F5A14E;
}
.cm-s-monokai-dark-soda .cm-comment { /*注釋、MD文件的代碼塊*/
color: #c7d4d6;
}
span.CodeMirror-matchingbracket { /* 聚焦的括號 */
color: #F5C04C !important;
background-color: none;
}
小技巧
自動補全反括號凶杖、引號
Sublime是默認開啟這個功能胁艰，Brackets需要手動打開，剛開始還比較困惑智蝠，差點因為沒找到這個小功能而放棄Brackets腾么，因為實在容易出錯。
開啟菜單 Edit--Auto Close Brace
查找解決方案的時候杈湾，發(fā)現(xiàn)這個功能以前是默認開啟的解虱，后來取消了，感覺很不自在毛秘。我覺得大多數(shù)人都用過Sublime饭寺，它的一些好的做法應該保留阻课，這樣用戶不會產(chǎn)生太大抵觸心理。不過ST3也是把很多ST2默認開啟的功能改為手動開啟艰匙，也是煩限煞。
修改文件樹字體大小
習慣可能大字了。在Sublime是通過 User Setting 里添加 JSON 信息即可员凝。
通過開發(fā)者工具署驻，找到定義文件樹的標簽和樣式定義，可以看到是在style.css文件里的#project-files-container a （注意健霹，我安裝的文件樹的插件旺上，所以和你所找到的會不一樣）：
點擊style.css，進入開發(fā)者工具的 Source 面板糖埋，右鍵Reveal in navigator宣吱，可以看到文件所在目錄。
找到后打開編輯瞳别，保存重啟即可征候。
原文：http://laker.me/blog/2015/10/28/15_1028_brackets_intro/
歡迎交換友鏈 Laker's Blog--進擊的程序媛
