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

user4863890 picture user4863890 · May 4, 2015 · Viewed 449.1k times · Source

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?

Answer

yushulx picture yushulx · May 5, 2015

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