摘要：效果如下配置方法參考下的配置方法完美支持提供了比默認更好的語法高亮，而且他完美支持。語法高亮默認安裝的對的支持讓人抓狂，幀動畫別開玩笑了你只會看到一片白色的純文本一樣的代碼。事實上不光，我建議用完全替代原來的來完成語法高亮。

文章轉載自本人的博客《三省吾身丶丶》點擊查看
喜歡的話請瘋狂的推薦吧！ ^_^
本文章會在本人有插件或者設置更新時，進行不定時更新
偷懶了，圖片地址直接設置的博客地址的，可能會掛掉。

詳細設置 && 20+插件

為什么要選擇Sublime Text3？

Sublime Text3 自動保存，打開圖片

跨平臺啟動快，多行選擇。

插件，簡直選不過來。

代碼片段

VIM兼容模式

File：文檔相關，新建文件,打開文件或文件夾等。

Edit：文件編輯相關，復制，剪切等（CVS大法好）。除此之外還有一些強大的功能。

Selection：選擇相關，幫助選擇代碼。

Find：查找替換相關。這個和其它編輯器區別好像不大。

Ctrl+F查找、Ctrl+H替換等。

View：對Sublime_Text編輯器本身的一些配置。

SideBar:開啟側邊欄Ctrl+k,b

Show console：打開控制臺窗口，安裝package control需要使用.

Goto：快捷導航：下面介紹。Goto Anything

tools:工具，一些命令。

new Snippet：自定義代碼片段，保存到user下

Project: 項目相關，用的少。

Preferences：對于sublime_text進行一些個性化定值。

Help：如同名字。注冊在這里

line相關：

Ctrl+Shift+D：復制當前行

Ctrl+Shift+K：刪除當前行

Ctrl+j 合并一行

Ctrl+Enter：在當前行下添加新行。After

Ctrl+Shift+Enter：在當前行上添加新行。Before

Comment注釋：

Ctrl+/：行注釋。

Ctrl+Shift+/：塊注釋

Ctrl+Shift+P：調用命令面板，快速查找，例如：改變語法模式等。

模糊匹配，可以減少對快捷鍵的記憶。

Shift+Alt+1，2，3，4，5：開啟對應數字的多欄編輯

Ctrl+P: 查找項目中的文件：

直接輸入名稱：在不同文件中切換，支持級聯的目錄模式

:：+ 行號：Ctrl+G 定位到具體的行。

@：+ 符號：Ctrl+R定位到具體的符號，例如：JS函數名，CSS選擇器名。

#：+ 關鍵字：Ctrl+;匹配到具體的匹配的關鍵字。主要是模糊匹配。

Ctrl+D：選中當前光標所在位置的單詞。連續使用時，進行多光標選擇，選中下一個同名單詞。

Ctrl+K：配合Ctrl+D可以跳過下一個同名單詞。

Ctrl+L：選擇當前光標所在位置的行。連續使用時，繼續選中下一行。

Ctrl+Shift+L：在多行選中后，在所有選中的行后產生游標。

Alt+F3：選中文檔中所有的同名單詞。

Shift+鼠標右鍵：向下拖動，產生多個光標。

使用 Ctrl+`調出console面板輸入sublime.log_commands(True)，可以得到當前使用的命令面板進行設置的值。方便進行快捷鍵的綁定。

下面這些都可以通過命令面板快捷查找

Settings-User：個人對于sublime_text的定制。使用JSON格式，會直接覆蓋掉Settings-Default默認設置中的內容。

// User/Preferences.sublime-settings
//我覺得自帶字體挺好的。
{
    "color_scheme": "Packages/User/SublimeLinter/Dawn (SL).tmTheme", //主題
    "draw_minimap_border": true, // 右側縮略圖邊框
    "font_size": 10, // 字體大小
    "highlight_line": true, // 當前行標亮
    "save_on_focus_lost": true, // 當前行標亮
    "theme": "Spacegray Eighties.sublime-theme", //主題相關
    "word_separators": "./()"":,.;<>~!@#$%^&*|+=[]{}`~?", // 雙擊選中中劃線
    "word_wrap": true, //自動換行
    "trim_trailing_white_space_on_save": true, //自動移除行尾多余空格
    "ensure_newline_at_eof_on_save": true, //文件末尾自動保留一個空行
    "disable_tab_abbreviations": true, //禁用 Emmet 的 tab 鍵功能（請使用 ctrl+e）
    "translate_tabs_to_spaces": true, //把代碼 tab 對齊轉換為空格對齊
    "tab_size": 4, //空格數
    "fade_fold_buttons": false, //顯示代碼塊的倒三角
    "bold_folder_labels": true, //側邊欄文件夾加粗
    "auto_find_in_selection": true //開啟選中范圍內搜索
}

key - Bindings-User：個人對于快捷鍵的設置。同樣會覆蓋默認的設置。例如：

//自動改變縮進格式
    { "keys": ["shift+tab"], "command": "reindent","args":{"single_line":false} }

tools:工具下的Build System選擇新建一個選項后，進行如下設置（注意后綴），保存到user目錄下：

//這樣設置。。地址是你的瀏覽器位置
{
  "cmd" :["C:Program Files (x86)GoogleChromeApplicationchrome.exe","$file"],
  "selector":["text.html"]
}

而且選擇第一個auto， 修改內容后按Ctrl+B，可以看到自動打開了chrome并且是修改后的內容。

這里我使用的是sublime_text3， 2的話上官網查詢代碼。
首先打開package control的官方網站。
復制下面這一段代碼:

import urllib.request,os,hashlib; h = "2915d1851351e5ee549c20394736b442" + "8bc59f460fa1548d1514676163dafc88"; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( "http://packagecontrol.io/" + pf.replace(" ", "%20")).read(); dh = hashlib.sha256(by).hexdigest(); print("Error validating download (got %s instead of %s), please try manual install" % (dh, h)) if dh != h else open(os.path.join( ipp, pf), "wb" ).write(by)

在上面說的View-->Show console打開控制臺窗口，粘貼上面的代碼，回車，然后就是等待安裝了，需要一定的時間。安裝完成后重啟

使用Ctrl+Shift+P,打開控制面板，輸入PC，效果如下，說明安裝成功了。

按照上面的步驟，打開圖片中的安裝插件就行了，其實默認配色真的挺好看的

推薦在安裝前，先去官方網站查看樣式。的樣式，以及設置方法,說明文檔。一般安裝成功后，會自動彈出。

以Theme - Spacegray為例：

先使用Ctrl+Shift+P 輸入PCI，回車選擇 Install Package 。需要等待一會加載時間，輸入Theme-Spacegray。其實不輸入完也會模糊匹配出來的。

回車等待安裝就好，成功后會彈出一個使用設置的頁面，把其中的如下代碼拷貝到Settings-User，保存，你會發現，默認的主題已經變成了剛剛我們查看過的主題了。

"color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme",  
"theme": "Spacegray Eighties.sublime-theme"

當然，你也可以通過菜單欄，進行主題的選擇。會有相同的效果。它會自動在Settings-User進行設置。

假設有文件夾file。我們正在輸入代碼，又想在新的子目錄下新建html文件的話用傳統方式得很多步，新建目錄，新建文件，保存等等等。

但是有了該插件之后，事情就變得簡單了許多，只需要按下Ctrl+Shift+N，輸入文件夾以及文件名，你就會看到如下效果:（回車，你會發現已經子目錄下的文件已經新建完成了！）

安裝成功后輸入Ctrl+Shift+P打開命令面板，輸入Fetch，可以看到以下：

選擇file可以看到設置的文件。選擇下載
配合剛剛上面的插件使用，簡直完美..

必裝插件，無比強大，就不過多介紹了。可以在瀏覽器中打開，還可以配置不同文件的打開方式。
單單下面這一個功能就必須安裝了！快捷在不同瀏覽器打開：參考：SideBarEnhancements快捷鍵設置

可選SyncedSideBar：每次打開文件，側邊欄都會同步顯示該文件所在目錄樹中的位置

