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

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

使用记事本,您可以选择在浏览器中运行 . 如何使用Visual Studio Code执行相同的操作?

回答(19)

3 years ago

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

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

Steps:

  • 使用ctrl shift p(或F1)打开命令选项板 .

  • 输入 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}"] 不正确 .

  • 保存文件 .

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

enter image description here

3 years ago

@InvisibleDev - 尝试使用此方法在mac上运行:

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

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

3 years ago

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

一些功能:

  • 从状态栏单击“启动”

  • Live Reload

  • 支持Chrome调试附件

enter image description here

3 years ago

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

这是怎么做的:

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

npm install --save-dev gulp-webserver

  • 在VS代码中输入 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代码中输入 Ctrl+Shift+P 并在输入时输入"Run Task",您将看到您的任务"webserver"已选中并按Enter键 .

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

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

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

3 years ago

您现在可以安装扩展View In Browser . 我在带有铬的窗户上测试它,它正在工作 .

vscode版本:1.10.2

enter image description here

3 years ago

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

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

3 years ago

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

{
    "label": "Run on webserver",
    "type": "shell",
    "command": "http-server",
    "args": [
        "${file}",
        "-p",
        "8080",
        "-c-1",
        "-o"
    ],
    "problemMatcher": []
}

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

3 years ago

如果你只是在Mac上这个 tasks.json 文件:

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

...就是你需要在Safari中打开当前文件,假设它的扩展名为“.html” .

如上所述创建 tasks.json 并使用⌘shiftb调用它 .

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

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

如果应用程序已经打开,这将执行您想要的操作,就像在新选项卡中打开一样 .

3 years ago

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

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

1. Install Node.js

如果尚未安装,请获取here

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

2. Create a new folder for your project

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

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

然后复制/粘贴以下文本:

{
   "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

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

npm install

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

5. Start the local web server!

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

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

npm start

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

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

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

Notes:

  • 在完成编码之前,请不要关闭命令行提示符在你的应用程序中的一天

  • 它在http://localhost:10001上打开,但您可以通过编辑package.json文件来更改端口 .

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

最初在 msdn 博客中发布here . 积分转到作者: @Laurent Duveau

3 years ago

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

如果输入 > ,它将显示show和run命令

或者在你的HTML情况下,我认为打开命令调色板后 F5 应该打开调试器 .

资料来源:link

3 years ago

在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 并按Enter键

3 years ago

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

{
    "version": "0.1.0",

    "command": "explorer",

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

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

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

3 years ago

以下是如何在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是我的默认浏览器,只是给了它文件的名称 .

编辑:你也不需要-incognito也不需要-private-window ...只是我喜欢在私人窗口中查看它

3 years ago

For Mac - Opens in Chrome - Tested on VS Code v 1.9.0

  • 使用命令shift p打开命令选项板 .

enter image description here

  • 输入配置任务运行器,第一次执行此操作时,如果确实选择“其他”,VS代码将为您提供向下滚动菜单 . 如果您之前已经完成此操作,VS Code将直接发送给tasks.json .

  • 一旦进入tasks.json文件 . 删除显示的脚本并将其替换为以下内容:

{
“版本”:“0.1.0”,
“命令”:“Chrome”,
“osx”:{
“command”:“/ Applications / Google Chrome.app/Contents/MacOS/Google Chrome”
},
“args”:[“$ ”]
}

  • 切换回您的html文件,然后按Command Shift b在Chrome中查看您的页面 .

3 years ago

单击解决方案只需从Visual Studio市场安装open-in-browser Extensions即可 .

3 years ago

以下是适用于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}"
      ]
    }
  ]
}

3 years ago

Ctrl F1将打开默认浏览器 . 或者,您可以按Ctrl Shift P打开命令窗口并选择“在浏览器中查看” . html代码必须保存在文件中(编辑器中未保存的代码 - 没有扩展名,不起作用)

3 years ago

最近在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 viewer选项,当它能够在降价模式下显示html文件时 .

无论如何它很酷 . 快乐vscoding :)

3 years ago

你不能 . Visual Studio不适用于Web设计或开发 . 你必须编写一些代码来使它工作 .