前言：最近覺得webstorm實(shí)在是太吃內(nèi)存了，每次打開死慢，電腦散熱也不好，決心棄掉轉(zhuǎn)投sublime。但是要把sublime配置的順手真不是一時(shí)半會(huì)的事，接下來我就記錄一下我的配置過程，主要分為三步，就能讓sublime得心應(yīng)手。
-
安裝主題和插件
這里我們首先要做的第一件事是先安裝package control包管理器，有了它我們就能方便的下載和安裝各式插件和主題啦。
我用的是sublime text3 ，用2的同學(xué)請(qǐng)自行上官網(wǎng)查找代碼
ctrl+`(這個(gè)鍵是tab鍵上的那個(gè))打開控制臺(tái)窗口，將以下這段代碼粘貼進(jìn)去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)回車，等待一會(huì)關(guān)掉sublime重啟之后，使用ctrl+shift+p打開控制面板并輸入package,如果看到下面這種效果就說明成功了。
Package control安裝成功接下來可以先安裝主題，其實(shí)默認(rèn)主題也不錯(cuò)，但是作為一名代碼小怪人怎么會(huì)滿足這種配色呢，所以我們可以安轉(zhuǎn)主題，可以先去官網(wǎng)找找自己喜歡的主題,記下名字，回到sublime，還是ctrl+shift+p打開控制面板，輸入pcip（模糊查詢），第一個(gè)就是，英文不錯(cuò)的同學(xué)應(yīng)該能認(rèn)出來這就是安裝包的意思?；剀嚧_定，等一會(huì)彈窗，輸入你剛才記下的主題，回車，等一會(huì)有個(gè)彈窗里面有這樣一段代碼（不是下面這段，這里只是舉個(gè)例子），copy下來。
"color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme", "theme": "Spacegray Eighties.sublime-theme"打開頂部菜單欄的preference-Setting-user，將剛才復(fù)制的代碼粘貼進(jìn)去，保存，然后就搞定啦。這里只是舉個(gè)例子，
我用的是Theme -DarkMaterial,挺有科技感的，全屏之后是這樣的
material界面
安裝方法跟上面一樣，喜歡的話可以試著安裝一下。
接下來我們就可以安裝插件了。以下是幾個(gè)常用插件，跟安轉(zhuǎn)主題差不多，有的需要修改配置文件，有的不需要，這里就不細(xì)說了，只列一下，大家自己用package control 下載安裝吧。
- AdvancedNewFile : 快速新建文件
- sidebar Enbancemens : 增強(qiáng)側(cè)邊欄
- sublimelinter : 語法校驗(yàn)
- emmet : 快速編寫html/css
- git : 版本控制
- BracketHighlighter : 符號(hào)高亮
- ColorPicker : 使用取色器改變顏色
- markdown editing和markdown preview 實(shí)現(xiàn)編寫和預(yù)覽MD
- AutoFileName : 文件路徑自動(dòng)提示
- Terminal : 在sublime text 中直接打開命令行
- csscomb : css屬性排序
- Html-css-js prettify : html/css/js代碼格式化
當(dāng)然以上只是海量插件中的一小部分，每個(gè)人還是要根據(jù)自己的需要去安裝不同的插件。
-
安裝完插件就可以爽了嗎？還不行，我發(fā)現(xiàn)當(dāng)用sublime打開html文件在瀏覽器中預(yù)覽的時(shí)候，ajax請(qǐng)求無法發(fā)送接收。不像webstorm是打開了一個(gè)端口。所以我們想要不只是靜態(tài)html時(shí)，就需要進(jìn)行一番配置了。這里提供一個(gè)思路，把靜態(tài)文件的工作庫放在本地服務(wù)器下面。再到sublime里面配置一下預(yù)覽打開路徑就可以了。這里我用nodejs進(jìn)行演示（你們愛用啥用啥唄，php，java，Python，IIS。。）
-
首先當(dāng)然是下載nodejs了，關(guān)于怎么在windows下下載安裝nodejs請(qǐng)點(diǎn)擊這里
安裝配置好之后，在你的工作庫里面新建一個(gè)文件夾叫做server。由于我是把E盤當(dāng)做工作庫，那我就直接在新建一個(gè)文件夾E:/server(此server文件夾我已經(jīng)上傳到github，大家可以下載修改使用，里面還包括了之后說到的bat程序。),
進(jìn)入此文件夾，編寫三個(gè)js文件
app.js——nodejs主程序入口var http = require("http"); var url = require("url"); var router = require("./router").router; var port = 8000; var server = http.createServer(function(request,response){ var pathname = url.parse(request.url).pathname; router(pathname,request,response); }); server.listen(port); console.log("Server running at :localhost://"+port);引入各種依賴模塊,創(chuàng)建一個(gè)服務(wù)器并監(jiān)聽8000端口。把http請(qǐng)求路徑，以及request請(qǐng)求、response回復(fù)傳遞給route.js(處理路由)
route.js
var path = require("path"); var fs = require("fs"); var mime = require("./mime").types; function router (pathname, request, response) { if(pathname == "/"||pathname.substring(0,6) == "/index"){ pathname = "/index.html"; } var realPath = pathname; //這里要注意路徑一定要正確 fs.exists(realPath, function(exists) { if(!exists) { response.writeHead(404, {"Content-Type":"text/plain"}); response.write("404 not found"); response.end(); } else { fs.readFile(realPath, "binary", function(err, file) { if(err) { response.writeHead(500, {"Content-Type":"text/plain"}); response.end(err); } else { var ext = path.extname(realPath); ext = ext ? ext.slice(1):'unknown'; var contentType = mime[ext]||"text/plain"; response.writeHead(200,{"Content-Type":contentType}); response.write(file,"binary"); response.end(); } }) } }) }; exports.router = router;這里路由主要判斷請(qǐng)求路徑是否存在于本地，如果不存在就返回404 not found，否則返回文件。這里由于返回頭信息要給出文件類型，因此要加上一個(gè)mime.js映射表，由于我是把E盤整個(gè)盤當(dāng)做工作庫，因此，realPath = pathname，假如你是放在E:/workspace/下面的話，那就讓realpath = "/workspace"
搞定之后，cmd，打開server文件夾，輸入node app，運(yùn)行。如果控制臺(tái)輸出，Server running at :localhost://8000;就說明程序運(yùn)行成功。
在E:盤下面放一個(gè)index.html文件，到瀏覽器中輸入地址localhost:8000/回車你就能看到這個(gè)頁面出現(xiàn)在瀏覽器上了。至此本地靜態(tài)服務(wù)器已經(jīng)搭建好了，至于nodejs更復(fù)雜的功能就需要你我一起去探索了。
- 最后一步，設(shè)置sublime文件快捷鍵打開瀏覽器預(yù)覽
首先確保你安裝了之前提到的那些插件中的側(cè)邊欄增強(qiáng)工具插件——“SideBarEnhancements”。安裝完成之后，為sidebarenhance設(shè)置默認(rèn)打開瀏覽器
打開"Preference --> Package Settings --> Side Bar --> Settings User-User"。在打開的文件中添加
{ "default_browser": "chrome" //這些之中的一個(gè): firefox, aurora, chrome, canary, chromium, opera, safari }默認(rèn)瀏覽器可以是列表中的任意一個(gè)。這里我選擇的是chrome
下一步也是至關(guān)重要的一步，為sidebarenhancements添加默認(rèn)的localhost目錄。在側(cè)邊欄任意文檔上點(diǎn)擊鼠標(biāo)右鍵，選擇"project-edit priew urls";在彈出來的文件中添加以下內(nèi)容{ "E:/":{ "url_testing": "http://localhost:8000/", "url_production": "http://115.159.55.211:8000/" } }這里外面的"E:/"是你的項(xiàng)目在磁盤中的路徑，由于我的項(xiàng)目都是直接放在E盤下的，所以就直接是E:/了，"url_testing"代表你本地localhost地址，"url_production"為項(xiàng)目的線上地址，請(qǐng)根據(jù)具體情況修改。
最后一步就是，為瀏覽器綁定熱鍵了
在sulime 中打開"reference --> Package Settings --> Side Bar --> key Bindings-User"在打開的文件中添加如下內(nèi)容 -
```
[
{ "keys": ["ctrl+shift+c"], "command": "copy_path" },
//chrome
{ "keys": ["f1"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
"extensions":".*" //匹配任何文件類型
}
},
//firefox
{ "keys": ["f2"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe",
"extensions":".*"
}
},
//safari
{ "keys": ["f3"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files (x86)\\Safari\\safari.exe",
"extensions":".*"
}
},
//opera
{ "keys": ["f4"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "D:\\opera\\launcher.exe",
"extensions":".*"
}
},
{
"keys": ["alt+f1"],
"command": "side_bar_open_in_browser",
"args": {
"paths": [],
"type": "testing",
"browser": "chrome"
}
},
{
"keys": ["alt+f2"],
"command": "side_bar_open_in_browser",
"args": {
"paths": [],
"type": "testing",
"browser": "firefox"
}
},
{
"keys": ["alt+f3"],
"command": "side_bar_open_in_browser",
"args": {
"paths": [],
"type": "testing",
"browser": "safari"
}
}
]
```
key里面設(shè)置的是熱鍵和對(duì)應(yīng)的命令
這里我就拿chrome舉例，我分別設(shè)置了F1，和alt+F1。f1代表以某個(gè)程序打開此文件，application里面要填寫程序的正確路徑地址。
alt+f1則代表以瀏覽器打開此文件，browser里面填寫瀏覽器名，還記得之前我們配置的打開地址嗎？這里type：testing即是以當(dāng)時(shí)我們?cè)O(shè)置的地址作為前綴打開。
可能你已經(jīng)發(fā)現(xiàn)了問題，那就是如果要能生效，必須保持nodejs的那個(gè)app程序保持運(yùn)行，這樣在每次打開sublime編程之前都要開一次，有點(diǎn)麻煩是不。有個(gè)方法是，編寫一個(gè)bat程序，加入開機(jī)啟動(dòng)服務(wù)，讓每次開機(jī)之后就自動(dòng)啟動(dòng)這個(gè)node程序。
