原文網(wǎng)址鏈接：如何優(yōu)雅地使用Sublime Text

Sublime Text：一款具有代碼高亮、語(yǔ)法提示、自動(dòng)完成且反應(yīng)快速的編輯器軟件，不僅具有華麗的界面，還支持插件擴(kuò)展機(jī)制，用她來(lái)寫代碼，絕對(duì)是一種享受。相比于難于上手的Vim，浮腫沉重的Eclipse，VS，即便體積輕巧迅速啟動(dòng)的Editplus、Notepad++，在SublimeText面前大略顯失色，無(wú)疑這款性感無(wú)比的編輯器是Coding和Writing最佳的選擇，沒(méi)有之一。

如何優(yōu)雅地使用Sublime Text之目錄： Sublime Text 2和3的對(duì)比Sublime Text 3安裝插件Sublime Text 3插件推薦定制屬于自己的快捷鍵Sublime不可不知的實(shí)用技巧定制屬于自己的個(gè)性化主題Sublime錦上添花些許設(shè)置寫在一路更來(lái)的結(jié)語(yǔ)

Sublime Text 2和3的對(duì)比
相比于2，Sublime Text 3就秒啟動(dòng)一項(xiàng)，就壓倒性地勝利了。因此在之后的敘述中都以Sublime Text 3為主角。并且3一直在不斷的完善更新，具體的差異可參看Sublime Blog.簡(jiǎn)單的說(shuō)：

ST3支持在項(xiàng)目目錄里面尋找變量提供了對(duì)標(biāo)簽頁(yè)更好地支持（更多的命令和快捷鍵）加快了程序運(yùn)行的速度更新了API，使用Python3.3

強(qiáng)烈推薦朋友們使用3! 唯快不破，不解釋。

優(yōu)雅使用Sublime Text，插件則是不可缺少的存在；而插件的備份就顯得非常的重要（譬如：各平臺(tái)同步；更換系統(tǒng)/電腦，迅速使用已安裝的插件）。這事兒也很簡(jiǎn)單，只需將Packages（Preferences > Browse Packages）中內(nèi)容拷貝一份，同步云端即可；至于存儲(chǔ)何處，云盤，Github，皆無(wú)不可；譬如先前有存一份于sublime_packages，每有所需只要 Down 下來(lái)，替換掉原Packages下內(nèi)容就好。

Sublime Text 3安裝插件
Sublime Text的強(qiáng)大就是她擁有強(qiáng)大的課可擴(kuò)展性。您可根據(jù)自己的需要安裝不同的插件；這使得她變的無(wú)比強(qiáng)大的同時(shí)又不失輕便。

插件安裝方式一：直接安裝：

安裝Sublime text 3插件很方便，可以直接下載安裝包解壓縮到Packages目錄（菜單->preferences->packages）。

插件安裝方式二：使用Package Control組件安裝：

