如何在Visual Studio Code中运行HTML文件

Visual Studio Code是微软推出的一个源代码编辑器。它在Windows、macOS和Linux上都能使用。你可以通过它用各种编码语言来编写和编辑代码，其中也包括HTML。但要是你想运行HTML代码来预览外观，又该怎么办呢？好在有一些Visual Studio Code的扩展能让你在Visual Studio Code中轻松运行HTML代码。你也可以使用终端来运行HTML文件。这篇文章将教你如何在Visual Studio Code中运行HTML文件。

方法 1

方法 1 的 4:

创建、打开和保存HTML文件

下载PDF文件

1
打开Visual Studio Code。它的图标有点像一条蓝色丝带。点击图标即可启动Visual Studio Code。你可以在Windows的“开始”菜单、Mac的“应用”文件夹或Linux的 “应用程序”菜单中找到它。
- 如果你还没有安装，可以从 https://code.visualstudio.com/ 免费下载Visual Studio Code。只用点击网页上的下载按钮，然后从网页浏览器或“下载”文件夹中打开安装文件。按照说明完成安装。
2
打开或创建一个新的HTML文件。通过以下步骤之一来打开或创建一个新文件。
- 要创建一个新文件，点击顶部菜单栏中的文件。然后点击新建文件。开始输入HTML代码。
- 要打开现有的文件，可在顶部的菜单栏中点击文件。然后点击打开文件。找到你要打开的HTML文件，点击选中它。然后点击打开。
3
把文件另存为HTML文件。如果准备在Visual Studio Code中运行HTML文件，你首先需要把文件另存为HTML格式。一旦保存了HTML文件，你就可以在所选择的任何浏览器中运行它。按照以下步骤在Visual Studio Code中保存HTML文件：
- 点击顶部菜单栏中的文件。
- 点击另存为。
- 在“文件名”旁边输入文件名。
- 使用“另存为类型”旁边的下拉菜单选择“HTML”。
- 点击保存。
广告

方法 2

方法 2 的 4:

使用终端

下载PDF文件

Visual Studio Code的图标有点像一条蓝色丝带。点击图标即可启动Visual Studio Code。你可以在Windows的“开始”菜单、Mac的“应用”文件夹或Linux的 “应用程序”菜单中找到它。
如果还没有打开HTML文件，那就打开一个现有的HTML文件，或者创建一个新的HTML文件并另存为HTML格式。如果已经打开，那就点击屏幕上方包含你的HTML文件的选项卡来进行查看。
3
打开一个新的终端。点击屏幕上方的终端，然后点击新建终端。终端是在Visual Studio Code中运行HTML文件而不使用扩展的唯一方法。但同时它也是最复杂的方法。
- 或者，你可以点击顶部的查看，然后点击终端。
4
键入cd后接HTML文件的路径，然后按↵ Enter。这样就会转到你的HTML文件的位置。比如，你的HTML文件在“文档”文件夹中，你就可以键入cd \用户\用户名\文档并按Enter。
- 如果你的HTML文件被保存在与操作系统不同盘符的分区上，那你得在终端中改成该盘符，然后才能转到HTML文件的路径。要进行更改，只用输入盘符（比如D:表示D:盘），然后按Enter。
- 如果你不确定HTML文件的保存位置，可以右键点击屏幕上方的HTML文件选项卡，然后点击复制路径。在终端输入cd，然后紧接着就粘贴刚才复制的路径。删除掉路径末尾的文件名，然后按Enter。
- 如果HTML文件的路径中的任何一个文件夹名称包含了空格，那么终端就无法转到该文件夹。使用Windows上的“文件资源管理器”或Mac上的“访达”转到任何名称中包含空格的文件夹，然后重命名这些文件夹以避免任何空格（例如，你的文件夹名称为“HTML Files”，那就把它改为“HTML_Files”）。
5
键入start后接HTML文件名，然后按↵ Enter。例如，你要运行一个索引HTML文件，那就可以键入start index.html并按Enter。这样会在一个单独的窗口中启动HTML文件，以便你预览HTML文件。
- 要关闭预览，只用点击窗口顶部的“x”图标。^{[1]X研究来源}
广告

方法 3

方法 3 的 4:

使用“HTML Preview”扩展

下载PDF文件

它的图标有点像一条蓝色丝带。点击图标即可启动Visual Studio Code。你可以在Windows的“开始”菜单、Mac的“应用”文件夹或Linux的 “应用程序”菜单中找到它。
这是左侧菜单栏中类似4个方块的图标。这样将显示扩展的搜索菜单。
搜索栏位于左边扩展菜单的顶部。这样将显示符合你搜索查询的扩展列表。“HTML Preview”是Visual Studio Code的一个扩展，让你能在Visual Studio Code中使用分屏或全屏模式来预览HTML文件。
它应该是列表顶部的第一个扩展。它是由Thomas Haakon Townsend创建的，图标类似于一个橙色的盾牌，中间有一个“5”（HTML 5的标志）。
它在扩展菜单右侧的信息页面中，位于“HTML Preview”标题下面。这样将安装该扩展。等几分钟，让它完成安装。
如果还没有打开HTML文件，那就打开一个现有的HTML文件，或者创建一个新的HTML文件并另存为HTML格式。如果已经打开，那就点击屏幕上方包含你的HTML文件的选项卡来进行查看。
7
点击分屏预览按钮。这是一个类似于分屏的图标，左边有一个放大镜。它位于屏幕的右上角。这样就会在Visual Studio Code中以分屏方式打开HTML文件的预览。
- 按住Alt并点击预览按钮，然后就能查看HTML代码的全屏预览。
- 要关闭预览，点击屏幕上方预览标签中的“x”图标就可以了。
广告

方法 4

方法 4 的 4:

使用“Open in Browser”扩展

下载PDF文件

它的图标有点像一条蓝色丝带。点击图标即可启动Visual Studio Code。你可以在Windows的“开始”菜单、Mac的“应用”文件夹或Linux的 “应用程序”菜单中找到它。
这是左侧菜单栏中类似4个方块的图标。这样将显示扩展的搜索菜单。
搜索栏位于左边扩展菜单的顶部。这样将显示符合你搜索查询的扩展列表。“Open in browser”是Visual Studio Code的一个扩展，让你能在Visual Studio Code中使用所选择的网络浏览器来打开HTML文件。
它应该是列表顶部的第一个扩展。它是由TechER创建的，名称都是小写字母。点击扩展选中它。
它在扩展菜单右侧的信息页面中，位于“open in browser”标题的下面。这样将安装该扩展。等几分钟，让它完成安装。
如果还没有打开HTML文件，那就打开一个现有的HTML文件，或者创建一个新的HTML文件并另存为HTML格式。如果已经打开，那就点击屏幕上方包含你的HTML文件的选项卡来进行查看。
这项将显示一个上下文菜单。
8
点击在默认浏览器中打开。这样就会在默认网络浏览器中打开HTML文件，以便你进行查看。^{[2]X研究来源}
- 或者，你也可以点击在其他浏览器中打开，然后双击你选择的网络浏览器。
- 如果要求你选择一个默认浏览器，那就点击你要用来打开文件的浏览器，然后点击确定。
广告