如何使用 Visual Studio Code 在浏览器中查看 HTML 文件

Posted 2023-02-18

技术标签:

【中文标题】如何使用 Visual Studio Code 在浏览器中查看 HTML 文件【英文标题】：How to view an HTML file in the browser with Visual Studio Code 【发布时间】：2015-07-14 09:25:19 【问题描述】：

如何使用新的 Microsoft Visual Studio Code 在浏览器中查看我的 html 代码？

使用 Notepad++，您可以选择在浏览器中运行。如何使用 Visual Studio Code 做同样的事情？

【问题讨论】：

VS Code 现在有一个 Live Server 扩展。请看我的回答：***.com/a/48721885/466066 实时服务器扩展为我工作。我不想配置任何文件来执行此操作。也相关：***.com/questions/47519768/… 微软发布了更容易设置的“实时预览”扩展。见***.com/a/69210917/2713729 Live Preview 适用于内部和外部浏览器，这是一个很棒的功能。 【参考方案1】：

最近在 www.lynda.com 的 Visual Studio 代码教程之一中发现了此功能

按Ctrl + K，然后按M，它将打开“选择语言模式”（或点击右下角那个笑脸前面写着HTML的），输入markdown并回车

现在按 Ctrl + K 然后按 V，它将在附近的选项卡中打开您的 html。

多多！！！

现在 emmet 命令在我的 html 文件中无法在此模式下工作，所以我回到了原始状态（注意 - html 标签tellisense 工作正常）

要返回原始状态 - 按 Ctrl + K，然后按 M，选择自动检测。 emmet 命令开始工作。如果您对仅 html 的查看器感到满意，那么您无需返回原始状态。

想知道为什么vscode默认没有html查看器选项，当它能够在markdown模式下显示html文件时。

【讨论】：

问题是关于如何在浏览器中查看。【参考方案2】：

点击这个左下管理图标。点击Extensions或快捷方式Ctrl+Shift+X

然后使用这个关键语句在扩展中搜索在默认浏览器中打开。你会发现this 分机。对我来说更好。

现在右键单击html 文件，您将看到在默认浏览器中打开 或快捷方式Ctrl+1 在浏览器中查看html 文件。

【讨论】：

快捷方式ctrl+1智能覆盖默认ctrl+1，在资源管理器中html时打开浏览器，否则将光标设置在当前editor。【参考方案3】：

VS Code 团队现在有一个名为“实时预览”的官方扩展

快速设置：

从工作区

> Live Preview: Show Preview (External Browser)

还有一个用于在内部浏览器中启动它的命令。您可能还需要更改扩展设置中的默认端口，以防它已在您的系统上使用。

文档：https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

发行说明：https://code.visualstudio.com/updates/v1_59#_live-preview

【讨论】：

【参考方案4】：

启动本地网络服务器！

（假设您的项目文件夹中有一个 index.html 文件）。

在同一终端窗口（Windows 中的命令提示符）中运行以下命令：

npm 开始

【讨论】：

【参考方案5】：

以下在 Windows 10 上的 1.53.2 版本中有效 ->

在终端菜单中选择运行活动文件它在默认边缘浏览器中执行 html 文件

【讨论】：

【参考方案6】：

打开扩展侧边栏 (Ctrl + Shift + X)

搜索open in browser并安装

右键单击您的 html 文件，然后选择“在浏览器中打开”(Alt + B)

【讨论】：

在 Windows 中效果很好。也适用于 mac。你只需要使用Cmd + Shift + X 然后其余的都是一样的。【参考方案7】：

VSCode 任务 - 通过应用程序包标识符打开（仅限 macOS）。


  "version": "2.0.0",
  "tasks": [
    
      "label": "Open In: Firefox DE",
      "type": "process",
      "command": "open",
      "args": ["-b", "org.mozilla.firefoxdeveloperedition", "$file"],
      "group": "build",
      "problemMatcher": [],
      "presentation": 
        "panel": "shared",
        "focus": false,
        "clear": true,
        "reveal": "never",
      
    
  ]

【讨论】：

【参考方案8】：

我只是重新发布我在 msdn 博客中使用的步骤。它可能会对社区有所帮助。

