找到你要的答案

Q:How to view my HTML code in browser with Visual Studio Code?

Q:如何在Visual Studio代码浏览器查看我的HTML代码?

How to view my HTML code in a browser with the new Microsoft Visual Studio Code?

With Notepad++ you have the option to Run in a browser. How can I do the same thing with Visual Studio Code?

如何在一个新的微软Visual Studio代码浏览器查看我的HTML代码?

有了记事本+你可以在浏览器中运行。我怎么能用Visual Studio代码做同样的事情呢?

answer1: 回答1:

For Windows - Open your Default Browser - Tested on VS Code v 1.1.0

Answer to both opening a specific file (name is hard-coded) OR opening ANY other file.

Steps:

  1. Use ctrl + shift + p to open the Command Palette.

  2. Type in 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.

  3. Save the file.

  4. 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.

Windows打开默认的浏览器上测试与代码V 1.1.0

对打开特定文件(名称为硬编码)或打开其他文件的答案。

步骤:

  1. 使用Ctrl + Shift + P打开命令面板。

  2. 键入配置任务队列。选择它将打开tasks.json文件。删除显示的脚本,并将其替换如下:

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

    记住要改变的tasks.json文件“参数”部分为您的文件名。这会打开特定文件当你按下F5。

    你也可以把这个打开的文件打开时,使用[“$ {文件}”]为价值的“参数”。请注意,$ $以外的{ },所以[ { $文件} ] ]是不正确的。

  3. 保存文件。

  4. 切换到您的HTML文件(在本例中是“文本.html”),然后按Ctrl + Shift + B在Web浏览器中查看页面。

answer2: 回答2:

@InvisibleDev - to get this working on a mac trying using this:

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

If you have chrome already open, it will launch your html file in a new tab.

@ InvisibleDev -得到这个工作在Mac上尝试使用这:

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

如果你有Chrome已经打开,它将在一个新的选项卡启动您的HTML文件。

answer3: 回答3:

If you would like to have live reload you can use gulp-webserver, which will watch for your file changes and reload page, this way you don't have to press F5 every time on your page:

Here is how to do it:

  • Open command prompt (cmd) and type

    npm install --save-dev gulp-webserver

  • Enter Ctrl+Shift+P in VS Code and type Configure Task Runner. Select it and press enter. It will open tasks.json file for you. Remove everything from it end enter just following code

tasks.json

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "webserver",
            "isBuildCommand": true,
            "showOutput": "always"
        }
    ]
}
  • In the root directory of your project add gulpfile.js and enter following code:

gulpfile.js

var gulp = require('gulp'),
    webserver = require('gulp-webserver');

gulp.task('webserver', function () {
    gulp.src('app')
        .pipe(webserver({
            livereload: true,
            open: true
        }));
});
  • Now in VS Code enter Ctrl+Shift+P and type "Run Task" when you enter it you will see your task "webserver" selected and press enter.

Your webserver now will open your page in your default browser. Now any changes that you will do to your HTML or CSS pages will be automatically reloaded.

Here is an information on how to configure 'gulp-webserver' for instance port, and what page to load, ...

You can also run your task just by entering Ctrl+P and type task webserver

如果你想活的加载可以使用大口webserver,这将看你文件的更改和重新加载页面,这样你就不必每次页面上按F5:

这里是怎么做的:

  • 打开命令提示符(CMD)和类型

    安装,节省开发大口WebServer NPM

  • 输入Ctrl + Shift + P VS代码和类型配置任务转轮。选择它并按回车键。它会为你打开tasks.json文件。删除一切从它端进入只是下面的代码

tasks.json

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "webserver",
            "isBuildCommand": true,
            "showOutput": "always"
        }
    ]
}
  • In the root directory of your project add gulpfile.js and enter following code:

gulpfile.js

var gulp = require('gulp'),
    webserver = require('gulp-webserver');

gulp.task('webserver', function () {
    gulp.src('app')
        .pipe(webserver({
            livereload: true,
            open: true
        }));
});
  • Now in VS Code enter Ctrl+Shift+P and type "Run Task" when you enter it you will see your task "webserver" selected and press enter.

你的服务器现在将打开您的默认浏览器页面。现在的任何改变,你将为你的HTML或CSS页面将自动重新加载。

这是关于如何配置服务器的大口例如端口信息,哪些页面,…

你也可以通过输入Ctrl + P型和任务的服务器运行你的任务

answer4: 回答4:

In linux, you can use the xdg-open command to open the file with the default browser:

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

在Linux中,你可以使用XDG打开命令使用默认浏览器打开文件:

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

CTRL+SHIFT+P will bring up the command palette.
Depending on what you're running of course. Example in an ASP.net app you can type in:
>kestrel and then open up your web browser and type in localhost:(your port here)

CTRL+SHIFT+P will bring up the command palette.
Depending on what you're running of course. Example in an ASP.net app you can type in:
>kestrel and then open up your web browser and type in localhost:(your port here)

vscode