前言：最近觉得webstorm实在是太吃内存了，每次打开死慢，电脑散热也不好，决心弃掉转投sublime。但是要把sublime配置的顺手真不是一时半会的事，接下来我就记录一下我的配置过程，主要分为三步，就能让sublime得心应手。
-
安装主题和插件
这里我们首先要做的第一件事是先安装package control包管理器，有了它我们就能方便的下载和安装各式插件和主题啦。
我用的是sublime text3 ，用2的同学请自行上官网查找代码
ctrl+`(这个键是tab键上的那个)打开控制台窗口，将以下这段代码粘贴进去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)回车，等待一会关掉sublime重启之后，使用ctrl+shift+p打开控制面板并输入package,如果看到下面这种效果就说明成功了。
Package control安装成功
接下来可以先安装主题，其实默认主题也不错，但是作为一名代码小怪人怎么会满足这种配色呢，所以我们可以安转主题，可以先去官网找找自己喜欢的主题,记下名字，回到sublime，还是ctrl+shift+p打开控制面板，输入pcip（模糊查询），第一个就是，英文不错的同学应该能认出来这就是安装包的意思。回车确定，等一会弹窗，输入你刚才记下的主题，回车，等一会有个弹窗里面有这样一段代码（不是下面这段，这里只是举个例子），copy下来。
"color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme", "theme": "Spacegray Eighties.sublime-theme"打开顶部菜单栏的preference-Setting-user，将刚才复制的代码粘贴进去，保存，然后就搞定啦。这里只是举个例子，
我用的是Theme -DarkMaterial,挺有科技感的，全屏之后是这样的
material界面
安装方法跟上面一样，喜欢的话可以试着安装一下。
接下来我们就可以安装插件了。以下是几个常用插件，跟安转主题差不多，有的需要修改配置文件，有的不需要，这里就不细说了，只列一下，大家自己用package control 下载安装吧。
- AdvancedNewFile : 快速新建文件
- sidebar Enbancemens : 增强侧边栏
- sublimelinter : 语法校验
- emmet : 快速编写html/css
- git : 版本控制
- BracketHighlighter : 符号高亮
- ColorPicker : 使用取色器改变颜色
- markdown editing和markdown preview 实现编写和预览MD
- AutoFileName : 文件路径自动提示
- Terminal : 在sublime text 中直接打开命令行
- csscomb : css属性排序
- Html-css-js prettify : html/css/js代码格式化
当然以上只是海量插件中的一小部分，每个人还是要根据自己的需要去安装不同的插件。
-
安装完插件就可以爽了吗？还不行，我发现当用sublime打开html文件在浏览器中预览的时候，ajax请求无法发送接收。不像webstorm是打开了一个端口。所以我们想要不只是静态html时，就需要进行一番配置了。这里提供一个思路，把静态文件的工作库放在本地服务器下面。再到sublime里面配置一下预览打开路径就可以了。这里我用nodejs进行演示（你们爱用啥用啥呗，php，java，Python，IIS。。）
-
首先当然是下载nodejs了，关于怎么在windows下下载安装nodejs请点击这里
安装配置好之后，在你的工作库里面新建一个文件夹叫做server。由于我是把E盘当做工作库，那我就直接在新建一个文件夹E:/server(此server文件夹我已经上传到github，大家可以下载修改使用，里面还包括了之后说到的bat程序。),
进入此文件夹，编写三个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);引入各种依赖模块,创建一个服务器并监听8000端口。把http请求路径，以及request请求、response回复传递给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;这里路由主要判断请求路径是否存在于本地，如果不存在就返回404 not found，否则返回文件。这里由于返回头信息要给出文件类型，因此要加上一个mime.js映射表，由于我是把E盘整个盘当做工作库，因此，realPath = pathname，假如你是放在E:/workspace/下面的话，那就让realpath = "/workspace"
搞定之后，cmd，打开server文件夹，输入node app，运行。如果控制台输出，Server running at :localhost://8000;就说明程序运行成功。
在E:盘下面放一个index.html文件，到浏览器中输入地址localhost:8000/回车你就能看到这个页面出现在浏览器上了。至此本地静态服务器已经搭建好了，至于nodejs更复杂的功能就需要你我一起去探索了。
- 最后一步，设置sublime文件快捷键打开浏览器预览
首先确保你安装了之前提到的那些插件中的侧边栏增强工具插件——“SideBarEnhancements”。安装完成之后，为sidebarenhance设置默认打开浏览器
打开"Preference --> Package Settings --> Side Bar --> Settings User-User"。在打开的文件中添加
{ "default_browser": "chrome" //这些之中的一个: firefox, aurora, chrome, canary, chromium, opera, safari }默认浏览器可以是列表中的任意一个。这里我选择的是chrome
下一步也是至关重要的一步，为sidebarenhancements添加默认的localhost目录。在侧边栏任意文档上点击鼠标右键，选择"project-edit priew urls";在弹出来的文件中添加以下内容{ "E:/":{ "url_testing": "http://localhost:8000/", "url_production": "http://115.159.55.211:8000/" } }这里外面的"E:/"是你的项目在磁盘中的路径，由于我的项目都是直接放在E盘下的，所以就直接是E:/了，"url_testing"代表你本地localhost地址，"url_production"为项目的线上地址，请根据具体情况修改。
最后一步就是，为浏览器绑定热键了
在sulime 中打开"reference --> Package Settings --> Side Bar --> key Bindings-User"在打开的文件中添加如下内容 -
```
[
{ "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里面设置的是热键和对应的命令
这里我就拿chrome举例，我分别设置了F1，和alt+F1。f1代表以某个程序打开此文件，application里面要填写程序的正确路径地址。
alt+f1则代表以浏览器打开此文件，browser里面填写浏览器名，还记得之前我们配置的打开地址吗？这里type：testing即是以当时我们设置的地址作为前缀打开。
可能你已经发现了问题，那就是如果要能生效，必须保持nodejs的那个app程序保持运行，这样在每次打开sublime编程之前都要开一次，有点麻烦是不。有个方法是，编写一个bat程序，加入开机启动服务，让每次开机之后就自动启动这个node程序。
网友评论