CODEWITHSUNDEEP
visual-studio-code
Ehehe
Ehehe

Reputation: 73

How to open HTML file in vscode like in browser?

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.

Upvotes: 7

Views: 19687

Answers (2)

RBT
RBT

Reputation: 25917

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

Upvotes: 8

Matt Bierner
Matt Bierner

Reputation: 65263

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

Upvotes: 2

Related Questions