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

Question

提问by

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

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

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

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

Answer 1

采纳答案by yushulx

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

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

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

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

Steps:

脚步：

Use ctrl+ shift+ p(or F1) to open the Command Palette.
Type in Tasks: Configure Taskor on older versions Configure Task Runner. Selecting it will open the tasks.jsonfile. Delete the script displayed and replace it by the following:
```
{
    "version": "0.1.0",
    "command": "explorer",    
    "windows": {
        "command": "explorer.exe"
    },
    "args": ["test.html"]
}
```
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.
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.
Save the file.
Switch back to your html file (in this example it's "text.html"), and press ctrl+ shift+ bto view your page in your Web Browser.

使用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 时，这将始终打开该特定文件。
您还可以将 this 设置为打开您当时打开的任何文件，并将["${file}"]其用作“args”的值。请注意，$超出{...}, so["{$file}"]是不正确的。
保存文件。
切换回您的 html 文件（在本例中为“text.html”），然后按ctrl+ shift+b在您的 Web 浏览器中查看您的页面。

enter image description here

在此处输入图片说明

Answer 2

回答by Jose Cherian

VS Code has a Live Server Extentionthat support one click launch from status bar.

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

Some of the features:

一些功能：

One Click Launch from Status Bar
Live Reload
Support for Chrome Debugging Attachment

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

Answer 3

回答by Sammydo_55

@InvisibleDev - to get this working on a mac trying using this:

@InvisibleDev - 要在尝试使用此功能的 mac 上实现此功能：

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

If you have chrome already open, it will launch your html file in a new tab.

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

Answer 4

回答by Vlad Bezden

If you would like to have live reload you can use gulp-webserver, which will watch for your file changes and reload page, this way you don't have to press F5 every time on your page:

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

Here is how to do it:

这是如何做到的：

Open command prompt (cmd) and type
npm install --save-dev gulp-webserver
Enter Ctrl+Shift+Pin VS Code and type Configure Task Runner. Select it and press enter. It will open tasks.json file for you. Remove everything from it end enter just following code

打开命令提示符（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"
        }
    ]
}

In the root directory of your project add gulpfile.js and enter following code:

在项目的根目录添加 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
        }));
});

Now in VS Code enter Ctrl+Shift+Pand type "Run Task" when you enter it you will see your task "webserver" selected and press enter.

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

Your webserver now will open your page in your default browser. Now any changes that you will do to your HTML or CSS pages will be automatically reloaded.

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

Here is an information on how to configure 'gulp-webserver'for instance port, and what page to load, ...

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

You can also run your task just by entering Ctrl+Pand type task webserver

您也可以通过输入Ctrl+P并输入task webserver来运行您的任务

Answer 5

回答by Roel

You can now install an extension View In Browser. I tested it on windows with chrome and it is working.

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

vscode version: 1.10.2

vscode 版本：1.10.2

Answer 6

回答by noontz

Here is a 2.0.0 version for the current document in Chrome w/ keyboard shortcut:

这是 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:

keybindings.json：

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

For running on a webserver:

在网络服务器上运行：

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

Answer 7

回答by Loris

In linux, you can use the xdg-opencommand to open the file with the default browser:

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

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

Answer 8

回答by rinku Choudhary

Step 1:

第1步：

Open Visual Studio Code, then go to extensions.
Search for "open in browser".
3.Install it.
4.Right click on your html file,you will find the option "Open in Browser".
That's All......................................................

打开 Visual Studio Code，然后转到扩展。
搜索“在浏览器中打开”。
3.安装它。
4.右键单击您的html文件，您将找到“在浏览器中打开”选项。
就这样................................................ ......

Answer 9

回答by shaijut

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

我只是重新发布我从msdn博客中使用的步骤。它可以帮助社区。

This will help you to setup a local web server known as lite-serverwith VS Code, and also guides you to host your static htmlfiles in localhostand debugyour Javascriptcode.

这将帮助您设置被称为本地Web服务器精简版服务器用VS Code，并引导你到你的主机静态html的文件localhost和debug你的Javascript代码。

1. Install Node.js

1. 安装 Node.js

If not already installed, get it here

如果尚未安装，请在此处获取

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

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

2. Create a new folder for your project

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

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

在驱动器中的某个位置，为您的 Web 应用程序创建一个新文件夹。

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

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

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

4. 安装网络服务器

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

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

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.

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

5. Start the local web server!

5.启动本地web服务器！

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

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

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

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

npm start

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

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

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

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

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

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

Notes:

笔记：

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

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

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

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

Originally posted herein msdnblog. Credits goes to Author : @Laurent Duveau

最初张贴在这里的msdn博客。学分归作者所有：@Laurent Duveau

Answer 10

回答by Sez

If you're just on Mac this tasks.jsonfile:

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

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

...is all you need to open the current file in Safari, assuming its extension is ".html".

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

Create tasks.jsonas described above and invoke it with ?+shift+b.

创建tasks.json以上并调用它与如所描述的?+ shift+ b。

If you want it to open in Chrome then:

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

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

This will do what you want, as in opening in a new tab if the app is already open.

这将执行您想要的操作，就像在应用程序已经打开的情况下在新选项卡中打开一样。

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

提问by

采纳答案by yushulx

回答by Jose Cherian

回答by Sammydo_55

回答by Vlad Bezden

回答by Roel

回答by noontz

回答by Loris

回答by rinku Choudhary

回答by shaijut

回答by Sez

相关推荐

最近更新

标签

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

提问by

采纳答案by yushulx

回答by Jose Cherian

回答by Sammydo_55

回答by Vlad Bezden

回答by Roel

回答by noontz

回答by Loris

回答by rinku Choudhary

回答by shaijut

回答by Sez

相关推荐

html 表单中的条目“action='?'”是什么意思？

如何使图像在 HTML 中移动位置？

如何以 HTML 格式显示 PDF 文件？

Html 如何在OL中增加序列号的大小

相关推荐

最近更新

标签