How to View an HTML File in the Browser with Visual Studio Code

How to view an HTML file in the browser 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.

how can i directly open browser to view html file from vs code?

If the live server extension is the one by Ritwick Dey..

.. then then after clicking Go Live, it will open your page in the default browser and reload it automatically, every time you save your work.
in some cases, it is helpful to save the folder containing your HTML to a Workspace, in VS Code, especially if you are writing an app using the MVC modal and the HTML and CSS are in subfolders.

How to open HTML file in vscode like in browser?

VS Code does not include built-in support for previewing html pages. This can be provided by an extension.

If you are interested in implementing this yourself, take a look at the webview api

However, as @herrbischoff noted, you should consider changing your workflow or expectations. A proper browser will offer a much better development experience and extensions like browser sync can connect VS Code to your browser of choice

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

Change your "args" option to something like:

"args": [
    "${workspaceRoot}/index.html"
],

You may need more directories to get to your index.html, I don't know your folder structure. But if index.html is in the root of your workspace the above will work.

Of course with this method you are not actually serving your web page or watching for changes to css, js or html so you would need to refresh your browser each time to see any changes.

how can i run my html file with live server in chrome browser

This is probably caused by the fact that Edge may be set as your default browser. Go to your Settings app, search "Default Browser" and modify your OS' default browser that way.

Why is my HTML file not displaying to the browser?

It loaded on Fire Fox, just not on Google Chrome for some reason. I'm sorry for wasting everyone's time. As I have said, I am unfamiliar with VS Code. Thank you for all of your suggestions.

---

Related Topics