sublime text 3 中添加浏览器预览功能

最新推荐文章于 2019-01-24 10:52:23 发布

原创最新推荐文章于 2019-01-24 10:52:23 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#sublime text #浏览器预览 #web前端开发 #开发者

Sublime Text--开发利器专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Sublime Text 3中添加浏览器预览功能，通过安装SideBarEnhancements插件和配置预览快捷键，前端开发者可以便捷地在Chrome中查看网页效果。只需按下F2快捷键，就能启动浏览器预览，前提是正确配置浏览器的安装路径。

sublime 在web前端开发中可以发挥强大的功能，但是对于前段开发者来说当然得需要时时查看在浏览器中的效果因此能快速在浏览器中查看是必不可缺少的，下面介绍如何在sublime 中添加浏览器预览功能。

1. 安装SideBarEnhancements插件

ctrl+shift+p------->Install packages-------->SideBarEnhancements

2.配置预览快捷键

preferences------>key binding - user 将下面代码复制到数组中去

<span style="white-space:pre">	</span>// chrome
<span style="white-space:pre">	</span>{ "keys": ["f2"], "command": "side_bar_files_open_with",
       <span style="white-space:pre">		</span> "args": {
           <span style="white-space:pre">	</span> "paths": [],
           <span style="white-space:pre">	</span> "application": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
          <span style="white-space:pre">	</span>  "extensions":".*"
       <span style="white-space:pre">		</span> }
 <span style="white-space:pre">	</span>},

<span style="white-space:pre">	</span>// firefox
<span style="white-space:pre">	</span>{ "keys": ["f3"], "command": "side_bar_files_open_with",
        <span style="white-space:pre">	</span> "args": {
<span style="white-space:pre">	</span>            "paths": [],
        <span style="white-space:pre">	</span>    "application": "D:/Program Files (x86)/Mozilla Firefox/firefox.exe",
<span style="white-space:pre">	</span>            "extensions":".*"
        <span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>},

<span style="white-space:pre">	</span>// ie
<span style="white-space:pre">	</span> { "keys": ["f4"], "command": "side_bar_files_open_with",
        <span style="white-space:pre">	</span> "args": {
<span style="white-space:pre">	</span>            "paths": [],
        <span style="white-space:pre">	</span>    "application": "C:/Program Files/Internet Explorer/iexplore.exe",
<span style="white-space:pre">	</span>            "extensions":".*"
        <span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span> }

下面解释一下这段代码

keys表示快捷键，即f2可以启动chrome进行预览。另一个是application，表示浏览器所在的安装路径，只有路径配置正确，才能够正常调用浏览器。

当然快捷键可以随便给，但是安装路径一定要正确!

谢谢查看博文！