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

Question

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

使用Notepad ++,您可以选择在浏览器中运行.如何使用Visual Studio Code执行相同的操作？

Answer 1

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

回答打开特定文件(名称是硬编码)或打开任何其他文件.

脚步:

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

2. 键入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}"]是不正确的.

3. 保存文件.

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

Answer 2

VS Code具有Live Server Extention,支持从状态栏单击启动.

一些功能:

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

Answer 3

@InvisibleDev - 在mac上尝试使用它:

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

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

Answer 4

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

这是怎么做的:

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

  npm install --save-dev gulp-webserver

• 在VS Code中输入Ctrl + Shift + P,然后键入Configure Task Runner.选择它并按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并在输入时输入"Run Task",您将看到您的任务"webserver"被选中,然后按Enter键.

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

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

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

Answer 5

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

2. 在浏览器中搜索打开并安装

   

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

   

Answer 6

VS Code 团队现在推出了一个名为Live Preview 的官方扩展

快速设置：

1. 安装 Microsoft 的扩展。
2. 从工作区打开 HTML 文件，当前工作区之外的文件不起作用。
3. 运行命令实时预览：显示预览（外部浏览器） ( livePreview.start.externalPreview.atFile)

还有一个用于在内部浏览器中启动它的命令：实时预览：显示预览（内部浏览器）（livePreview.start.internalPreview.atFile）。

您可能还需要从扩展设置中更改默认端口，以防您的系统已使用该端口。

Answer 7

您现在可以安装扩展程序在浏览器中查看.我在带有铬的窗户上测试它,它正在工作.

vscode版本:1.10.2

Answer 8

2020 年 4 月 18 日更新的答案

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

然后用这个关键句子在扩展中搜索Open In Default Browser。你会找到这个扩展。对我来说更好。

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

Answer 9

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

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

Answer 10

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

要在默认浏览器中的Web服务器上运行:npm install http-server -g

{
    "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": []
        }
    ]
}

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

Answer 11

我只是重新发布我在msdn博客中使用的步骤.它可能有助于社区.

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

1.安装Node.js.

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

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

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

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

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": "^1.3.1"
   }
}

4.安装Web服务器

在项目文件夹上打开的终端窗口(Windows中的命令提示符)中,运行以下命令:

npm install

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

5.启动本地Web服务器!

(假设您的项目文件夹中有一个index.html文件).

在同一个终端窗口(Windows中的命令提示符)中运行以下命令:

npm start

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

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

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

笔记:

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

而已.现在在任何编码会话之前只需输入npm start就可以了!

最初张贴在这里的msdn博客.积分转到作者:@Laurent Duveau

Answer 12

如果你只是在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 13

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

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

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

3. 一旦在 tasks.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 中查看您的页面。

Answer 14

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