New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
8788 opened this Issue Nov 23, 2018 · 0 comments

Comments

Projects
None yet
1 participant
@8788
Copy link
Owner

8788 commented Nov 23, 2018

历史文章,发布于2014年,现迁移到issues

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

1. 安装SideBarEnhancements插件

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

sidebar-package

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,当然快捷键可以自行修改,如果需要添加其他浏览器,只需再增加一条即可。

@8788 8788 added the 2014 label Nov 23, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment