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

How can I 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?


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 (or F1) to open the Command Palette.

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

  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.

enter image description here


VS Code has a Live Server Extention that support one click launch from status bar.

Some of the features:

  • One Click Launch from Status Bar
  • Live Reload
  • Support for Chrome Debugging Attachment

enter image description here


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


  1. Open Extensions Sidebar (Ctrl + Shift + X)

  2. Search for open in browser and install it

    Ext > Open in Browser

  3. Right click on your html file, and select "Open in Browser" (Alt + B)

    Context Menu> Open in Browser