PDF download 下载PDF文件 PDF download 下载PDF文件

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

使用终端

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

使用“HTML Preview”扩展

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

使用“Open in Browser”扩展

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

关于本wikiHow

本页面已经被访问过7,878次。

这篇文章对你有帮助吗?

广告