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

How to view an HTML file in the browser with Visual Studio Code

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

使用 Notepad++,您可以选择在浏览器中 运行。我怎样才能用 Visual Studio 代码做同样的事情?

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

如果您输入 >,它将显示 show 和 运行 命令

或者在你使用 HTML 的情况下,我认为 F5 打开命令选项板后应该打开调试器。

来源:link

对于 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 在网络浏览器中查看您的页面。

@InvisibleDev - 让这个在 mac 上工作尝试使用这个:

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

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

在 Opera 浏览器中打开文件(Windows 64 位)。只需添加以下行:

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

注意"command":行的路径格式。不要使用 "C:\path_to_exe\runme.exe" 格式。

到运行这个任务,打开你要查看的html文件,按F1,输入task opera回车

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

操作方法如下:

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

    npm 安装--save-devgulp-webserver

  • 在 VS Code 中输入 Ctrl+Shift+P 并键入 Configure Task Runner。 Select 并按回车键。它将为您打开 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

我的运行脚本看起来像:

{
    "version": "0.1.0",

    "command": "explorer",

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

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

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

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

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

这是 运行 在多个浏览器中 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}"]
     }   
    ]
}

请注意,我没有在 edge 的 args 中键入任何内容,因为 Edge 是我的默认浏览器,只是为其提供了文件名。

编辑:您也不需要 -incognito 或 -private-window...只有我喜欢私下查看 window

Ctrl + F1 将打开默认浏览器。或者,您可以按 Ctrl + shift + P 打开命令 window 和 select "View in Browser"。 html 代码必须保存在文件中(编辑器上未保存的代码 - 没有扩展名,不起作用)

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

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

  1. 输入 Configure Task Runner,第一次执行此操作时,VS Code 会为您提供向下滚动菜单,如果有 select "Other." 如果您已完成在此之前,VS Code 只会将您直接发送到 tasks.json.

  2. 一次在 tasks.json 文件中。删除显示的脚本并替换为以下内容:

{
    "version": "0.1.0",
    "command": "Chrome",
    "osx": {
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    },
    "args": ["${file}"]
}
  1. 切换回 html 文件并按 Command + Shift + b 在 Chrome.
  2. 中查看您的页面

如果您正在 Mac 这个 tasks.json 文件:

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

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

如上所述创建 tasks.json 并使用 +shift+b[= 调用它27=]。

如果您希望它在 Chrome 中打开,则:

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

这将执行您想要的操作,如在应用程序已打开的情况下在新选项卡中打开。

您现在可以安装扩展程序 View In Browser。我在 windows 上用 chrome 测试了它,它正在工作。

vscode版本:1.10.2

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

一键式解决方案只需从 Visual Studio 市场安装 open-in-browser 扩展。

最近在 www.lynda.com

的 visual studio 代码教程之一中发现了此功能

按 Ctrl + K 然后按 M,它将打开“Select 语言模式”(或单击右下角那个笑脸前的 HTML),输入 markdown 和按回车

现在按 Ctrl + K,然后按 V,它将在附近的选项卡中打开您的 html。

Tadaaa!!!

现在 emmet 命令在我的 html 文件中无法在此模式下工作,所以我回到了原始状态(注意 - html 标签 tellisense 工作得很好)

要返回原始状态 - 按 Ctrl + K,然后按 M,select 自动检测。 emmet 命令开始工作。如果您对 html 只有观众感到满意,那么您就没有必要回到原来的状态。

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

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

VS Code 有一个 Live Server Extention 支持从状态栏单击启动。

部分功能:

  • 从状态栏单击启动
  • 实时重新加载
  • 支持Chrome调试附件

我只是 re-posting 我在 msdn 博客中使用的步骤。它可能对社区有所帮助。

这将帮助您 使用 VS Code 设置名为 lite-server 的本地 Web 服务器,并指导您在 localhostdebug 中托管静态 html 文件 Javascript代码。

1.安装 Node.js

如果还没有安装,获取它 here

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

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

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