按?Ctrl+`?調(diào)出console（注：安裝有QQ輸入法的這個(gè)快捷鍵會(huì)有沖突的，輸入法屬性設(shè)置-輸入法管理-取消熱鍵切換至QQ拼音）粘貼以下代碼到底部命令行并回車：

1

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

重啟Sublime Text 3。如果在Perferences->package settings中看到package control這一項(xiàng)，則安裝成功。按下Ctrl+Shift+P調(diào)出命令面板輸入install 調(diào)出 Install Package 選項(xiàng)并回車，然后在列表中選中要安裝的插件。

PS：國(guó)內(nèi)使用SublimeText3，經(jīng)?？赡苡龅綗o(wú)法安裝可用插件問(wèn)題，可remove掉Package Control重新安裝下；如遇到連Package Control也無(wú)法安裝，則可以在別處拷貝一份關(guān)于Package Control的文件－(Package Control.sublime-package)存放于Installed Packages目錄之下即可。

如果如上述操作，還是不能正確安裝，并且在 sublime 的 console 安裝 package control 出現(xiàn)?275309?錯(cuò)誤，那么去打開?Preferences->Settings?找到?ignored_packages?配置選項(xiàng)，刪除其中對(duì) Package Control 的約束即可(update@16-12-06)。

Sublime Text 3插件推薦
無(wú)插件，不神器！根據(jù)自己的需要定制屬于自己的強(qiáng)大插件集；下面是一些常用的推薦。
Sublime Text3插件：增強(qiáng)篇
20個(gè)強(qiáng)大的SublimeText插件
作為在移動(dòng)端舊游之后，又Web端新游的自己，墻裂推薦以下這么幾款插件：

MarkDown Editing
SublimeText不僅僅是能夠查看和編輯 Markdown 文件，但它會(huì)視它們?yōu)楦袷胶茉愀獾募兾谋?。這個(gè)插件通過(guò)適當(dāng)?shù)念伾吡梁推渌δ軄?lái)更好地完成這些任務(wù)。關(guān)于如何在SublimeText下高效些東西可參見文章：sublime text 2(3)下的Markdown寫作?抑或是前段時(shí)間寫下的追尋高效工作的一路折騰㈡

SideBarFolders
打開的文件夾都太多了? 來(lái)用這個(gè)來(lái)管理文件夾，世界原來(lái)也可以這么美好。??????????
SideBarFolders

微注：如何使用 Sublime 快速切換項(xiàng)目？?使用 SideBarFolders 插件的朋友們，近期是否也發(fā)現(xiàn)這插件可能無(wú)法正常使用了？(至少無(wú)法重新 install 使用)。不過(guò)，沒(méi)關(guān)系，Sublime Text 本身就提供了多項(xiàng)目管理(包括快速切換)的功能，即 ToolBar 的?Project；只須將當(dāng)前項(xiàng)目，作為 Project 保存在本地(Project => Save Project As..)，那么即可通過(guò)?Command + Ctrl + P?( windows 是 Ctrl + Alt + P)來(lái)快速切換項(xiàng)目了，還能編輯，關(guān)閉，Clear，Add Floder to Project等等功能；切換項(xiàng)目之間，還能保留與之對(duì)應(yīng)的項(xiàng)目所打開的標(biāo)簽，實(shí)在很好；具體可參見：Projects in Sublime Text – Saving, Switching, Etc?(update@17-02-24)。

Sublime Terminal
這個(gè)插件可以讓你在Sublime中直接使用終端打開你的項(xiàng)目文件夾，并支持使用快捷鍵。

ColorPicker
通常，如果你想使用一個(gè)顏色選擇器則可能打開 Photoshop 或 GIMP。而在 Sublime Text 中，你可以使用內(nèi)置的顏色選擇器。安裝完成后，只要按下Ctrl / Cmd + Shift + C 快捷鍵。

SublimeREPL
這可能是對(duì)程序員很有用的插件。SublimeREPL 允許你在 Sublime Text 中運(yùn)行各種語(yǔ)言（NodeJS ， Python，Ruby， Scala 和 Haskell 等等）。

Ctags插件
有童鞋抱怨Sublime Text不能支持函數(shù)的跳轉(zhuǎn)（比如像Eclipse那樣，按住Control點(diǎn)擊該方法或者對(duì)象，即可跳轉(zhuǎn)到定義的地方； Alt+←即可回到原處）。其實(shí)Sublime Text也可以借助插件實(shí)現(xiàn)之（當(dāng)然，有些情況下:Can not find defination）畢竟這個(gè)也是借助正則來(lái)匹配完成的。因此這個(gè)也就要求代碼很規(guī)范。這個(gè)插件相對(duì)來(lái)講會(huì)有些麻煩，具體的可以參見:Sublime Text ctags 的配置.

Update @2016-11: 在最新的3124版本中，Sublime已經(jīng)注入了函數(shù)Show Definition功能————which will show where a symbol is defined when hovering over it with the mouse；具體可參見Sublime Text 3 Build 3124。如此一來(lái)，Ctags 插件就顯得很雞肋了，而且它的配置辣么麻煩。

SublimeLinter插件
SublimeLinter 是前端編碼利器——Sublime Text?的一款插件，用于高亮提示用戶編寫的代碼中存在的不規(guī)范和錯(cuò)誤的寫法，支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多種開發(fā)語(yǔ)言。這篇文章介紹如何在 Windows 中配置 SublimeLinter 進(jìn)行 JS & CSS 校驗(yàn)。
比如寫例如像lua這樣的弱語(yǔ)言腳本代碼，有這個(gè)可以規(guī)避掉很多不該有的低級(jí)錯(cuò)誤吧？當(dāng)然這也需要你SublimeLinter安裝完畢之后再安裝一個(gè)SublimeLinter-lua即可。具體的使用可以參見：借助 SublimeLinter 編寫高質(zhì)量的 JavaScript & CSS 代碼

SideBarEnhancements插件
SideBarEnhancements是一款很實(shí)用的右鍵菜單增強(qiáng)插件；在安裝該插件前，在Sublime Text左側(cè)FOLDERS欄中點(diǎn)擊右鍵，只有寥寥幾個(gè)簡(jiǎn)單的功能；安裝了就相當(dāng)于給其豐了大胸一般。????????

更強(qiáng)大的是，該插件還能讓我們自定義快捷鍵呼出某個(gè)瀏覽器以預(yù)覽頁(yè)面！這樣就不用到項(xiàng)目目錄下尋找和拖動(dòng)到特定瀏覽器中預(yù)覽了。
安裝此插件后，點(diǎn)擊菜單欄的preferences->package setting->side bar->Key Building-User，鍵入以下代碼：

1234567891011

[ { "keys": ["ctrl+shift+c"], "command": "copy_path" }, //chrome { "keys": ["f2"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:\Users\jeffj\AppData\Local\Google\Chrome\Application\chrome.exe", "extensions":".*" } }]

這里設(shè)置按Ctrl+Shift+C復(fù)制文件路徑，按F2即可在Chrome瀏覽器預(yù)覽效果(如果需要的話，也可以根據(jù)自己的需要為Firefox，Safari，IE，Opera等加上)，當(dāng)然你也可以自己定義喜歡的快捷鍵，最后注意代碼中的瀏覽器路徑要以自己電腦里的文件路徑為準(zhǔn)。

HTML-CSS-JS Prettify
一款集成了格式化（美化）html、css、js三種文件類型的插件，即便html,js寫在PHP文件之內(nèi)。插件依賴于nodejs，因此需要事先安裝nodejs，然后才可以正常運(yùn)行。插件安裝完成后，快捷鍵ctrl+shift+H完成當(dāng)前文件的美化操作。插件對(duì)html、css文件的美化不是非常滿意，但還可以，后面將說(shuō)明如何修改css美化腳本。本人用起來(lái)超級(jí)爽的，鑒于篇幅，就不贅述，可以參見這篇介紹。

CSScomb CSS屬性排序:
有時(shí)候看看自己寫的CSS文件，會(huì)不會(huì)覺(jué)得屬性很亂查找不易維護(hù)難？CSScomb可以按照一定的CSS屬性排序規(guī)則，將雜亂無(wú)章的CSS屬性進(jìn)行重新排序。選中要排序的CSS代碼，按Ctrl+Shift+C，即可對(duì)CSS屬性重新排序了，代碼從此簡(jiǎn)潔有序易維護(hù)，如果不款選代碼則插件將排序文件中所有的CSS屬性。當(dāng)然，可以自己自定義CSS屬性排序規(guī)則，打開插件目錄里的CSScomb.sublime-settings文件，更改里面的CSS屬性順序就行了。因?yàn)檫@個(gè)插件使用PHP寫的，要使他工作需要在環(huán)境變量中添加PHP的路徑，具體請(qǐng)看github上的說(shuō)明。

SublimeTmpl 快速生成文件模板
一直都很奇怪為什么sublime text 3沒(méi)有新建文件模板的功能，像html頭部的DTD聲明每次都要復(fù)制粘貼。用SublimeTmpl這款插件終于可以解脫了，SublimeTmpl能新建html、css、javascript、php、python、ruby六種類型的文件模板，所有的文件模板都在插件目錄的templates文件夾里，可以自定義編輯文件模板。????????+
SublimeTmpl默認(rèn)的快捷鍵:

123456

ctrl+alt+h htmlctrl+alt+j javascriptctrl+alt+c cssctrl+alt+p phpctrl+alt+r rubyctrl+alt+shift+p python

如果想要新建其他類型的文件模板的話，先自定義文件模板方在templates文件夾里，再分別打開Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings這四個(gè)文件照著里面的格式自定義想要新建的類型，這里就詳細(xì)介紹了，請(qǐng)各位自己折騰哈~

Javascript-API-Completions:
支持Javascript、JQuery、Twitter Bootstrap框架、HTML5標(biāo)簽屬性提示的插件，是少數(shù)支持sublime text 3的后綴提示的插件，HTML5標(biāo)簽提示sublime text3自帶，不過(guò)JQuery提示還是很有用處的，也可設(shè)置要提示的語(yǔ)言。
sublime-jq-plugin

SFTP：快速編輯遠(yuǎn)程服務(wù)器文件
在Win下用Xftp?和?WinScp，被這種需要切換點(diǎn)擊or F5刷新的手動(dòng)操作蛋疼到無(wú)語(yǔ)；故此一遇見這SFTP，頓覺(jué)這世界都美好了許多。當(dāng)然Sublime下面也有些其他同步插件，比如FtpSnyc，但是配置起來(lái)的錯(cuò)誤提示一點(diǎn)都不人性化，就毫不留情的舍棄了。Sublime下有SFTP，只要Ctrl+S即可同步本地到服務(wù)器，妥妥的爽歪歪有么有？如何配置，請(qǐng)參見在 Sublime Text中使用 SFTP 插件快速編輯遠(yuǎn)程服務(wù)器文件;如欲使用FtpSync可參見Sublime使用及FtpSync遠(yuǎn)程同步；大道至簡(jiǎn)，因簡(jiǎn)而悅；開心壘碼，值得折騰。

WakaTime?– 記錄你的Code時(shí)間;
WakaTime可以做到精確地統(tǒng)計(jì)到你花在某個(gè)項(xiàng)目上的時(shí)間;WakaTime針對(duì)不同的IDE，擁有不同的插件，在Sublime上安裝著插件，就能統(tǒng)計(jì)到我使用Sublime進(jìn)行的所有項(xiàng)目的行為。可以高效管理和知曉自己code時(shí)間；并且，統(tǒng)計(jì)完善, 適合發(fā)朋友圈裝逼（如果你喜歡的話）~

Waka的基本設(shè)計(jì)和rescuetime類似。每個(gè)人注冊(cè)完將獲取一個(gè)key，裝一個(gè)客戶端，把key輸進(jìn)去（登陸是同一個(gè)道理），然后它就把本地的所有行為帶個(gè)key扔給服務(wù)器來(lái)統(tǒng)計(jì)，一段時(shí)間之后給你個(gè)報(bào)表。不過(guò)Waka做的真的很精準(zhǔn)，精確到每一個(gè)文件用了多少秒，每一種語(yǔ)言用了多少時(shí)間。

WakaTime

安裝和使用都很簡(jiǎn)單，請(qǐng)參見這里。另外一篇比較詳細(xì)的文章時(shí)間都去哪了?用RescueTime和WakaTime來(lái)記錄你的時(shí)間,對(duì)RescueTime和WakaTime有一個(gè)更為詳細(xì)的敘述，可以一讀。

Doc?Blockr: 代碼塊注釋
可以快速的對(duì)函數(shù)進(jìn)行注釋。保持代碼規(guī)范。支持多種語(yǔ)言,有 JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Apex, Groovy, Objective C, C, C++ and Rust.

/*:回車創(chuàng)建一個(gè)代碼塊注釋/**:回車在自動(dòng)查找函數(shù)中的形參等等。

它會(huì)生成 JSDoc 格式的注釋。如果你從沒(méi)有使用過(guò)類似的工具，DocBlockr 會(huì)讓你覺(jué)得以前沒(méi)有它是如何寫代碼的。幫助你創(chuàng)造你的代碼注釋，通過(guò)解析功能，參數(shù)，變量，并且自動(dòng)添加基本項(xiàng)目；如果你愿意其更為便捷，不妨再結(jié)合AutoHotKey,高效注釋，由此開啟。

sublime-text-git: Git 版本控制
可視化的操作：幫助你與你的Git repo協(xié)議進(jìn)行交互。它支持很多命令像init,push, pull, branch, stash,等等。使用它當(dāng)然提前需要安裝 Git，并做好響應(yīng)的配置；對(duì)于這個(gè)插件，不妨看下這篇文章?Using Git Inside of Sublime Text to Improve Workflow，相信她的伴隨不會(huì)讓你失望的。??????????

advancedNewFile： 快速創(chuàng)建文件
當(dāng)我們?cè)?Sublime Text 編輯器里我們可以通過(guò)快捷鍵command+n(win:?ctrl+n),來(lái)新建一個(gè)文件，然后command+s(Win:ctrl+s)進(jìn)行彈出保存框，填寫文件名進(jìn)行保存。還是老問(wèn)題，麻煩??！我們接下來(lái)就通過(guò)安裝advancedNewFile插件來(lái)提升我們?cè)赟ublime Text編輯器下的創(chuàng)建文件速度。????????

關(guān)乎其使用，安裝完成之后，運(yùn)用快捷鍵command+alt+n(win:?ctrl+alt+n)
，Sublime Text底部會(huì)彈出輸入框；我們只需在這個(gè)輸入框里輸入我們需要新建的文件名回車即可（我們甚至可以帶路徑,譬如:src/components/perfect.vue;這就會(huì)在當(dāng)前項(xiàng)目目錄下，建立該文件；需要注意的是這路徑前面不可加 ‘/‘, 這會(huì)使得建立的路徑成為用戶目錄，而非改項(xiàng)目目錄）。默認(rèn)情況下文件會(huì)存儲(chǔ)在當(dāng)前目錄，如果當(dāng)前沒(méi)有目錄，會(huì)存儲(chǔ)在用戶的家目錄。

TrailingSpaces: 檢測(cè)并一鍵去除代碼中多余的空格
這款插件本身倒沒(méi)什么。但是如果你寫前端，并處在當(dāng)下這個(gè)時(shí)代，她就很有用（話說(shuō)，Eslint 等工程限制級(jí)工具必須使用吧，那么項(xiàng)目對(duì)于空格的約定肯定是有必要的，但也會(huì)令你頭疼吧？那么這款插件的作用就體現(xiàn)出來(lái)了）她可以自動(dòng)將多余的空格標(biāo)紅，以示提醒。當(dāng)然，如果你想一鍵摒除之，這也很好辦，加入一點(diǎn)配置即可：在 Preferences / Key Bindings – User加上如下代碼即可（數(shù)組內(nèi)部，當(dāng)然快捷鍵可自行約定，我這里用的是?ctrl+shift+d?）；（?????????? For Front-End）

1

{ "keys": ["ctrl+shift+d"], "command": "delete_trailing_spaces" }

---

剩下些許其他的可以按需安裝的插件，比如：

ConvertToUTF8?支持 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等編碼的插件Bracket Highlighter?用于匹配括號(hào)，引號(hào)和html標(biāo)簽。對(duì)于很長(zhǎng)的代碼很有用。安裝好之后，不需要設(shè)置插件會(huì)自動(dòng)生效DocBlockr?可以自動(dòng)生成PHPDoc風(fēng)格的注釋。它支持的語(yǔ)言有Javascript, PHP, ActionScript, CoffeeScript, Java, Objective C, C, C++Emmet(Zen Coding)快速生成HTML代碼段的插件，強(qiáng)大到無(wú)與倫比:可以超快速編寫HTML/CSS/JS，當(dāng)然這個(gè)插件還支持多種編譯環(huán)境，如常見的：Eclipse/Aptana、Coda、Notepad++、Adobe Dreamweaver、TextMate等，web開發(fā)必備！??！。??????????jsFormat?格式化js代碼，懂者自懂；強(qiáng)迫癥Coder必備！默認(rèn)快捷鍵Ctrl+Alt+F。phpFormat?格式化php代碼，懂者自懂；強(qiáng)迫癥Coder必備！CSS Compact Expand CSS屬性展開收縮:寫CSS的盆友，喜歡將其寫多行還是一行(個(gè)人喜歡將其格式化為多行)？如果閱讀別人的代碼不符合自己的習(xí)慣，可以用CSS Compact Expand這個(gè)插件將CSS格式化一下，按 Ctrl+Alt+[ 收縮CSS代碼為一行顯示，按 Ctrl+Alt+] 展開CSS代碼為多行顯示；強(qiáng)迫癥Coder必備！。Autoprefixer插件：這是一款CSS3私有前綴自動(dòng)補(bǔ)全插件；該插件使用CanIUse資料庫(kù)（當(dāng)然，SublimeText自然也有CanIUse這個(gè)插件咯），能精準(zhǔn)判斷哪些屬性需要什么前綴，與CssComb插件一樣，該插件也需要系統(tǒng)已安裝Node.js環(huán)境；使用方法：在輸入CSS3屬性后（冒號(hào)前）按Tab鍵即可。YUI Compressor：壓縮JS和CSS文件，按F7鍵后，若壓縮當(dāng)前文件（demo.js），則壓縮后的文件（demo.min.js）保存在該文件的同級(jí)目錄，需要安裝java的JDK。使用方法：YUI CompressorClickableURLs：可點(diǎn)擊的URL
使用小插件ClickableURLs可以讓文件中的URL能夠點(diǎn)擊。EncodingHelper：編碼眾多，比較豐富。安裝后，在右下角的UTT-8右鍵可以將其他編碼轉(zhuǎn)換成UTF-8。WordCount：可以實(shí)時(shí)顯示當(dāng)前文件的字?jǐn)?shù)。安裝后，后下角多出字?jǐn)?shù)。SyncedSideBar: 每次打開文件，側(cè)邊欄都會(huì)同步顯示該文件所在目錄樹中的位置(如果打開的文件是目錄樹的子集，還能將目錄樹自動(dòng)展開，真是愛之不已，挺有用的一款插件)。??????????AutoFileName：快捷輸入文件名，文件路徑自動(dòng)提示的。自動(dòng)完成文件名的輸入，如圖片選取，輸入”/”即可看到相對(duì)于本項(xiàng)目文件夾的其他文件。????????Vue Syntax Highlight: Vue(*.vue)高亮插件；于前端而言，使用Vue框架開發(fā)，是一個(gè)很酷爽的存在，那么此插件也就很有必要擁有；同時(shí)Jade,?SASS等插件也是很有擁有的必要，誰(shuí)用誰(shuí)知道(說(shuō)到用vue, 這vue-cli就蠻有使用的必要了( Webpack, Eslint, Test等都配置完善，十分貼心); 而寫Js代碼，于稍大項(xiàng)目 Eslint 就很有使用必要，而 sublime 在針對(duì)使用 Eslint 的?*.vue文件，目測(cè)還沒(méi)有很好格式化插件，坐等誕生