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

使用提示中的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": []
},

笔记

• if necessary, replace windows property by other OS
• replace ${config:chrome.executable} with your custom chrome location, e.g. "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
• replace ${config:chrome.profileDir} with your custome chrome profile directory, e.g. "C:/My/Data/chrome/profile" or leave it out
• You can keep the variables like above if you want. To do so, add following entries in settings.json - user or workspace - , adjust paths to your needs:

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

• You could re-use these variables e.g. in launch.json for debugging purposes: "runtimeExecutable": "${config:chrome.executable}"

这是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}"
      ]
    }
  ]
}

也许大多数人都可以从上述答案中找到解决方案，但是看到没有一个解决方案对我有用（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。

简单。

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

我的跑步者脚本看起来像：

{
    "version": "0.1.0",

    "command": "explorer",

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

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

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

这是如何在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输入任何内容，因为Edge是我的默认浏览器，只是为其指定了文件名。

编辑：而且您不需要-incognito或-private-window ...这只是我，我想在一个私人窗口中查看它

最近，在www.lynda.com上的Visual Studio代码教程之一中遇到了此功能。

按Ctrl + K，然后按M，它将打开“选择语言模式”（或单击在笑脸之前显示HTML的右下角），键入markdown并按Enter

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

Tadaaa !!!

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

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

想知道为什么vscode能够以降价模式显示html文件时，默认情况下为什么没有HTML查看器选项。

总之很酷。开心的vscoding :)

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

如果输入，>将显示显示并运行命令

或者对于您的HTML，F5在打开命令面板后，我应该打开调试器。

资料来源：链接

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

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

注意“命令”：行上的路径格式。不要使用“ C：\ path_to_exe \ runme.exe”格式。

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

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

1. 使用Command+ shift+ p打开命令面板。

2. 键入“配置任务运行程序”，这是您首次执行此操作时，如果VS Code选择了“其他”，则会显示向下滚动菜单。如果您以前这样做过，VS Code只会将您直接发送到task.json。

3. 进入task.json文件。删除显示的脚本并将其替换为以下内容：

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

4. 切换回您的html文件，然后按Command+ Shift+ b在Chrome中查看您的页面。

一键式解决方案只需安装Visual Studio市场中的浏览器内扩展。

如果您只是在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}"],
}

这将执行您想要的操作，例如，如果该应用程序已经打开，则在新标签页中打开。

第1步：

1. 打开Visual Studio代码，然后转到扩展。

2. 搜索“在浏览器中打开”。

   3.安装。

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

   就这样................................................ ......

I am just re-posting the steps I used from msdn blog. It may help the community.

This will help you to setup a local web server known as lite-server with VS Code, and also guides you to host your static html files in localhost and debug your Javascript code.

1. Install Node.js

If not already installed, get it here

It comes with npm (the package manager for acquiring and managing your development libraries)

2. Create a new folder for your project

Somewhere in your drive, create a new folder for your web app.

3. Add a package.json file to the project folder

Then copy/paste the following text:

{
   "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"
   }
}

4. Install the web server

In a terminal window (command prompt in Windows) opened on your project folder, run this command:

npm install

This will install lite-server (defined in package.json), a static server that loads index.html in your default browser and auto refreshes it when application files change.

5. Start the local web server!

(Assuming you have an index.html file in your project folder).

In the same terminal window (command prompt in Windows) run this command:

npm start

Wait a second and index.html is loaded and displayed in your default browser served by your local web server!

lite-server is watching your files and refreshes the page as soon as you make changes to any html, js or css files.

And if you have VS Code configured to auto save (menu File / Auto Save), you see changes in the browser as you type!

Notes:

• Do not close the command line prompt until you’re done coding in your app for the day
• It opens on http://localhost:10001 but you can change the port by editing the package.json file.

That’s it. Now before any coding session just type npm start and you are good to go!

Originally posted here in msdn blog. Credits goes to Author : @Laurent Duveau

这是带键盘快捷键的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

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

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

VS Code具有Live Server Extension，它支持从状态栏一键启动。

一些功能：

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

现在，您可以安装扩展在浏览器中查看。我在带有镀铬的Windows上进行了测试，并且可以正常工作。

vscode版本：1.10.2

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

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

脚步：

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

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

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

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

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

3. 保存文件。

4. 切换回html文件（在本示例中为“ text.html”），然后按ctrl+ shift+ b在Web浏览器中查看页面。

@InvisibleDev-要在Mac上尝试使用此功能，请执行以下操作：

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

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