如何使用Visual Studio Code在浏览器中查看HTML文件 [英] How to view an HTML file in the browser with Visual Studio Code

问题描述

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

How can I view my HTML code in a browser with the new Microsoft Visual Studio Code?

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

With Notepad++ you have the option to Run in a browser. How can I do the same thing with Visual Studio Code?

推荐答案

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

For Windows - Open your Default Browser - Tested on VS Code v 1.1.0

可以打开一个特定的文件(名称是硬编码的)，也可以打开任何其他文件.

Answer to both opening a specific file (name is hard-coded) OR opening ANY other file.

步骤:

1. 使用 ctrl + shift + p (或 F1 )打开命令面板.

1. Use ctrl + shift + p (or F1) to open the Command Palette.

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

Type in Tasks: Configure Task or on older versions Configure Task Runner. Selecting it will open the tasks.json file. Delete the script displayed and replace it by the following:

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

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

Remember to change the "args" section of the tasks.json file to the name of your file. This will always open that specific file when you hit F5.

您还可以通过使用["${file}"]作为"args"的值，将此设置为打开当前打开的文件.请注意，$不在{...}之外，因此["{$file}"]是错误的.

You may also set the this to open whichever file you have open at the time by using ["${file}"] as the value for "args". Note that the $ goes outside the {...}, so ["{$file}"] is incorrect.

保存文件.

切换回您的html文件(在本示例中为"text.html")，然后按 ctrl + shift + b 在Web浏览器中查看页面.

Switch back to your html file (in this example it's "text.html"), and press ctrl + shift + b to view your page in your Web Browser.

这篇关于如何使用Visual Studio Code在浏览器中查看HTML文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！