Sublime 插件FileHeader 联动Side Bar和Live Reload 实现F1打开谷歌chrome浏览器自动打开右上角的LiveReload

时间 2019-12-05

标签 sublime 插件 fileheader 联动 live reload 实现 f1 打开谷歌 chrome 浏览器自动右上 livereload 栏目 Chrome 繁體版

原文原文链接

实现保存文件自动刷新浏览器--实时预览

插件的下载以及其功能简述

FileHeader

介绍：能够在新建文件的时候，自动加上文件相关的开头代码和注释。
安装：按Ctrl+Shift+P，输入install ，看到第一个Install Package按回车，而后在弹出的窗口中输入FileHeader按回车直接安装
功能
- 按Ctrl+Alt+N，新建相关文件的时候，自动生成文件开头的代码。以Html格式为例：

在文件名称后面加上”.html"，按回车新建文件。新建的html文件就会出现设定好的模板

SideBarEnhancements

安装：按Ctrl+Shift+P，输入install ，看到第一个Install Package按回车，而后在弹出的窗口中输入SideBarEnhancements按回车直接安装。
功能：
- 能够增长左边菜单栏功能以及定义不一样的快捷键打开不一样的浏览器

如上图，打开。在打开的文件中添加如下快捷键代码，下面的["f1"]为快捷键，你也能够调成本身喜欢的快捷键，
而后下面“application”右边是谷歌（chrome）浏览器的路径，要改成你本身的路径。这样就实现了按F1直接打开谷歌浏览器了。

// Side Bar的谷歌浏览器快捷键
   { "keys": ["f1"], "command": "side_bar_files_open_with",
          "args": {
              "paths": [],
              //下面这里要输入本身电脑的谷歌chorme浏览器路径
              "application": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
              "extensions":".*"
          }
   },
复制代码

Live Reload

sublime 安装插件

安装：去github下载文件放入到Package文件夹中：
- 下载地址：github.com/MattDMo/Liv…
功能：一个浏览器和sublime同时要装的插件后能够实现，在sublime中每保存一次，chrome浏览器也自动刷新一次实现实时预览。
- 打开Sublime ，而后点击
- 把原代码改成下面这个：
```
{
   "enabled_plugins": [
    "SimpleReloadPlugin",
    "SimpleRefresh"
   ]
复制代码
```

} ```html

保存后最后一步要开启这个功能：
下面这里按回车:

而后在弹出的窗口中下拉，找到下面的Simple Reload 点击或回车开启功能

此时左下角弹出下图表示功能已开启。

谷歌chrome浏览器

安装：经过chrome应用商店搜索Live Reload安装或者自行下载.crx文件离线安装，如图：

安装好有右上角会出现一个循环中间有一个小圆圈的图标：右键它，而后点击管理拓展程序。

而后在弹出的窗口中打开“容许访问文件网址”按钮。

所有工做准备完成

打开Live Reload:

到这里的时候，咱们新建一个html文件，按F1打开chrome浏览器，按F12打开开发者模式，点击右上角的Live Reload 按钮，中间那个空心小圆圈会变成实心的，这时候注意，你会发现下面标签出现闪动打开会看到文件多了一行代码，

也就是说，谷歌chrome的Live Reload 插件功能就是经过这一行代码链接到sublime能够实现每保存一次（Ctrl+S）浏览器就刷新一次，可是咱们每次新建一个文件都要打开浏览器点击这个按钮都很浪费时间。因此咱们能够结合FileHeader插件在新建文件后直接在文件头部插入这个代码实现每次打开谷歌chrome浏览器自动开启Live Reload功能（空心小圆圈变实心表示开启）

配置FileHeader文件

打开插件FileHeader的文件位置

继续打开模板文件夹template

用Sublime打开html的新建文件模板，就是上图这个，在里面输入模板

<!DOCTYPE html>
<html lang="en">
    <head>
    	<script src="http://127.0.0.1:35729/livereload.js?ext=Chrome&amp;extver=2.1.0"></script>
        <meta charset="utf-8">
        <title>Documents</title>
    </head>
    <body>
    </body>
</html>
复制代码

这样咱们在经过Ctrl+Alt+N或者新建html文件的时候就会出现头部的代码，此时按F1打开谷歌chrome浏览器。

你会发现Live Reload 按钮已经自动从空心小圆圈变为实心的了，也就是说自动开启了这个功能。

测试

在标签里输入123123，按Ctrl+S保存，

以上是我在自学前端后发现能够显著提升学习效率的三个插件组成的联动功能

做者：WuBob123
来源：CSDN
原文：blog.csdn.net/m0_38025763…
版权声明：本文为博主原创文章，转载请附上博文连接！
- 这是我在CSDN写的，感受掘金的界面更讨人喜欢，转战掘金。

相关文章

相关标签/搜索

谷歌浏览器

谷歌Chrome插件

浏览器信息

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公众号

欢迎关注本站公众号,获取更多信息

相关文章

>>更多相关文章<<