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

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

詳細(xì)設(shè)置 && 20+插件

為什么要選擇Sublime Text3？

Sublime Text3 自動(dòng)保存，打開圖片

跨平臺(tái)啟動(dòng)快，多行選擇。

插件，簡(jiǎn)直選不過來。

代碼片段

VIM兼容模式

File：文檔相關(guān)，新建文件,打開文件或文件夾等。

Edit：文件編輯相關(guān)，復(fù)制，剪切等（CVS大法好）。除此之外還有一些強(qiáng)大的功能。

Selection：選擇相關(guān)，幫助選擇代碼。

Find：查找替換相關(guān)。這個(gè)和其它編輯器區(qū)別好像不大。

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

View：對(duì)Sublime_Text編輯器本身的一些配置。

SideBar:開啟側(cè)邊欄Ctrl+k,b

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

Goto：快捷導(dǎo)航：下面介紹。Goto Anything

tools:工具，一些命令。

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

Project: 項(xiàng)目相關(guān)，用的少。

Preferences：對(duì)于sublime_text進(jìn)行一些個(gè)性化定值。

Help：如同名字。注冊(cè)在這里

line相關(guān)：

Ctrl+Shift+D：復(fù)制當(dāng)前行

Ctrl+Shift+K：刪除當(dāng)前行

Ctrl+j 合并一行

Ctrl+Enter：在當(dāng)前行下添加新行。After

Ctrl+Shift+Enter：在當(dāng)前行上添加新行。Before

Comment注釋：

Ctrl+/：行注釋。

Ctrl+Shift+/：塊注釋

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

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

Shift+Alt+1，2，3，4，5：開啟對(duì)應(yīng)數(shù)字的多欄編輯

Ctrl+P: 查找項(xiàng)目中的文件：

直接輸入名稱：在不同文件中切換，支持級(jí)聯(lián)的目錄模式

:：+ 行號(hào)：Ctrl+G 定位到具體的行。

@：+ 符號(hào)：Ctrl+R定位到具體的符號(hào)，例如：JS函數(shù)名，CSS選擇器名。

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

Ctrl+D：選中當(dāng)前光標(biāo)所在位置的單詞。連續(xù)使用時(shí)，進(jìn)行多光標(biāo)選擇，選中下一個(gè)同名單詞。

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

Ctrl+L：選擇當(dāng)前光標(biāo)所在位置的行。連續(xù)使用時(shí)，繼續(xù)選中下一行。

Ctrl+Shift+L：在多行選中后，在所有選中的行后產(chǎn)生游標(biāo)。

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

Shift+鼠標(biāo)右鍵：向下拖動(dòng)，產(chǎn)生多個(gè)光標(biāo)。

使用 Ctrl+`調(diào)出console面板輸入sublime.log_commands(True)，可以得到當(dāng)前使用的命令面板進(jìn)行設(shè)置的值。方便進(jìn)行快捷鍵的綁定。

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

Settings-User：個(gè)人對(duì)于sublime_text的定制。使用JSON格式，會(huì)直接覆蓋掉Settings-Default默認(rèn)設(shè)置中的內(nèi)容。

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

key - Bindings-User：個(gè)人對(duì)于快捷鍵的設(shè)置。同樣會(huì)覆蓋默認(rèn)的設(shè)置。例如：

//自動(dòng)改變縮進(jìn)格式
    { "keys": ["shift+tab"], "command": "reindent","args":{"single_line":false} }

tools:工具下的Build System選擇新建一個(gè)選項(xiàng)后，進(jìn)行如下設(shè)置（注意后綴），保存到user目錄下：

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

而且選擇第一個(gè)auto， 修改內(nèi)容后按Ctrl+B，可以看到自動(dòng)打開了chrome并且是修改后的內(nèi)容。

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

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打開控制臺(tái)窗口，粘貼上面的代碼，回車，然后就是等待安裝了，需要一定的時(shí)間。安裝完成后重啟

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

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

推薦在安裝前，先去官方網(wǎng)站查看樣式。的樣式，以及設(shè)置方法,說明文檔。一般安裝成功后，會(huì)自動(dòng)彈出。

以Theme - Spacegray為例：

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

回車等待安裝就好，成功后會(huì)彈出一個(gè)使用設(shè)置的頁(yè)面，把其中的如下代碼拷貝到Settings-User，保存，你會(huì)發(fā)現(xiàn)，默認(rèn)的主題已經(jīng)變成了剛剛我們查看過的主題了。

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

當(dāng)然，你也可以通過菜單欄，進(jìn)行主題的選擇。會(huì)有相同的效果。它會(huì)自動(dòng)在Settings-User進(jìn)行設(shè)置。

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

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

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

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

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

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

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

需先安裝SublimeLinter。

需先安裝Node.JS及npm。

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

安裝成功后，重啟就可以測(cè)試代碼的風(fēng)格了。
當(dāng)然還可以自定義校驗(yàn)規(guī)則，在該目錄下使用Ctrl+Shift+N創(chuàng)建文件.jshintrc，在其中使用JSON格式配置校驗(yàn)風(fēng)格。
例如：

//建議使用===，不使用時(shí)會(huì)有提示。
{
  "eqeqeq":true
}

并且在左下角會(huì)有錯(cuò)誤提示。需要注意的是內(nèi)容有更改時(shí)，才會(huì)立即生效。
詳細(xì)自定義規(guī)則：自定義Hint校驗(yàn)

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

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

中文文檔：地址
前端開發(fā)必備！Emmet使用手冊(cè)

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

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

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

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

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

$.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");
});

該插件提供行數(shù)列高亮的各種配對(duì)的語法符號(hào)，顯示在行號(hào)上。效果如下：

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

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

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

默認(rèn)安裝的Sublime Text對(duì)CSS3的支持讓人抓狂，幀動(dòng)畫？別開玩笑了你只會(huì)看到一片白色的純文本一樣的代碼。

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

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

還是brackets的牛逼

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

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

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

效果如下：

使用方法: ctrl + shift + c，快捷鍵有沖突，需修改?？梢酝ㄟ^ctrl+shift+p：來搜索調(diào)用

當(dāng)在 Sublime Text 中編寫 markdown 文件時(shí)，在瀏覽器中打開全是亂碼，因?yàn)檫€沒有將 markdown 文件解析成相應(yīng)的 HTML.

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

配置：

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

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

直接按F6就可以打開了

不進(jìn)行這些配置的話，因?yàn)槲覀冊(cè)谇懊?strong>實(shí)現(xiàn)保存自動(dòng)刷新使用了一些操作，按ctrl+b,就會(huì)在該目錄下，創(chuàng)建一個(gè)同名的html文件。
選中該htnl文件，再次按ctrl+b可以達(dá)到同樣的預(yù)覽效果，不過還是F6簡(jiǎn)單不是嗎？

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

使用參考:點(diǎn)擊查看

CSS屬性排序 CSScomb 插件配置參數(shù)大全

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

IMESupport ，輸入法不跟隨時(shí)安裝

FileHeader ，自動(dòng)更新保存時(shí)間，文件模板

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

CSS Format ，CSS格式化

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

ConvertToUTF8，GBK編碼兼容

參考如下：

慕課網(wǎng)視頻：前端開發(fā)工具技巧介紹—Sublime篇

慕課網(wǎng)視頻：快樂的sublime編輯器

Sublime Text手冊(cè)：點(diǎn)擊查看

Github資源合集jikeytang/sublime-text

知乎Sublime Text專題點(diǎn)擊查看