JS入门教程第二部：如何搭建前端开发环境

知道了html代码的基本结构之后，接下来开始配置开发环境。因为不可能一直用傻傻的记事本去写代码，连语法高亮都没有，写起来很费劲。所以来装一个东西，这个东西就是vs code。

·在搜索引擎上搜vs code，第一个就是它的官网了，点进去，点download，下载。

·下载完之后点开就可以开始安装了。安装很简单，基本上只要去设置一下它到底装在哪就可以了。比如一般放在这，一般是D盘。

·下一步快捷方式可以搞一下，其他这些东西无所谓了。下一步安装，完成。

vs code就已经安装好了，当然在桌面上也是能看到它的快捷方式的。比如在这里，可以在这里或者是这里去新建文件，打开文件，打开目录等等。这里就直接在某个文件夹下去写代码了，就这里open folder，代码的目录是这个。选择文件夹，这里弹出一个框，说你信不信任这个文件夹？那是我自己电脑，我肯定信任。yes。这里这个地方就是文件夹了。

·接下来来创建一个html文件，这里有个new file，点一下就可以给这个文件起个名字，比如就叫word，点html。注意后缀名一定要是对的，回车。

这个就是刚刚创建出来的html文件，还记得代码怎么写吗？是不是三个元素：html、head还有body。所以html是有自动的提示的，而且会发现当把这个写完之后，它会自动的帮你把结束的部分也补上来，这个就比较舒服了。head，还有个body，里面可以随便写点东西。

·写完之后可以尝试用浏览器来打开html的文件，这里右键，点这个，双击，谷歌确定。这个东西是不是我们这边写的代码？没错吧？如果你要再改可以继续改，加东西。注意，当你写完之后想要保存可以按Ctrl加s。

·还有一点刚刚忘记说了，就是在vscode里面写完代码之后，比如加点东西，会看见这里这个东西是个白点，白点就是这个东西压根就没保存。没保存就说明浏览器打开的代码是之前的代码，而不是现在的代码。

就比如现在刷新，后面的东西是没出来的，所以一般改完代码之后会按个Ctrl加s保存，白点没了之后就说明是保存过来的，一刷新，有了吧？但是这样写代码也很不爽，不爽在哪？就是每改了这个代码之后是不是都得保存，再刷新才能看到更新后的结果。

所以这里还是装一个插件或者叫扩展，怎么装？点extension，点一下，这里搜live server，这里第一个就是，点安装，安装完之后把这个擦掉，也把这个也擦掉。工具栏看起来很烦，可以把它隐藏掉，怎么隐藏？Ctrl加b，这样就只看到这个代码了，比较清爽一点。

怎样用刚刚装好的扩展？很简单，右键，下面有个open with live server，点一下，它自动的让浏览器运行HTML代码了。这个东西有个什么好处？看一下，随便下面加点东西，注意Ctrl加s保存，是不是？一保存了这里就更新了，再来试一遍，保存，你看是不是？这个就是live Server的作用。