You are viewing the article How to Run HTML Files in Visual Studio Code at Lassho.edu.vn you can quickly access the necessary information in the table of contents of the article below.
X
This article was co-written by Stan Kats. Stan Kats is a technology engineer, chief executive officer and chief technology officer at STG IT Consulting Group in West HPlywood, California. Stan provides comprehensive technology solutions to businesses through IT services and to individuals through his consumer services company Stan’s Tech Garage. He holds a bachelor’s degree in international relations from the University of Southern California. He started his career at a Fortune 500 company. Stan founded his own companies to provide enterprise-level professional services to individuals and small companies.
This article has been viewed 27,147 times.
Visual Studio Code is Microsoft’s source code editor. The program is currently available for Windows, macOS, and Linux. With Visual Studio Code, you’ll be able to write and edit code in a variety of programming languages, including HTML. But what do you do when you want to implement some HTML code? Fortunately, there are many extensions for Visual Studio Code that make it easy to execute HTML code right on Visual Studio Code. Alternatively, you can also use Terminal to run the HTML file. This wikiHow teaches you how to run HTML files in Visual Studio Code.
Steps
Create, open and save HTML files
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/1/1e/Run-a-HTML-File-in-Visual-Studio-Code-Step-1-Version-2.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-1-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ 1/1e/Run-a-HTML-File-in-Visual-Studio-Code-Step-1-Version-2.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-1-Version-2.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Open Visual Studio Code. The program has an icon similar to a blue ribbon and is usually located in the Windows Start menu (Windows), Applications folder (Mac), or the Apps menu (Linux). Click the Visual Studio Code icon to launch the software.
- If you don’t have it installed, you can download Visual Studio Code for free at https://code.visualstudio.com/. Just click the Download button on the website and open the installation file right on the web browser or in the Downloads folder. Then, follow the instructions to complete the installation.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/d/d6/Run-a-HTML-File-in-Visual-Studio-Code-Step-2-Version-3.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-2-Version-3.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ d/d6/Run-a-HTML-File-in-Visual-Studio-Code-Step-2-Version-3.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-2-Version-3.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Open or create a new HTML file. Apply one of the steps below to open or create a new file:
- To create a new file, click File in the top menu bar. Then, click New File . Start typing the HTML code.
- To open an existing file, click File in the top menu bar. Then, select Open File . Go to the HTML file you want to open and click to select. Finally, click Open .
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/64/Run-a-HTML-File-in-Visual-Studio-Code-Step-3-Version-3.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-3-Version-3.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ 6/64/Run-a-HTML-File-in-Visual-Studio-Code-Step-3-Version-3.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-3-Version-3.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Save the file as HTML format. When you are ready to run the HTML file in Visual Studio Code, you need to save the file as HTML first. After saving the file, you can launch it in any web browser. Follow these steps to save the HTML file in Visual Studio Code:
- Click File in the top menu bar.
- Click Save as .
- Enter a filename in the “File Name” field.
- Use the drop-down menu next to “Save as type” to select ” HTML “.
- Click Save .
Using Terminal
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/5/5c/Run-a-HTML-File-in-Visual-Studio-Code-Step-4-Version-3.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-4-Version-3.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ 5/5c/Run-a-HTML-File-in-Visual-Studio-Code-Step-4-Version-3.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-4-Version-3.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Open Visual Studio Code. The program has an icon similar to a blue ribbon and is usually located in the Windows Start menu (Windows), Applications folder (Mac), or the Apps menu (Linux). Click the Visual Studio Code icon to launch the software.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/9/96/Run-a-HTML-File-in-Visual-Studio-Code-Step-5-Version-2.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-5-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ 9/96/Run-a-HTML-File-in-Visual-Studio-Code-Step-5-Version-2.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-5-Version-2.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Open or create a new HTML file. If the HTML file is not already open, proceed to open the existing file or create a new one and save it as HTML. If the HTML file is already open, you can view it by clicking the HTML file tag at the top of the screen.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/34/Run-a-HTML-File-in-Visual-Studio-Code-Step-6-Version-3.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-6-Version-3.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ 3/34/Run-a-HTML-File-in-Visual-Studio-Code-Step-6-Version-3.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-6-Version-3.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Open a new Terminal window. To do this, you click the Terminal icon at the top of the screen, then click New Terminal . Terminal is the only way to run HTML files in Visual Studio Code without using extensions. This is also the most complicated way.
- Or you can click View at the top and select Terminal .
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/a/a2/Run-a-HTML-File-in-Visual-Studio-Code-Step-7-Version-3.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-7-Version-3.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ a/a2/Run-a-HTML-File-in-Visual-Studio-Code-Step-7-Version-3.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-7-Version-3.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Type cd with the path to the HTML file and press ↵ Enter . You will be redirected to the location of the HTML file. For example, if the HTML file is in the Documents folder, type cd UsersusernameDocuments and press Enter (remember to replace “username” with your username).
- If the HTML file is saved in a drive with a different letter name than the operating system drive, you need to change to that drive in the command prompt before navigating to the HTML file. To proceed, just type the drive letter (eg D: for drive D:) and press Enter .
- If you don’t know where the HTML file is saved, you can right-click the tag for the HTML file at the top of the screen and choose Copy Path . Type cd into Terminal and paste the path right after that. Delete the filename at the end of the path and press Enter .
- If any folder in the path to the HTML file has spaces in the name, Terminal will not be able to navigate to that folder. Use File Explorer (Windows) or Finder (Mac) to go to folders with spaces in their names and rename them so that there are no spaces (for example, if there is a folder “HTML Files”, you need to change it to “HTML_Files”.)
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/0/00/Run-a-HTML-File-in-Visual-Studio-Code-Step-8-Version-3.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-8-Version-3.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ 0/00/Run-a-HTML-File-in-Visual-Studio-Code-Step-8-Version-3.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-8-Version-3.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Type start with the HTML filename and press ↵ Enter . For example, if you want to run the HTML index file, type start index.html and press Enter . The HTML file will launch in its own window and you can preview it.
- To close the preview, simply click the “x” icon at the top of the window. [1] X Research Source
Use the “HTML Preview” extension
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/0/08/Run-a-HTML-File-in-Visual-Studio-Code-Step-9-Version-3.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-9-Version-3.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ 0/08/Run-a-HTML-File-in-Visual-Studio-Code-Step-9-Version-3.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-9-Version-3.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Open Visual Studio Code. The program has an icon similar to a blue ribbon and is usually located in the Windows Start menu (Windows), Applications folder (Mac), or the Apps menu (Linux). Click the Visual Studio Code icon to launch the software.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/1/19/Run-a-HTML-File-in-Visual-Studio-Code-Step-10-Version-2.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-10-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ 1/19/Run-a-HTML-File-in-Visual-Studio-Code-Step-10-Version-2.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-10-Version-2.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Click the Extensions button. This button has a 4 square icon and is located to the left of the menu bar. The Extensions search menu will appear.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/5/57/Run-a-HTML-File-in-Visual-Studio-Code-Step-11-Version-2.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-11-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ 5/57/Run-a-HTML-File-in-Visual-Studio-Code-Step-11-Version-2.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-11-Version-2.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Type HTML Preview in the search bar. The search bar at the top of the Extensions menu appears on the left. A list of extensions that match the keyword you entered will appear. “HTML Preview” is an extension for Visual Studio Code that allows you to preview HTML files from within Visual Studio Code in split screen mode or full screen window.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/0/0b/Run-a-HTML-File-in-Visual-Studio-Code-Step-12-Version-2.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-12-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ 0/0b/Run-a-HTML-File-in-Visual-Studio-Code-Step-12-Version-2.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-12-Version-2.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Click the “HTML Preview” extension. This widget was created by Thomas Haakon Townsend and will show up first in the list. HTML Preview has an orange shield icon with the number “5” in the middle (HTML 5 logo).
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/3e/Run-a-HTML-File-in-Visual-Studio-Code-Step-13-Version-2.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-13-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ 3/3e/Run-a-HTML-File-in-Visual-Studio-Code-Step-13-Version-2.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-13-Version-2.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Click Install . This option is located below the “HTML Preview” heading on the info page to the right of the extension menu. The add-on will begin to be installed and it will take a few minutes.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/6b/Run-a-HTML-File-in-Visual-Studio-Code-Step-14-Version-2.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-14-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ 6/6b/Run-a-HTML-File-in-Visual-Studio-Code-Step-14-Version-2.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-14-Version-2.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Open or create a new HTML file. If the HTML file is not already open, proceed to open the existing file or create a new one and save it as HTML. If the HTML file is already open, you can view it by clicking the HTML file tag at the top of the screen.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/a/a0/Run-a-HTML-File-in-Visual-Studio-Code-Step-15-Version-2.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-15-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ a/a0/Run-a-HTML-File-in-Visual-Studio-Code-Step-15-Version-2.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-15-Version-2.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Click the preview button with the split screen icon and the magnifying glass on the left. This button is located in the upper right corner of the screen. The preview of the HTML file will appear on the split screen in Visual Studio Code.
- Hold down the Alt key and click the preview button to see a preview of the HTML code in full screen mode.
- To close the preview, simply click the “x” icon in the preview tab at the top of the screen.
Use the “open in browser” extension
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/8/8b/Run-a-HTML-File-in-Visual-Studio-Code-Step-16-Version-2.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-16-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ 8/8b/Run-a-HTML-File-in-Visual-Studio-Code-Step-16-Version-2.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-16-Version-2.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Open Visual Studio Code. The program has an icon similar to a blue ribbon and is usually located in the Windows Start menu (Windows), Applications folder (Mac), or the Apps menu (Linux). Click the Visual Studio Code icon to launch the software.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/8/88/Run-a-HTML-File-in-Visual-Studio-Code-Step-17-Version-2.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-17-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ 8/88/Run-a-HTML-File-in-Visual-Studio-Code-Step-17-Version-2.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-17-Version-2.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Click the Extensions button. This button has a 4 square icon and is located to the left of the menu bar. The Extensions search menu will appear.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/38/Run-a-HTML-File-in-Visual-Studio-Code-Step-18-Version-2.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-18-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ 3/38/Run-a-HTML-File-in-Visual-Studio-Code-Step-18-Version-2.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-18-Version-2.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Type open in browser in the search bar. The search bar is at the top of the Extensions menu on the left. A list of extensions that match your search term will appear. “open in browser” is an extension for Visual Studio Code that allows you to open HTML files in your commonly used web browser right in Visual Studio Code.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/2/2a/Run-a-HTML-File-in-Visual-Studio-Code-Step-19-Version-2.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-19-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ 2/2a/Run-a-HTML-File-in-Visual-Studio-Code-Step-19-Version-2.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-19-Version-2.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Click on the “open in browser” utility. This will be the top of the list. This utility was created by TechER with all names in lowercase. Click the extension to select it.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/61/Run-a-HTML-File-in-Visual-Studio-Code-Step-20-Version-2.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-20-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ 6/61/Run-a-HTML-File-in-Visual-Studio-Code-Step-20-Version-2.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-20-Version-2.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Click Install . This option is under the “open in browser” heading on the info page to the right of the extension menu. The add-on will begin installing, which usually takes a few minutes.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/7/7b/Run-a-HTML-File-in-Visual-Studio-Code-Step-21-Version-2.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-21-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ 7/7b/Run-a-HTML-File-in-Visual-Studio-Code-Step-21-Version-2.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-21-Version-2.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Open or create a new HTML file. If the HTML file is not already open, proceed to open the existing file or create a new one and save it as HTML. If the HTML file is already open, you can view it by clicking the HTML file tag at the top of the screen.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/4/42/Run-a-HTML-File-in-Visual-Studio-Code-Step-22-Version-2.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-22-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ 4/42/Run-a-HTML-File-in-Visual-Studio-Code-Step-22-Version-2.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-22-Version-2.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Right click anywhere in the HTML code. The context menu will appear.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/e/e1/Run-a-HTML-File-in-Visual-Studio-Code-Step-23-Version-2.jpg/ v4-460px-Run-a-HTML-File-in-Visual-Studio-Code-Step-23-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/ e/e1/Run-a-HTML-File-in-Visual-Studio-Code-Step-23-Version-2.jpg/v4-728px-Run-a-HTML-File-in-Visual-Studio-Code- Step-23-Version-2.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output “></div>”}
Click Open in Default Browser . The HTML file will open in the default web browser and you can view it. [2] X Research Source
- Or you can click Open in Other Browser and double-click the web browser you want to use.
- If asked to choose the default browser, click the browser in which you want to open the file and click Ok .
X
This article was co-written by Stan Kats. Stan Kats is a technology engineer, chief executive officer and chief technology officer at STG IT Consulting Group in West HPlywood, California. Stan provides comprehensive technology solutions to businesses through IT services and to individuals through his consumer services company Stan’s Tech Garage. He holds a bachelor’s degree in international relations from the University of Southern California. He started his career at a Fortune 500 company. Stan founded his own companies to provide enterprise-level professional services to individuals and small companies.
This article has been viewed 27,147 times.
Visual Studio Code is Microsoft’s source code editor. The program is currently available for Windows, macOS, and Linux. With Visual Studio Code, you’ll be able to write and edit code in a variety of programming languages, including HTML. But what do you do when you want to implement some HTML code? Fortunately, there are many extensions for Visual Studio Code that make it easy to execute HTML code right on Visual Studio Code. Alternatively, you can also use Terminal to run the HTML file. This wikiHow teaches you how to run HTML files in Visual Studio Code.
Thank you for reading this post How to Run HTML Files in Visual Studio Code at Lassho.edu.vn You can comment, see more related articles below and hope to help you with interesting information.
Related Search: