Question

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

使用Notepad ++，您可以选择在浏览器中运行。如何使用Visual Studio代码执行相同的操作？

Answer 1

对于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 在Web浏览器中查看您的页面。

enter image description here

Answer 2

@InvisibleDev - 尝试使用它来解决这个问题：

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

如果您已经打开了chrome，它将在新标签页中启动您的html文件。

Answer 3

VS代码的Live Server Extention支持从状态栏单击启动。

部分功能：

从状态栏单击启动
Live Reload
支持Chrome调试附件

Answer 4

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

以下是如何操作：

打开命令提示符（cmd）并键入

npm install --save-dev gulp-webserver
在VS Code中输入 Ctrl + Shift + P ，然后输入配置任务运行器。选择它并按Enter键。它将为您打开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 并输入＆＃34;运行任务＆＃34;当你输入它时，你会看到你的任务＆＃34; webserver＆＃34;选择并按回车。

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

以下是有关如何为实例端口配置'gulp-webserver'以及要加载的页面的信息，...

您也可以输入 Ctrl + P 并输入任务网络服务器

来运行您的任务

Answer 5

您现在可以安装扩展程序View In Browser。我在带有铬的窗户上测试它，它正在工作。

vscode版本：1.10.2

Answer 6

2020年4月18日更新的答案

点击此左下管理图标。点击扩展名或快捷方式Ctrl+Shift+X

然后使用此关键字在默认浏览器中打开在扩展程序中搜索。您将找到this扩展名。对我来说更好。

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

Answer 7

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

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

Answer 8

以下是Chrome w /键盘快捷键中当前文档的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"
}

在默认浏览器中在网络服务器上运行：npm install http-server -g

{
    "label": "Run on webserver",
    "type": "shell",
    "command": "http-server",
    "args": [
        "${file}",
        "-p",
        "8080",
        "-c-1",
        "-o"
    ],
    "problemMatcher": []
}

按终端中的CTRL + C关闭服务器

Answer 9

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

这会对你有所帮助使用VS Code设置名为lite-server的本地网络服务器，并指导您在html和localhost debug Javascript中托管您的静态{ "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": "^1.3.1" } }文件代码。

<强> 1。安装Node.js

如果尚未安装，请获取here

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

<强> 2。为项目创建一个新文件夹

在您的云端硬盘中，为您的网络应用创建一个新文件夹。

第3。将package.json文件添加到项目文件夹

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

npm install

<强> 4。安装Web服务器

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

npm start

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

<强> 5。启动本地Web服务器！

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

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

msdn

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

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

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

备注：

在您完成编码之前，请不要关闭命令行提示符当天的应用

它会在http://localhost:10001上打开，但您可以更改端口编辑package.json文件。

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

最初在@Laurent Duveau博客中发布了here。致记作者：if (typeof web3 !== 'undefined') { console.warn("Using web3 detected from external source like Metamask") // Use Mist/MetaMask's provider // window.web3 = new Web3(web3.currentProvider); window.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545")); } else { console.warn("No web3 detected. Falling back to http://localhost:8545. You should remove this fallback when you deploy live, as it's inherently insecure. Consider switching to Metamask for development. More info here: http://truffleframework.com/tutorials/truffle-and-metamask"); // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail) window.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545")); }

Answer 10

如果你刚刚使用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}"],
}

如果应用已经打开，这将按照您的需要进行操作，就像在新标签页中打开一样。

Answer 11

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

使用命令 + shift + p 打开命令选项板。

输入配置任务运行器，第一次执行此操作时，VS代码将为您提供向下滚动菜单，如果它确实选择＆＃34;其他。＆＃34;如果您之前已经这样做过，VS Code会直接发送给tasks.json。
进入tasks.json文件。删除显示的脚本并将其替换为以下内容：

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

切换回您的html文件，然后按命令 + Shift + b 以在Chrome中查看您的信息页。

Answer 12

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

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

注意 ＆＃34;命令＆＃34;： 行的路径格式。不要使用＆＃34; C：\ path_to_exe \ runme.exe＆＃34;格式。

要运行此任务，请打开要查看的html文件，按F1，键入任务歌剧，然后按Enter键

Answer 13

步骤1：

打开Visual Studio代码，然后转到扩展。
搜索“在浏览器中打开”。

3。安装。

4。右键单击您的html文件，您将找到“在浏览器中打开”选项。

仅此而已................................. .........

Answer 14

我的跑步者脚本如下：

{
    "version": "0.1.0",

    "command": "explorer",

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

    "args": ["{$file}"]
}

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

Answer 15

单击解决方案只需从Visual Studio市场安装open-in-browser Extensions。

Answer 16

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

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

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

来源：link

Answer 17

以下是如何在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}"]
     }   
    ]
}

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

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

Answer 18

以下是适用于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}"
      ]
    }
  ]
}

Answer 19

对于Mac，将您的task.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
            }
        }
    ]
}

Answer 20

最近在www.lynda.com

中的一个visual studio代码教程中遇到了这个功能

按Ctrl + K，然后按M，它将打开＆＃34;选择语言模式＆＃34; （或者在笑脸之前点击HTML右下角），输入markdown并按Enter键

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

Tadaaa !!!

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

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

想知道为什么vscode默认情况下没有html viewer选项，当它能够在降价模式下显示html文件时。

无论如何它很酷。快乐的vscoding :)）

Answer 21

大概大多数人都可以从上述答案中找到解决方案，但看到没有一个对我有用（vscode v1.34），我以为我会分享我的经验。如果至少有人觉得有帮助，那就冷静点，不要浪费资源， amiirte ？

无论如何，我的解决方案（windows）建立在@noontz的顶部。对于较早版本的vscode，他的配置可能就足够了，但对于1.34而言，它的配置就不足够了（至少，我无法使其工作..）。

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

所以。 tasks.json个正在运行windows的用户的有效vscode 1.34：

{
    "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会在新的html标签中轻松打开当前chrome文件。

容易。

Answer 22

使用提示中的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属性
将${config:chrome.executable}替换为您自定义的Chrome位置，例如"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}"

Answer 23

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

Answer 24

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",
      }
    }
  ]
}

Answer 25

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

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

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

25 个答案:

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

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

注释