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

Question

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 thi

Answer 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 (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.

Answer 2

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

Answer 3

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

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

2. Type in Configure Task Runner, the first time you do this, VS Code will give you the scroll down menu, if it does select "Other." If you have done this before, VS Code will just send you directly to tasks.json.

3. Once in the tasks.json file. Delete the script displayed and replace it by the following:

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

4. Switch back to your html file and press Command + Shift + b to view your page in Chrome.

Answer 4

Here is the version 2.0.0 for Mac OSx:

{
  // 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}"
      ]
    }
  ]
}

Answer 5

probably most will be able to find a solution from the above answers but seeing as how none worked for me (vscode v1.34) i thought i'd share my experience. if at least one person finds it helpful then, cool not a wasted post, amiirte?

---

anyway, my solution (windows) is built a-top of @noontz's. his configuration may have been sufficient for older versions of vscode but not with 1.34 (at least, i couldn't get it working ..).

our configs are nearly identical save a single property -- that property being, the group property. i'm not sure why but without this, my task would not even appear in the command palette.

so. a working tasks.json for windows users running 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": []
        }
    ]
}

note that the problemMatcher property is not required for this to work but without it an extra manual step is imposed on you. tried to read the docs on this property but i'm too thick to understand. hopefully someone will come about and school me but yeah, thanks in advance for that. all i know is -- include this property and ctrl+shift+b opens the current html file in a new chrome tab, hassle free.

---

easy.

Answer 6

Step 1:

1. Open Visual Studio Code, then go to extensions.

2. Search for "open in browser".

   3.Install it.

   4.Right click on your html file,you will find the option "Open in Browser".

   That's All......................................................