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

使用notepad++,您可以选择在浏览器中运行。我如何用Visual Studio Code做同样的事情?


当前回答

下面是一个2.0.0版本的当前文档在Chrome带键盘快捷方式:

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

快捷键。json:

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

在web服务器上运行:

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

其他回答

VS Code团队现在有一个官方扩展,叫做“Live Preview”

快速设置:

安装“实时预览”扩展从微软。 从工作空间打开html文件,当前工作空间之外的文件无法工作。 执行命令> Live Preview: Show Preview(外部浏览器)

还有一个命令用于在内部浏览器中启动它。您可能还需要从扩展设置中更改默认端口,以防它已经在您的系统上使用。

文档:https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

发布说明:https://code.visualstudio.com/updates/v1_59#_live-preview

最近在www.lynda.com的一个visual studio代码教程中发现了这个功能

按Ctrl + K + M,它将打开“选择语言模式”(或点击右下角的HTML前面的笑脸),输入markdown并按enter

现在按Ctrl + K后面跟着V,它将打开你的html在附近的标签。

Tadaaa ! !

现在emmet命令在我的html文件中不能在这种模式下工作,所以我回到了原始状态(注- html标签tellisense工作完美)

—按“Ctrl + K + M”,选择“auto-detect”。埃米特的命令开始生效。如果你只喜欢html查看器,那么没有必要让你回到原来的状态。

不知道为什么vscode没有html查看器选项默认情况下,当它能够显示html文件在markdown模式。

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

以下是如何做到这一点:

打开命令提示符(cmd)并键入 安装gulp-webserver 在VS Code中输入Ctrl+Shift+P并键入配置任务运行器。选择它并按enter。它将打开任务。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并输入“运行任务”,当你输入它时,你会看到你的任务“webserver”被选中并按enter。

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

这里是一个关于如何配置'gulp-webserver'实例端口的信息,以及加载什么页面,…

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

我的运行脚本看起来像这样:

{
    "version": "0.1.0",

    "command": "explorer",

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

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

当我在index。html文件中按ctrl shift b,它就会打开我的资源管理器

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

回答既打开一个特定的文件(名称是硬编码)或打开任何其他文件。

步骤:

Use ctrl + shift + p (or F1) to open the Command Palette. 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"] } 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 + b to view your page in your Web Browser.