關(guān)于
Brackets 號(hào)稱是懂web設(shè)計(jì)的開源編輯器。之所以這樣說，是因?yàn)樗菫榍岸斯こ處煖?zhǔn)備的，在前端開發(fā)方面做了很多特別設(shè)計(jì)。比如 可以在HTML里面直接跨文件編輯標(biāo)簽所涉及的CSS、PSD生成web文件、實(shí)時(shí)預(yù)覽等。
該項(xiàng)目由Adobe創(chuàng)建和維護(hù)，并在Github上開源。
該編輯器是用HTML/CSS/JavaScript開發(fā)的，所以前端工程師可以能很容易讀懂并進(jìn)行改進(jìn)。
早在兩年前剛起步時(shí)我就開始關(guān)注了，但鑒于功能還不完善、社區(qū)不夠活躍，一直保持觀望狀態(tài)。最近重裝電腦，索性把一直用的Sublime放到一邊，試著用Brackets。
初體驗(yàn)
用慣Sublime，初次使用Brackets的時(shí)候總會(huì)不自覺的進(jìn)行比較。感覺Brackets更像干凈的白紙，等著開發(fā)者去圖畫。Brackets要靠插件來完成Sublime很多基本功能。
下面先介紹Brackets特有的功能，再介紹插件和小技巧。
特別的功能
在HTML里編輯CSS
在HTML文件里，鼠標(biāo)放到一個(gè)要編輯樣式的標(biāo)簽上，快捷鍵CTL + E，就可以看到有個(gè)下拉編輯框，這里顯示了與這個(gè)標(biāo)簽有關(guān)的樣式，直接修改后，相應(yīng)的樣式文件也會(huì)改變。
可以看到，這個(gè)樣式定義在style.css文件里，你還可以new rule新建樣式。
預(yù)覽顏色
在樣式文件里，鼠標(biāo)放到一個(gè)顏色屬性上，就可以預(yù)覽顏色
用取色器編輯顏色
在顏色值上按CTRL + E，調(diào)出取色器進(jìn)行編輯：
文件地址提示
圖片預(yù)覽
HTML：
Markdown：
主題
更換主題
在網(wǎng)上找的你喜歡的主題，我用的是一個(gè)基于 Sublime Monokai 的主題。GIthub 的地址是 https://github.com/Brackets-Themes/Monokai。
有幾種方法添加：
- 通過URL
在右邊工具欄找到一個(gè)望遠(yuǎn)鏡的圖標(biāo)，點(diǎn)擊Install from URL，粘貼地址上去安裝。
- 上傳壓縮包
同樣在上圖的位置，拖拽zip文件即可
- 在線搜索
Brackets已經(jīng)被墻，能用的幾率很小。完全無法理解為什么編輯器網(wǎng)站都被墻 = =
- 復(fù)制到插件文件夾
從菜單Help > Show Extensions Folder > User中進(jìn)入擴(kuò)展文件夾，把壓縮包解壓到這里，或者 git clone 主題項(xiàng)目。重啟編輯器即可。重啟快捷鍵是 F5。
創(chuàng)建新主題
創(chuàng)建主題文件
- 打開編輯器，從菜單
Help > Show Extensions Folder > User中進(jìn)入擴(kuò)展文件夾 - 新建一個(gè)文件夾，起一個(gè)你喜歡的主題名字
- 在這個(gè)文件夾新增文件
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ā)這個(gè)編輯器的技能。
修改編輯器主題，就行開發(fā)網(wǎng)頁一樣。按F12就能看到Development Tool，是不是Chrome的開發(fā)者工具的既視感！是不是一下子就對(duì)Brackets有很強(qiáng)烈的歸屬感~
所以你可以審查元素，獲得類名，然后到CSS/LESS文件里進(jìn)行修改。
比如，我找到JS文件里for用到的class是cm-keyword，然后就可以在樣式文件里修改。
為不同文件格式設(shè)置不同注釋樣式
在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開始，還是站在巨人的肩上比較好。這是我在主題上進(jìn)行的修改，不過牽一發(fā)動(dòng)全身，修改需謹(jǐn)慎：
span.cm-builtin { /*CSS id*/
color: #FFFD83;
}
span.cm-header { /*MD標(biāo)題*/
color: #53C0E0;
}
.cm-s-monokai-dark-soda .cm-tag { /*CSS標(biāo)簽、MD圖片標(biāo)簽*/
color: #F5A14E;
}
.cm-s-monokai-dark-soda .cm-comment { /*注釋、MD文件的代碼塊*/
color: #c7d4d6;
}
span.CodeMirror-matchingbracket { /* 聚焦的括號(hào) */
color: #F5C04C !important;
background-color: none;
}
小技巧
自動(dòng)補(bǔ)全反括號(hào)、引號(hào)
Sublime是默認(rèn)開啟這個(gè)功能，Brackets需要手動(dòng)打開，剛開始還比較困惑，差點(diǎn)因?yàn)闆]找到這個(gè)小功能而放棄Brackets，因?yàn)閷?shí)在容易出錯(cuò)。
開啟菜單 Edit--Auto Close Brace
查找解決方案的時(shí)候，發(fā)現(xiàn)這個(gè)功能以前是默認(rèn)開啟的，后來取消了，感覺很不自在。我覺得大多數(shù)人都用過Sublime，它的一些好的做法應(yīng)該保留，這樣用戶不會(huì)產(chǎn)生太大抵觸心理。不過ST3也是把很多ST2默認(rèn)開啟的功能改為手動(dòng)開啟，也是煩。
修改文件樹字體大小
習(xí)慣可能大字了。在Sublime是通過 User Setting 里添加 JSON 信息即可。
通過開發(fā)者工具，找到定義文件樹的標(biāo)簽和樣式定義，可以看到是在style.css文件里的#project-files-container a （注意，我安裝的文件樹的插件，所以和你所找到的會(huì)不一樣）：
點(diǎn)擊style.css，進(jìn)入開發(fā)者工具的 Source 面板，右鍵Reveal in navigator，可以看到文件所在目錄。
找到后打開編輯，保存重啟即可。
原文：http://laker.me/blog/2015/10/28/15_1028_brackets_intro/
歡迎交換友鏈 Laker's Blog--進(jìn)擊的程序媛
