爲前端而生的編輯器Brackets及配置推薦

原文：http://laker.me/blog/2015/10/28/15_1028_brackets_intro/
歡迎交換友鏈 Laker's Blog--進擊的程序媛
Github：https://github.com/younglaker
微博: 江小湖Laker

關於

Brackets 號稱是懂web設計的開源編輯器。之因此這樣說，是由於它是爲前端工程師準備的，在前端開發方面作了不少特別設計。好比 能夠在HTML裏面直接跨文件編輯標籤所涉及的CSS、PSD生成web文件、實時預覽等。

該項目由Adobe建立和維護，並在Github上開源。

該編輯器是用HTML/CSS/JavaScript開發的，因此前端工程師能夠能很容易讀懂並進行改進。

早在兩年前剛起步時我就開始關注了，但鑑於功能還不完善、社區不夠活躍，一直保持觀望狀態。最近重裝電腦，索性把一直用的Sublime放到一邊，試着用Brackets。

初體驗

用慣Sublime，初次使用Brackets的時候總會不自覺的進行比較。感受Brackets更像乾淨的白紙，等着開發者去圖畫。Brackets要靠插件來完成Sublime不少基本功能。

下面先介紹Brackets特有的功能，再介紹插件和小技巧。

特別的功能

在HTML裏編輯CSS

在HTML文件裏，鼠標放到一個要編輯樣式的標籤上，快捷鍵CTL + E，就能夠看到有個下拉編輯框，這裏顯示了與這個標籤有關的樣式，直接修改後，相應的樣式文件也會改變。

能夠看到，這個樣式定義在style.css文件裏，你還能夠new rule新建樣式。

預覽顏色

在樣式文件裏，鼠標放到一個顏色屬性上，就能夠預覽顏色

用取色器編輯顏色

在顏色值上按CTRL + E，調出取色器進行編輯：

文件地址提示

圖片預覽

HTML：

Markdown：

主題

更換主題

在網上找的你喜歡的主題，我用的是一個基於 Sublime Monokai 的主題。GIthub 的地址是 https://github.com/Brackets-Themes/Monokai。

有幾種方法添加：

• 經過URL
  在右邊工具欄找到一個望遠鏡的圖標，點擊Install from URL，粘貼地址上去安裝。

• 上傳壓縮包

一樣在上圖的位置，拖拽zip文件便可

• 在線搜索

Brackets已經被牆，能用的概率很小。徹底沒法理解爲何編輯器網站都被牆 = =

• 複製到插件文件夾
  從菜單Help > Show Extensions Folder > User中進入擴展文件夾，把壓縮包解壓到這裏，或者 git clone 主題項目。重啓編輯器便可。重啓快捷鍵是 F5。

建立新主題

建立主題文件

• 打開編輯器，從菜單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文件，保存後便可生效，在編輯器裏看到效果

開發

前面說到，Brackets是用HTML、CSS、JavaScript開發的，因此前端工程師能很輕易掌握開發這個編輯器的技能。

修改編輯器主題，就行開發網頁同樣。按F12就能看到Development Tool，是否是Chrome的開發者工具的既視感！是否是一會兒就對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開始，仍是站在巨人的肩上比較好。這是我在主題上進行的修改，不過牽一髮動全身，修改需謹慎：

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

查找解決方案的時候，發現這個功能之前是默認開啓的，後來取消了，感受很不自在。我以爲大多數人都用過Sublime，它的一些好的作法應該保留，這樣用戶不會產生太大抵觸心理。不過ST3也是把不少ST2默認開啓的功能改成手動開啓，也是煩。

修改文件樹字體大小

習慣可能大字了。在Sublime是經過 User Setting 裏添加 JSON 信息便可。

經過開發者工具，找到定義文件樹的標籤和樣式定義，能夠看到是在style.css文件裏的#project-files-container a （注意，我安裝的文件樹的插件，因此和你所找到的會不同）：

點擊style.css，進入開發者工具的 Source 面板，右鍵Reveal in navigator，能夠看到文件所在目錄。

找到後打開編輯，保存重啓便可。