这将帮助您使用VS Code 设置一个名为lite-server 的本地Web 服务器，并指导您将静态html 文件托管在localhost 和debug 您的javascript 代码中。

1.安装 Node.js

如果尚未安装，请获取here

它带有 npm（用于获取和管理开发库的包管理器）

2。为您的项目创建一个新文件夹

在您的驱动器的某个位置，为您的网络应用创建一个新文件夹。

3.在项目文件夹中添加一个 package.json 文件

然后复制/粘贴以下文本：


   "name": "Demo",
   "version": "1.0.0",
   "description": "demo project.",
   "scripts": 
     "lite": "lite-server --port 10001",
     "start": "npm run lite"
   ,
   "author": "",
   "license": "ISC",
   "devDependencies": 
     "lite-server": "^2.5.4"

4.安装网络服务器

在项目文件夹中打开的终端窗口（Windows 中的命令提示符）中，运行以下命令：

npm install

这将安装 lite-server（在 package.json 中定义），这是一个静态服务器，可在您的默认浏览器中加载 index.html 并在应用程序文件更改时自动刷新它。

5.启动本地网络服务器！

（假设您的项目文件夹中有一个 index.html 文件）。

在同一终端窗口（Windows 中的命令提示符）中运行以下命令：

npm start

稍等片刻，index.html 将加载并显示在本地 Web 服务器提供的默认浏览器中！

lite-server 正在监视您的文件，并在您对任何 html、js 或 css 文件进行更改后立即刷新页面。

如果您将 VS Code 配置为自动保存（菜单文件/自动保存），您会在键入时在浏览器中看到更改！

注意事项：

在您完成编码之前不要关闭命令行提示符当天的应用它在 http://localhost:10001 上打开，但您可以通过以下方式更改端口编辑 package.json 文件。

就是这样。现在在任何编码会话之前只需输入 npm start 就可以了！

最初在 msdn 博客中发布 here。致谢作者：@Laurent Duveau

【讨论】：

【参考方案9】：

对于 Mac，将您的 tasks.json（在 .vscode 文件夹中）文件内容设置为以下内容并使用 SHFT+COMMAND+B 打开。


    "version": "2.0.0",
    "tasks": [
        
            "label": "Chrome Preview",
            "type": "shell",
            "command": "open -a /Applications/Google\\ Chrome.app test.html",
            "problemMatcher": [],
            "group": 
                "kind": "build",
                "isDefault": true
            
        
    ]

【讨论】：

【参考方案10】：

使用提示中的 URL 打开自定义 Chrome


  "version": "2.0.0",
  "tasks": [
    
      "label": "Open Chrome",
      "type": "process",
      "windows": 
        "command": "$config:chrome.executable"
      ,
      "args": ["--user-data-dir=$config:chrome.profileDir", "$input:url"],
      "problemMatcher": []
    
  ],
  "inputs": [
    
      "id": "url",
      "description": "Which URL?",
      "default": "http://localhost:8080",
      "type": "promptString"
    
  ]

使用活动文件打开自定义 Chrome


  "label": "Open active file in Chrome",
  "type": "process",
  "command": "chrome.exe",
  "windows": 
    "command": "$config:chrome.executable"
  ,
  "args": ["--user-data-dir=$config:chrome.profileDir", "$file"],
  "problemMatcher": []
,

注意事项

如有必要，将windows 属性替换为其他操作系统用您的自定义 chrome 位置替换 $config:chrome.executable，例如"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe" 用您的自定义 chrome 配置文件目录替换 $config:chrome.profileDir，例如 "C:/My/Data/chrome/profile" 或忽略它如果需要，您可以保留上述变量。为此，请在 settings.json - 用户或工作区 - 中添加以下条目，根据您的需要调整路径：

"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"

您可以重复使用这些变量，例如在launch.json 用于调试目的："runtimeExecutable": "$config:chrome.executable"

【讨论】：

【参考方案11】：

这是 Chrome 中当前文档的 2.0.0 版本，带有键盘快捷键：

tasks.json


    "version": "2.0.0",
    "tasks": [
        
            "label": "Chrome",
            "type": "process",
            "command": "chrome.exe",
            "windows": 
                "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
            ,
            "args": [
                "$file"
            ],
            "problemMatcher": []
        
    ]

keybindings.json：


    "key": "ctrl+g",
    "command": "workbench.action.tasks.runTask",
    "args": "Chrome"

在网络服务器上运行：

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

【讨论】：

【参考方案12】：

可能大多数人都能从上述答案中找到解决方案，但看到没有一个对我有用 (vscode v1.34) 我想我会分享我的经验。如果至少有一个人觉得它有帮助，那么酷，不要浪费帖子，amiirte？

无论如何，我的解决方案 (windows) 是在 @noontz 的基础上构建的。他的配置对于旧版本的vscode 可能已经足够了，但对于1.34 则不行（至少，我无法让它工作..）。

我们的配置几乎相同，但只有一个属性——该属性是 group 属性。我不知道为什么，但没有这个，我的任务甚至不会出现在命令面板中。

所以。运行vscode 1.34 的windows 用户的工作tasks.json：


    "version": "2.0.0",
    "tasks": [
        
            "label": "Chrome",
            "type": "process",
            "command": "chrome.exe",
            "windows": 
                "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
            ,
            "args": [
                "$file"
            ],
            "group": "build",
            "problemMatcher": []
        
    ]

请注意，problemMatcher 属性不是此工作所必需的，但如果没有它，您将需要执行额外的手动步骤。试图阅读有关此属性的文档，但我太厚了，无法理解。希望有人会过来给我上课，但是是的，在此先感谢您。我所知道的是——包括这个属性和ctrl+shift+b 在一个新的chrome 选项卡中打开当前的html 文件，没有麻烦。

简单。

【讨论】：

【参考方案13】：

对于 Windows - 打开您的默认浏览器 - 在 VS Code v 1.1.0 上测试

回答打开特定文件（名称是硬编码的）或打开任何其他文件。

步骤：

使用 ctrl + shift + p（或 F1）打开命令面板。

输入Tasks: Configure Task 或旧版本Configure Task Runner。选择它会打开 tasks.json 文件。删除显示的脚本并将其替换为以下内容：


    "version": "0.1.0",
    "command": "explorer",    
    "windows": 
        "command": "explorer.exe"
    ,
    "args": ["test.html"]

记得将 tasks.json 文件的“args”部分更改为您的文件名。当您按 F5 时，这将始终打开该特定文件。

您也可以使用["$file"] 作为“args”的值，将其设置为打开您当时打开的任何文件。注意$在...之外，所以["$file"]是不正确的。

保存文件。

切换回您的 html 文件（在本例中为“text.html”），然后按 ctrl + shift + b kbd> 在您的网络浏览器中查看您的页面。

【讨论】：

如果您有多个 HTML 文件，您甚至可以使用变量。你可以这样做： "args": ["$file"] 来传递当前打开的文件。另见code.visualstudio.com/Docs/tasks#_variables-in-tasksjson 如何在 Mac 中进行操作？没有exe文件。我想在 Mac 上用 chrome 打开网页刚刚得到“无法启动外部程序 chrome $file.spawn chrome ENOENT” 在新文件夹中配置任务：选择任务：配置任务运行程序命令，您将看到任务运行程序模板列表。选择 Others 以创建运行外部命令的任务。 . . .您现在应该会在工作区 .vscode 文件夹中看到一个 tasks.json 文件，其中包含以下内容：. . . code.visualstudio.com/Docs/editor/tasks Configure Task Runner 在 VSC 1.24.0 中不再存在 - Control-Shift-P 不返回该字符串的结果。【参考方案14】：

VS Code 有一个Live Server Extention 支持从状态栏一键启动。

一些特点：

从状态栏一键启动实时重新加载支持 Chrome 调试附件

【讨论】：

这个扩展还有一个网络插件，可以为动态页面提供自动重新加载功能。 @M.Sundstrom 你能给我那个插件的名字/链接吗？还是很有用的，尤其是完全免配置！不推荐用于复杂页面，可能对新编码人员有好处但您似乎无法预览未保存的活动文件，对吧？（运行它，不预览 html，但在浏览器上显示文件夹层次结构）【参考方案15】：