可以快速的對函數進行注釋。保存代碼規范
支持多種語言。（個人覺得brackets的這個插件比Sublime Text做得好多了。）
/*:回車創建一個代碼塊注釋
/**:回車在自動查找函數中的形參等等。
它會生成 JSDoc 格式的注釋。如果你從沒有使用過類似的工具，DocBlockr 會讓你覺得以前沒有它是如何寫代碼的。幫助你創造你的代碼注釋，通過解析功能，參數，變量，并且自動添加基本項目。

需先安裝SublimeLinter。

需先安裝Node.JS及npm。

在cmd輸入 npm install -g jshint，等待安裝成功就好了。

安裝成功后，重啟就可以測試代碼的風格了。
當然還可以自定義校驗規則，在該目錄下使用Ctrl+Shift+N創建文件.jshintrc，在其中使用JSON格式配置校驗風格。
例如：

//建議使用===，不使用時會有提示。
{
  "eqeqeq":true
}

并且在左下角會有錯誤提示。需要注意的是內容有更改時，才會立即生效。
詳細自定義規則：自定義Hint校驗

可視化的操作：幫助你與你的Git repo協議進行交互。它支持很多命令像init, push, pull, branch, stash,等等。了解更多關于你在Sublime Text里面究竟能使用哪些Git功能，以提高您的工作流程。
使用參考

GitGutter:
Sublime Text 有了 Git 插件之后，GitGutter 更好的幫助開發者查看文件之前的改動和差異，提升開發效率。

中文文檔：地址
前端開發必備！Emmet使用手冊

JsFormat 基于 JS Beautifier，可以幫助你自動格式化 JavaScript 和 JSON。這對于閱讀代碼是非常有用的。

快捷鍵：Ctrl + Alt + f 或者，你也可以使用菜單欄。

可定制喜歡的格式：在 SublimeText 3 中 Preferences -> Package Settings -> JsFormat -> Settings - Default 可以調整這些配置。

我知道目前在很多地方 jQuery 看似已經落伍了，但是如果你不是建立一個交互性很強的網站或者你只是想在已有應用上添加功能，它仍然是非常有用的。

比如，輸入 $.a就可以讓我選擇$.ajax()，然后自動擴展成以下代碼：

$.ajax({
  url: "/path/to/file",
  type: "default GET (Other values: POST)",
  dataType: "default: Intelligent Guess (Other values: xml, json, script, or html)",
  data: {param1: "value1"},
})
.done(function() {
  console.log("success");
})
.fail(function() {
  console.log("error");
})
.always(function() {
  console.log("complete");
});

該插件提供行數列高亮的各種配對的語法符號，顯示在行號上。效果如下：

配置方法參考sublime text3下BracketHighlighter的配置方法

JavaScript Next 提供了比默認JavaScript Package更好的語法高亮，而且他完美支持ECMAScript 6。

建議完全使用 JavaScript Next代替JavaScript Package。

默認安裝的Sublime Text對CSS3的支持讓人抓狂，幀動畫？別開玩笑了你只會看到一片白色的純文本一樣的代碼。

事實上不光CSS3，我建議用CSS3 Package完全替代原來的CSS Package來完成語法高亮。把原來的禁用了吧

這個插件我等了很久了（在使用breakets的時候發現 的，好用到爆），我最早用Sublime Text寫CSS時候就在想“這堆顏色碼誰知道是什么顏色”。。

還是brackets的牛逼

Color Highlighter這個插件會檢測CSS文件中的顏色碼，不論是Hex碼或者RGB碼都能很好的顯示。

Color Highlighter能夠設置成用背景色或者邊框提示顏色，我一般在Settings里做這樣的設置：

{
  "ha_style": "filled",
  "icons": false
}

效果如下：

使用方法: ctrl + shift + c，快捷鍵有沖突，需修改。可以通過ctrl+shift+p：來搜索調用

當在 Sublime Text 中編寫 markdown 文件時，在瀏覽器中打開全是亂碼，因為還沒有將 markdown 文件解析成相應的 HTML.

這兩個插件的功能就是可以用瀏覽器瀏覽 Sublime Text 中編寫的 markdown文件。

配置：

打開 Preferences->Package Settings->Markdown Preview->Setting User 將下面這句話粘貼進去。

{
    // "瀏覽markdown的瀏覽器的路徑"
    "browser" : "C:Program Files (x86)GoogleChromeApplicationchrome.exe"
}
//打開Preferences->Key Binding User，添加下面一句話。
{ "keys": ["f6"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} },
//keys的值是以上面瀏覽器預覽markdown文件。

直接按F6就可以打開了

不進行這些配置的話，因為我們在前面實現保存自動刷新使用了一些操作，按ctrl+b,就會在該目錄下，創建一個同名的html文件。
選中該htnl文件，再次按ctrl+b可以達到同樣的預覽效果，不過還是F6簡單不是嗎？

這個直接安裝就可以用了，挺方便的。

使用參考:點擊查看

CSS屬性排序 CSScomb 插件配置參數大全

LiveStyle: 實時刷新雙向修改
win下沒有配置成功

IMESupport ，輸入法不跟隨時安裝

FileHeader ，自動更新保存時間，文件模板

Quote?HTML ，把HTML拼接成js插入字符串

CSS Format ，CSS格式化

AutoPrefixer ，瀏覽器私有屬性前綴補全 (Node.js依賴)

ConvertToUTF8，GBK編碼兼容

參考如下：

慕課網視頻：前端開發工具技巧介紹—Sublime篇

慕課網視頻：快樂的sublime編輯器

Sublime Text手冊：點擊查看

Github資源合集jikeytang/sublime-text

知乎Sublime Text專題點擊查看