7

After the vscode or any extension update finished, a release note will show in vscode. I can find the releasenote in my computer, it is HTML file, I open it by vscode and vscode shows the HTML code, don't like open by browser.

General speaking, I want to view html in vscode other than browser. I had searched it in internet, all are open browser by vscode and view html file.

I know the vscode can do it but I don't know how to do, aha.

Thanks.

Ehehe
  • 73
  • 1
  • 1
  • 4
  • 2
    What's stopping you from splitting the screen between VScode and the browser — or switching between two full screens of VScode and the browser? It's a completely wrong thing to ask for as the HTML you create will need to work in whatever browser or platform you target, **not** be displayed correctly inside VScode. If you want to use VScode as a browser, *you are doing it wrong*. – herrbischoff Nov 23 '17 at 17:01
  • Follow this [run html on localhost](https://jstutorial.medium.com/how-to-run-html-on-localhost-in-vs-code-on-mac-with-live-server-ae4fb69c0e9f) tutorial on medium. – InfiniteStack Sep 21 '22 at 14:11

2 Answers2

7

Visual Studio(VS) Code has built-in support for viewing HTML pages within the editor itself. You can follow below steps to open a browser like window in VS Code:

  1. Open the command pallete (Ctrl + Shift + P)

  2. Type Simple in the command pallete and then select Simple Browser: Show from the list of suggestions (Refer screenshot):

    enter image description here

  3. Enter URL in the URL box:

    enter image description here

  4. Press Enter

Also, there is a shortcut if you need to open the current page in a real browser e.g. Chrome, Edge, etc. You will see an arrow button in top right corner of the browser (Refer screenshot). When clicked, it'll open the current HTML page in the default browser of your PC.

enter image description here

Note: There is a difference in the behavior of VS Code's built-in browser and real browsers like Chrome or Edge. You cannot load any HTML file directly from disk unless you host it in a web server e.g. Live Server extension in VS Code, NPM Server, Apache, IIS, etc. So you can't open an HTML file in VS Code browser tab by providing a local computer drive path like C:\temp\mytestpage.html. It has to be a web URL e.g. https://localhost/mytestpage.html.

Credits: John Henry's answer

RBT
  • 24,161
  • 21
  • 159
  • 240
2

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

Matt Bierner
  • 58,117
  • 21
  • 175
  • 206