设置sublime text2/3支持浏览器预览

昨天早上刚要开始工作的时候，发现sublime(version: 2.0.2)一些快捷键失效了，确切的说是emmet插件挂了。当时手里的项目比较急，也没管太多，下了个sublime text3装上emmet先顶着。今天忙完工作之后想起了这事，就到处找原因，后来无意间才发现，原来是配置中emmet插件被设置忽略了。

菜单栏 —> Preferences —> Settings - User 找到 ignored_packages

"ignored_packages": [
    "Vintage",
    "Tortoise",
    "Emmet"
]

把Emmet删除即可。猜测Emmet被添加到忽略列表中由于Emmet的更新出现了问题，因为在安装或者更新某个插件时，sublime都会把该插件先添加到忽略列表，等安装或更新成功后再移出列表。ps: 题外话结束。。。

sublime作为一款小而美的编辑器相信很多FE都在使用，然而美中不足的就是sublime没有自带浏览器预览功能，wbond上也没有发现比较好用的预览插件。也有网友提供了一些解决方案，但是大部分都只实现了快捷键调用默认浏览器中预览的功能，但是作为FE，需要在多个浏览器下测试兼容性，频繁的手动打开浏览器势必会降低工作效率。这里介绍一种利用SideBarEnhancements插件来实现多浏览器下预览的功能。ps: sublime text2/3测试都可以用。

1. 安装SideBarEnhancements插件

ctrl+shift+p —> Install Package —> 找到SideBarEnhancements

2. 配置预览快捷键

Preferences —> Key Bindings - User 将以下代码复制到数组中。

// chrome
{ "keys": ["f2"], "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
            "extensions":".*"
        }
 },

// firefox
{ "keys": ["f3"], "command": "side_bar_files_open_with",
         "args": {
            "paths": [],
            "application": "D:/Program Files (x86)/Mozilla Firefox/firefox.exe",
            "extensions":".*"
        }
},

// ie
 { "keys": ["f4"], "command": "side_bar_files_open_with",
         "args": {
            "paths": [],
            "application": "C:/Program Files/Internet Explorer/iexplore.exe",
            "extensions":".*"
        }
}

上面的代码中有两处需要注意的地方，一个是keys表示快捷键，即f2可以启动chrome进行预览。另一个是application，表示浏览器所在的安装路径，只有路径配置正确，才能够正常调用浏览器。

这里列出了chrome, firefox, ie的配置，快捷键分别为f2, f3, f4，当然快捷键可以自行修改，如果需要添加其他浏览器，只需再增加一条即可。