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

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

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

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

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

脚步：

1. 使用ctrl+ shift+ p（或F1）打开命令面板。

2. 输入Tasks: Configure Task旧版本或在旧版本上输入Configure Task Runner。选择它将会打开task.json文件。删除显示的脚本，并将其替换为以下内容：

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

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

   您也可以将此设置为使用["${file}"]“ args”的值来打开您当时打开的任何文件。请注意，$不在之外{...}，因此["{$file}"]是不正确的。

3. 保存文件。

4. 切换回html文件（在本示例中为“ text.html”），然后按ctrl+ shift+ b在Web浏览器中查看页面。

VS Code具有Live Server扩展，它支持从状态栏一键启动。

一些功能：

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

@InvisibleDev-要在Mac上尝试使用此功能，请执行以下操作：

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

如果您已经打开chrome，它将在新标签页中启动html文件。

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

这是操作方法：

• 打开命令提示符（cmd）并键入

  npm install --save-dev gulp-webserver

• 在VS Code中输入Ctrl + Shift + P，然后输入配置任务运行器。选择它，然后按Enter。它将为您打开task.json文件。删除所有内容，然后输入以下代码

task.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，然后输入“运行任务”，输入后，您将看到已选择任务“网络服务器”，然后按Enter。

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

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

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

现在，您可以安装扩展在浏览器中查看。我在带有镀铬的Windows上对其进行了测试，并且可以正常工作。

vscode版本：1.10.2

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

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

这是带键盘快捷键的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

第1步：

1. 打开Visual Studio代码，然后转到扩展。

2. 搜索“在浏览器中打开”。

   3.安装。

   4.右键单击您的html文件，您将找到“在浏览器中打开”选项。

   就这样................................................ ......

我只是重新发布我在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

如果您只是在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}"],
}

这将执行您想要的操作，例如，如果该应用程序已经打开，则在新选项卡中打开。

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

2020年4月18日更新答案

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

然后使用此关键字搜索扩展名在“默认浏览器中打开”。您将找到此扩展。对我来说更好。

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

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

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

2. 键入“配置任务运行程序”，这是您第一次执行此操作，如果它选择了“其他”，则VS Code将为您提供向下滚动菜单。如果您以前这样做过，VS Code只会将您直接发送到task.json。

3. 进入task.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中查看您的页面。

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

如果输入，>将显示显示并运行命令

或者对于您的HTML，我认为F5在打开命令面板后应打开调试器。

资料来源：链接

在Opera浏览器中打开文件（在Windows 64位上）。只需添加以下行：

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

注意“命令”：行上的路径格式。不要使用“ C：\ path_to_exe \ runme.exe”格式。

要运行此任务，请打开要查看的html文件，按F1，键入task Opera，然后按Enter。

我的跑步者脚本看起来像：

{
    "version": "0.1.0",

    "command": "explorer",

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

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

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

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

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

编辑：而且您不需要-incognito或-private-window ...这只是我，我想在一个私人窗口中查看它

最近在www.lynda.com上的Visual Studio代码教程之一中遇到了此功能。

按Ctrl + K，然后按M，它将打开“选择语言模式”（或单击在笑脸前显示HTML的右下角），键入markdown并按Enter

现在，按Ctrl + K，再按V，它将在“附近”选项卡中打开您的html。

Tadaaa !!!

现在emmet命令在我的html文件中无法在此模式下工作，所以我回到了原始状态（请注意-html标签tellisense运行良好）

要恢复到原始状态-按Ctrl + K，然后按M，选择自动检测。emmet命令开始起作用。如果您对仅使用html的查看器感到满意，则无需回到原始状态。

想知道为什么vscode能够以降价模式显示html文件时，默认情况下为什么没有HTML查看器选项。

总之很酷。快乐的vscoding :)

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

Ctrl + F1将打开默认浏览器。或者，您可以按Ctrl + shift + P打开命令窗口，然后选择“在浏览器中查看”。html代码必须保存在文件中（编辑器上未保存的代码-无扩展名，不起作用）

也许大多数人都可以从上述答案中找到一个解决方案，但是看到没有一个解决方案对我有用（vscode v1.34），我想我会分享自己的经验。如果至少有人觉得有帮助，那么冷静而不是浪费职位，amiirte吗？

无论如何，我的解决方案（windows）构建在@noontz的顶部。对于较旧的版本，他的配置可能就足够了，vscode但不能满足要求1.34（至少，我无法使其工作..）。

我们的配置几乎相同，只保存一个属性-该属性即group属性。我不知道为什么，但是如果没有这个，我的任务甚至不会出现在命令面板中。

所以。工作tasks.json的windows运行用户vscode 1.34：

{
    "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打开当前html文件chrome。

简单。

使用提示中的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其他操作系统替换属性
• ${config:chrome.executable}用您的自定义镶边位置替换，例如"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
• ${config:chrome.profileDir}用您的自定义Chrome配置文件目录替换，例如 "C:/My/Data/chrome/profile"或将其忽略
• 您可以根据需要保留上述变量。为此，请在settings.json-用户或工作区-中添加以下条目，根据需要调整路径：

"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"

• 您可以重复使用这些变量，例如 launch.json用于调试目的："runtimeExecutable": "${config:chrome.executable}"