这是 Mac OSx 的 2.0.0 版本：


  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    
      "label": "echo",
      "type": "shell",
      "command": "echo Hello"
    ,
    
      "label":"chrome",
      "type":"process",
      "command":"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
      "args": [
        "$file"
      ]
    
  ]

【讨论】：

【参考方案16】：

一键式解决方案只需从 Visual Studio 市场安装 open-in-browser Extensions。

【讨论】：

【参考方案17】：

您现在可以安装扩展程序View In Browser。我在带有 chrome 的 windows 上对其进行了测试，它可以正常工作。

vscode 版本：1.10.2

【讨论】：

那个扩展得到了可怕的评论。这不会自动刷新浏览器，这不是 OP 想要的【参考方案18】：

如果您只是在 Mac 上使用此 tasks.json 文件：


    "version": "0.1.0",
    "command": "open",
    "args": ["$file"],

...是您在 Safari 中打开当前文件所需的全部内容，假设其扩展名为“.html”。

如上所述创建tasks.json 并使用⌘+shift+b 调用它。

如果您希望它在 Chrome 中打开，那么：


    "version": "0.1.0",
    "command": "open",
    "args": ["-a", "Chrome.app", "$file"],

这会做你想做的事，如果应用已经打开，就像在新标签页中打开一样。

【讨论】：

【参考方案19】：

对于 Mac - 在 Chrome 中打开 - 在 VS Code v 1.9.0 上测试

Command

shift

p

键入 Configure Task Runner，第一次执行此操作时，VS Code 将为您提供向下滚动菜单，如果它选择“Other”。如果你以前这样做过，VS Code 只会将你直接发送到 tasks.json。

在 tasks.json 文件中。删除显示的脚本并将其替换为以下内容：


    "version": "0.1.0",
    "command": "Chrome",
    "osx": 
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    ,
    "args": ["$file"]

Command

Shift

b

【讨论】：

【参考方案20】：

Ctrl + F1 将打开默认浏览器。或者，您可以按 Ctrl + shift + P 打开命令窗口并选择“在浏览器中查看”。 html 代码必须保存在文件中（编辑器上未保存的代码 - 没有扩展名，不起作用）

【讨论】：

您使用的是什么版本的 Visual Studio Code？这些命令在我刚刚更新的 1.8.1 中不起作用。 Ctrl+F1 什么都不做，我在命令面板中没有“在浏览器中查看”选项。也许您的 tasks.json 中有超出默认安装或额外任务的内容？我有相同的版本，但我意识到我为它安装了一个扩展。它是：marketplace.visualstudio.com/…【参考方案21】：

这里是你如何在 Windows 的多个浏览器中运行它


 "version": "0.1.0",
 "command": "cmd",
 "args": ["/C"],
 "isShellCommand": true,
 "showOutput": "always",
 "suppressTaskName": true,
 "tasks": [
        
         "taskName": "Chrome",
         "args": ["start chrome -incognito \"$file\""]
     ,
        
         "taskName": "Firefox",
         "args": ["start firefox -private-window \"$file\""]
     ,
        
         "taskName": "Edge",
         "args": ["$file"]
        
    ]

请注意，我没有在 edge 的 args 中输入任何内容，因为 Edge 是我的默认浏览器，只是给了它文件名。

编辑：你也不需要 -incognito 或 -private-window...只是我喜欢在私人窗口中查看它

【讨论】：

我只复制了tasks 部分。 "args":["/C"] 是这项工作的原因。出于好奇，这是做什么的？【参考方案22】：

在linux中，可以使用xdg-open命令用默认浏览器打开文件：


    "version": "0.1.0",
    "linux": 
        "command": "xdg-open"
    ,
    "isShellCommand": true,
    "showOutput": "never",
    "args": ["$file"]

【讨论】：

谢谢！我是 Linux 用户，感觉很迷茫。我想补充一点，需要按Ctrl + Shift + b 才能在浏览器中启动它。对我来说，助记符是“b = browser”。 :-) 它有效，但似乎已弃用，如果您有更新版本，谢谢你能把版本条目留在tasks.json里吗？【参考方案23】：

我的运行脚本看起来像：


    "version": "0.1.0",

    "command": "explorer",

    "windows": 
        "command": "explorer.exe"
    ,

    "args": ["$file"]

