VSCode新建项目及插件Live Server的gif演示
目录
必先利其器 VSCode的相关使用
主要使用VSCode来写前端代码，还是出于对微软家产品的热爱吧哈哈哈。相比于随便都有几G的Visual studio系列软件，VSCode很小，才几十兆。官网：https://code.visualstudio.com/，下载安装即可。
新建一个项目
进入VSCode后，如图1所示，空荡荡的~ 先新建一个项目。
如图1中的框①所示，点击①中的右三角以展开PROJECTS,如图2所示。
如图2所示，共有四个按钮。第一个：新建一个文件；第二个：新建一个文件夹；第三个：刷新显示；第四个：我也不太清楚哈哈。一般来说，先点击第二个新建一个文件夹作为项目名，然后在项目上右键新建自己想要的文件。如动图3所示。
如图3所示，先点击第二个按钮新建一个名为test2的项目，在选中test2项目后再点击第一个按钮即可在该项目下新建一个名为“firsttest.html”的文件。 当然也可以像前面说的一样在项目上右键新建自己想要的文件。
然后在“firsttest.html”里面编写文件，如图4所示，可知它就是一个空文件，那是不是说我们需要手动敲出<head>,<body>等呢，不然，在VSCode中有一个技巧，输入一个英文感叹号!，然后再按Tab键，即可自动生成网页模板。如图5所示。
如上所示，“!+Tab键” 即可自动生成网页模板。然后我们就可以在里面编写代码啦。
VSCode中达到cmd的效果
使用“Ctrl+.”快捷键(主要这个"."是在ESC键下面的点)，即可以在VSCode中调出一个像windows中的cmd的命令框。如下：
推荐插件
VSCode有着很多功能强大的插件，在这里我用到一个“Live Server ”，该插件实现的基本功能是每当你写完一些网页代码，当你使用“Ctrl+C”进行保存时，对应的结果变化便马上出现在网页上。插件的安装如下所示，
如图6所示，点击①，然后在②中输入“Live Server”。结果如图7所示。
如上图红框所示，即为我们需要的，因为我已经安装了，所以它便没有“Install”的字样了，点击红框内容，安装好后具体如下，没有问题的话，右下角出现“Go Live”字样，如下红框所示：
OK,现在可以来试试它的效果了，如动图9所示：
应该可以看懂趴，哈哈最后点击Port:5000就可以断开连接，然后在浏览器端就不会再显示了，不然的话可能会一直占用5000端口。