尚硅谷前端基础 (13)

好，经过了我们刚才的使用，相信你对这个VS扣的这个编辑器也应该稍微的有一点点的了解了，但是其实我们用的起来还会有一些地方不是那么的方便，诶，就像我们想要运行一个文件，我还要去切出去，然后才双击能运行，那实际上如果是一个强大的文本编辑器，我们运行一个文件不应该这么麻烦对吧？所以这里边我们还可以再装一个插件，插件呢，还是到这个attention这我们搜一下，直接搜一个live啊，Live就是，呃，在我们说live就是现场直播对吧，现场现场的意思，那其实live这些插件你这搜有很多，那live这个插件的作用就是什么呢？它的作用就是可以让我们哎改代码，改代码的时候浏览器会自动给你同步刷新，也就说你不需要再去手动去刷新，手动去哎保存手动刷新，它直接给你更新了，也就是说你改完了随着改随时能看到效果啊，是这么一个意思，你会发现你搜到这个live啊相关的插件。

有这个有一堆有一堆，基本上功能都是类似的，你用的时候如果你拿不准啊，你可以点一下，点一下看看里边这个描述，那这玩意儿肯定不是，这肯定是个聊天的东西，对吧？所以我们我们这块要用的是一个live server，那这里面它的下载量是比较比较多的啊，比较多的还有像什么呀，呃，这个应该也是干这个使的啊，这应该也是干这个使的，那我可能我选择一个下载量比较多的，就要做一个live server是吧，就是一个诶随时刷新的这么一个服务器，而且它这会给你有演示，你看它这块，哎呀，咱们不看了是吧，你感兴趣可以自己看一下，其实就是这边改，这边随时就就刷新了啊，那我直接点击E动，这插件装起来非常简单啊，非常简单，直接点击验证。安装的，我这都不看它了啊，它会花费一点时间，其实还算，哎，你看很快就装完了是吧，很快就装完了，装完了以后呢，你直接回来，回来以后啊，你看这儿你的你在这儿点右键，你会多一个东西，有一个叫什么呢？Open with live server啊open with live server，也就是说用这个叫做呃随时更新的这种实时更新的服务器去打开这个网页，我直接一点击，诶，你会发现在这儿就会出现了一个浏览器，这个浏览器开就是我们当时这个现在这个网页，你看这是不是都写上了，哎，就是我们现在这个网页，那它有什么好处，首先它在打开的时候就不像我们之前这些了，你看我之前打开的地址，你看这都是什么玩意，你看什么C盘，Users，用户名，桌面，这是不是都是一个我磁盘的一个地址，哎，磁盘一个地址，而当我安装好这个服务器以后，他再打开这个地址，你看这个地址是什么，哎，这个地址就是一个服务器的地址，一个真真正正的一个服务器地址，为什么要用服务器地址？

因为我们真实项目上线的时候，项目肯定是部署到一个服务器上的，所以这个时候它采用一个服务器地址去给我们打开一个网页的话，它可以最真实的模拟我们开发的环境，就是我们生产的环境，我们真实上线的一个环境，这是一个好处，二一个还有什么好处呢？那我们之前去看页面的效果的话，我在这写，我写完了以后我写一个H1，诶H1我直接写一个hello，我写完了以后，他在这儿是不会直接出现的，我需要在这儿保存，保存完了我是不是刷新啊，但是有了个插件以后，在这儿我直接CTRLS保存，你看这是不是hello就已经出来了，哎，你就不用再刷新了，这边一边写，这边一一边就出这个结果了，所以它是一个很方便一个功能啊，很方便，这边随着写随着它就出结果，比如说写一个P，写一个P，我们这来一个，诶随便写一个，然后CTRLS1保存它就出来了，当然它其实还有一些不太方便的地方，就是它现在出现结果还得是我在我刷新以后它才出结果。

对吧，刷新以后才能出结果，那现在我希望什么呢？哎，我希望我这写完了以后，它就可以自动出结果，行不行呢？哎，那这个插件它其实严格来讲它做不到，因为它必须得在你的代码保存以后它才可以做到，但是我们其实可以做一件事儿干嘛呢？我可以直接让我的代码可以自动保存，那自动保存是不是不也就意味着它会自动刷新，对吧？那我们怎么来实现自动保存的，看这诶其实这一块管理跟我们刚才文件这个首选项是一个东西啊，一个东西我们直接点击这个小齿轮，一点击设置，设置我们的第一个就叫做什么呢？哎，叫做一个auto save啊auto save叫什么呀？控制以更新文件自动保存，也就是说这个功能是可以让我们文件自动保存的，开启了这个功能的好处就是以后我们就不用再CTRLSCTRLS了，你文件随着写，它会随着自动去保存，我们这里边你现在看它是一个off，也就是现在会不会自动保存，哎，不会，它是关的。

我们选中一下有这么多选项啊，有这么多选项，什么after delay，你看都有描述啊，都有描述，我们就选这个after delay delay什么意思，延迟什么意思，就是每隔多长时间以后它会保存，也就是说它相当于它就会自动每隔，比如说一秒，隔两秒，隔三秒，替我们CTRLS一下就是它，它有一个间隔，而下边这个1000就是一个间隔时间，这个单位是毫秒，那1000毫秒就是一秒啊，1000毫秒就是一秒，如果你觉得太短了，你改成500，太长了，你改长一点，你改成两秒也行，这时间无所谓，根据个人习惯就OK了啊，那现在我们就直接关掉了，现在的好处是什么呢？现在我们的文件它就会自动去保存了啊，自动保存了，你看这块是不是就出来了，哎，这时间稍微有点有点慢，有点慢的话，我们可以把它调的快一点，比如说我调五百五百毫秒，每500毫秒自动保存一下，那这个时候我们再看一下，我再写一个东西，诶那基本上就是一个实时刷新了。

你写完了这随着就出来了啊，所以这是一个基本的一个配置啊，基本一个配置，然后再说一下我们操作的一些快捷方式啊，刚才说了注释是CTRL加上斜杠是一个注释啊，CTRL加斜杠，然后呢，还有什么呢？哎，比如说我想写一个标签，这个标签叫P标签，那我之前是怎么写的，我要写一个肩块，然后写一个P，我是不是要这么写呀？哎，那现在你会发现它的好处就是我们这写完了以后，写开始标签，它是不是自动生成结束标签，哎，并且还有更简单的，你不是想写P标签呢，直接写个P，然后按一下table键。

哎，它就会自动给你补全，你说我想写个H1标签，你直接写个H1，然后按table键，它也会给你自动补全，那这些快捷的操作方式，随着我们后边讲，我们随着还会去说，那你先要做的事儿，还是接下来自己尝试一下啊，我们来说做什么事，第六个事儿干嘛呢？哎，安装我们这个。安装我们这个live so，哎，安装我们这个live so，然后呢，哎，然后第七个，诶尝试通过我们这个live server，哎，来运行我们的这个网页，然后第八步干嘛呢？诶设置我们这个代码自动存储啊自动存储就这么简单，这些事儿还是自己来做一下，我们来听一下。