3。添加一个package.json文件到项目文件夹

然后copy/paste以下文字:

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

4。安装网络服务器

在您的项目文件夹上打开的终端 window(Windows 中的命令提示符)中,运行 此命令:

npm install

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

5.启动本地网络服务器!

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

在同一终端中 window(Windows 中的命令提示符)运行 此命令:

npm start

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

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

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

备注:

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

就是这样。现在,在任何编码会话之前,只需键入 npm start 就可以开始了!

最初发布在 heremsdn 博客。 致谢作者:@Laurent Duveau

可能大多数人都能从上述答案中找到解决方案,但看到 none 如何为我工作 (vscode v1.34) 我想我会分享我的经验。如果至少有一个人认为它有帮助,那么酷而不是浪费 post、amiirte?


无论如何,我的解决方案 (windows) 是 a-top @noontz 的解决方案。他的配置对于旧版本的 vscode 可能已经足够了,但对于 1.34 就不行了(至少,我无法让它工作..)。

我们的配置 几乎 相同,除了一个 属性 —— 属性 是 group 属性。我不确定为什么,但如果没有这个,我的任务甚至不会出现在命令面板中。

所以。 windows 用户 运行 vscode 1.34:

的工作 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}"
            ],
            "group": "build",
            "problemMatcher": []
        }
    ]
}

请注意,problemMatcher 属性 不是此工作所必需的,但如果没有它,您将需要执行额外的手动步骤。试图阅读有关此 属性 的文档,但我太笨了,无法理解。希望有人会过来给我上课,但是,是的,在此先感谢您。我所知道的是——包括这个 属性 和 ctrl+shift+b 在新的 chrome 选项卡中打开当前的 html 文件,没有麻烦。


简单。

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

  2. 搜索 open in browser 并安装它

  3. 右键单击您的 html 文件,然后 select“在浏览器中打开”(Alt + B)

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

备注

  • 如有必要,将windows 属性替换为其他OS
  • ${config:chrome.executable} 替换为您自定义的 chrome 位置,例如"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
  • ${config:chrome.profileDir} 替换为您的客户 chrome 配置文件目录,例如 "C:/My/Data/chrome/profile" 或忽略它
  • 如果你愿意,你可以保留上面的变量。为此,请在 settings.json - user or workspace - 中添加以下条目,根据需要调整路径:
"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"
  • 您可以重新使用这些变量,例如在 launch.json 中用于调试目的:"runtimeExecutable": "${config:chrome.executable}"

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

然后用这个关键句在扩展中搜索在默认浏览器中打开。你会发现 this 扩展。对我来说更好。

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

对于 Mac,将您的 tasks.json(在 .vscode 文件夹中)文件内容设置为以下内容并使用 SHFT+COMMAND+B 打开。

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Chrome Preview",
            "type": "shell",
            "command": "open -a /Applications/Google\ Chrome.app test.html",
            "problemMatcher": [],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

VSCode 任务 - 通过应用程序包标识符打开(仅限 macOS)。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Open In: Firefox DE",
      "type": "process",
      "command": "open",
      "args": ["-b", "org.mozilla.firefoxdeveloperedition", "${file}"],
      "group": "build",
      "problemMatcher": [],
      "presentation": {
        "panel": "shared",
        "focus": false,
        "clear": true,
        "reveal": "never",
      }
    }
  ]
}

以下在 windows 10 ->

版本 1.53.2 中工作
  • 在终端菜单中选择 运行 活动文件
  • 它在默认边缘浏览器中执行了 html 文件

启动本地网络服务器!

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

在同一终端中 window(Windows 中的命令提示符)运行 此命令:

npm 启动

VS Code 团队现在有一个名为“实时预览”的官方扩展

快速设置:

  1. 安装 Microsoft 的“实时预览”扩展程序。
  2. 从工作区打开一个html文件,当前工作区外的文件不起作用。
  3. 运行命令> Live Preview: Show Preview (External Browser)

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

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

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