蹲在电脑前翻来翻去,就卡在vscode怎么运行html这件事上,明明代码敲完了,保存也点了,却不知道该往哪点才能看到页面。

最开始的想法很简单,以为编辑器自带一个直接运行的按钮,就在界面上边那一排图标来回扫,点开好几个弹窗,一会是终端一会是扩展面板,点来点去,文件还是躺在侧边栏里,页面一点动静都没有。光标在代码末尾闪着,写的那些标签安安静静的,一点反应都不给,心里就有点发闷,怀疑是不是自己写的代码写错了,来回核对尖括号和引号,改了两三处地方,保存之后依旧没有变化。

去搜了一句,有人说要装插件。

进到扩展商店,输入名字,等着加载出来,点安装,进度条慢慢走完,右下角提示安装完成。装完之后盯着文件右键,里面多出了几个新选项,当时心里松了一下,觉得这下总算能跑起来了,随手点了第一个相关选项,终端唰地跳出来一堆文字,滚动的速度很快,还没看清内容,浏览器窗口弹出来了,页面干干净净,一片空白,什么文字图片都没有。

盯着空白页面刷新好几次,按F5,按Ctrl加R,地址栏里的地址看着怪怪的,不是本地文件的路径,那时候分不清服务打开和直接打开文件的差别,只知道页面出不来,反复右键点同一个选项,一遍一遍刷新,空白页面跟着一遍一遍重新加载,耗掉不少时间。后来才反应过来,保存的文件放的文件夹位置有点特殊,路径里面带了中文,只是当时压根没往这个方向想,还在反复改动html里面的内容,删掉一部分标签,再重新写回去,试来试去,还是一样的空白。

换了个做法,直接找到本地那个html文件,双击它,浏览器一下子就把内容展示出来了,文字、排版全都正常,没有任何问题。那一刻才懵住,原来代码本身没有出错,只是在vscode里面操作的时候,不知道为什么走不通。这个办法算不上依托编辑器运行,只是绕开了编辑器,算是我当时随手抓来的一个出路,仅代表我个人当时的选择,不建议其他人直接照搬。

之后又回头去试那个插件,关掉终端,重新打开文件,重新右键,这次浏览器里的内容正常加载出来了,说不上是哪里调整对了,也许是刚才把文件夹名字改成英文起了作用,也可能只是终端的缓存刚好清掉了,说不准。

中间还有一段走神的时候,看见别人说直接用浏览器打开文件是本地打开,和插件启动服务是两回事,听着有点绕,也没有深究,只是自己来回切换两种方式,一会双击文件,一会在编辑器里右键启动,感受得到两者地址栏的链接不一样,至于背后的差别,当时没打算弄懂。

折腾到后面,已经没有一开始那种迫切的劲头了,能看到页面就行,至于vscode怎么运行html这件事,好像也没有一个固定不变的路子,我这次先是找不到按钮,装插件之后踩了空白页的状况,又靠双击文件绕过去,最后莫名其妙插件又正常工作了。

那天关掉编辑器的时候,桌面上还留着打开的浏览器标签页,页面上就是我写的那几行简单的内容,没有多复杂的效果,只是耗了好一阵才看见它。