当我在 index.html 文件中按 ctrl shift b 时，它只是打开了我的资源管理器

【讨论】：

【参考方案24】：

如果您想实时重新加载，您可以使用 gulp-webserver，它会监视您的文件更改并重新加载页面，这样您就不必每次在页面上按 F5：

这是怎么做的：

打开命令提示符 (cmd) 并输入

npm install --save-dev gulp-webserver

在 VS Code 中输入 Ctrl+Shift+P 并输入 Configure Task Runner。选择它并按回车键。它将为您打开 tasks.json 文件。从中删除所有内容，然后输入以下代码

tasks.json


    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        
            "taskName": "webserver",
            "isBuildCommand": true,
            "showOutput": "always"
        
    ]

在你的项目根目录下添加 gulpfile.js 并输入以下代码：

gulpfile.js

var gulp = require('gulp'),
    webserver = require('gulp-webserver');

gulp.task('webserver', function () 
    gulp.src('app')
        .pipe(webserver(
            livereload: true,
            open: true
        ));
);

现在在 VS Code 中输入 Ctrl+Shift+P 并在输入时输入“运行任务”，您将看到您的任务“网络服务器”被选中，然后按 Enter。

您的网络服务器现在将在您的默认浏览器中打开您的页面。现在，您对 HTML 或 CSS 页面所做的任何更改都将自动重新加载。

这里是关于如何配置'gulp-webserver' 的信息，例如端口，以及要加载的页面，...

您也可以通过输入 Ctrl+P 并键入 task webserver

来运行您的任务

【讨论】：

我必须运行 npm install -g gulp、npm install -g gulp-webserver 并添加一个指向我的 AppData\npm\node_modules 的 NODE_PATH 环境变量。然后我能够运行网络服务器任务，但是当浏览器启动时我得到一个 404。知道我错过了什么吗？没关系，只需将示例中的“应用程序”更改为“。” （所以它从当前目录提供服务）。对答案的评论：如果你想在浏览器中运行一个 html 文件，它会在更改时自动重新加载，你的 gulpfile.js 应该看起来像这样，带有一个 '.'而不是“应用程序”。代码 = var gulp = require('gulp'), webserver = require('gulp-webserver'); gulp.task('webserver', function () gulp.src('.') .pipe(webserver( fallback: 'index.html', livereload: true, open: true )); );跨度> 这太棒了。感谢您将此解释为一个有价值的选择。我还应用了一点 Krill 和 Friis 的答案来完成这项工作。但确实如此！我收到“Cannot GET /”，因为我复制粘贴了 gulpfile.js 而没有配置 gulp.src('app') 行，因此它实际上指向了我的源（不是 /app 而是 '.'） .完美运行。谢谢！【参考方案25】：

@InvisibleDev - 让它在 Mac 上工作，尝试使用它：


    "version": "0.1.0",
    "command": "Chrome",
    "osx": 
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    ,
    "args": [
        "$file"
    ]

如果您已经打开了 chrome，它将在新选项卡中启动您的 html 文件。

【讨论】：

【参考方案26】：

在 Opera 浏览器中打开文件（在 Windows 64 位上）。只需添加以下行：


"version": "0.1.0",
"command": "opera",
"windows": 
    "command": "///Program Files (x86)/Opera/launcher.exe"
,
"args": ["$file"]

注意"command": 行的路径格式。不要使用“C:\path_to_exe\runme.exe”格式。

要运行这个任务，打开你要查看的html文件，按F1，输入task opera并回车

【讨论】：

【参考方案27】：

CTRL+SHIFT+P 将调出命令面板。当然，这取决于您正在运行的内容。在 ASP.net 应用程序中的示例，您可以输入：>kestrel，然后打开您的 Web 浏览器并输入 localhost:(your port here)。

如果您输入>，它将显示显示和运行命令

或者在您使用 HTML 的情况下，我认为 F5 在打开命令面板后应该打开调试器。

来源：link

【讨论】：

我得到了这个开场白content.screencast.com/users/Orphydian/folders/3ds%20max/media/…

以上是关于如何使用 Visual Studio Code 在浏览器中查看 HTML 文件的主要内容，如果未能解决你的问题，请参考以下文章