Next, press Shift+Alt+F and VS Code will reformat your HTML to look much prettier. and navigate to the html folder.Ĭreate a file called index.html and add the following HTML exactly as it is written here with no indentation and with the extra vertical space between the paragraph () tags: If this feature is not available on your platform, open VS Code first, and then select File | Open Folder.

This will open Code for the entire folder rather than just for an individual file which is very handy for creating and editing many files in a given folder at once. Next, right click on this folder and choose Open with Code. Let’s explore these built-in HTML features as a first step in your journey to become a VS Code HTML editing pro.įirst, create a folder called html (or name of your choice) that you can use to store your HTML files. Microsoft has created an excellent introductory article that we will build upon. VS Code includes a number of built-in HTML features. These checkboxes are not checked by default.įamiliarize yourself with VS Code Out-of-the-box HTML features HTML Formatting This will provide the ability to right click on a folder in Windows Explorer and launch VS Code. If you are installing VS Code for Windows, be sure to check the two checkboxes shown in the screenshot below. If you already have VS Code installed, be sure you update your copy to the latest version by going to Help | Check For Updates… from the VS Code menu. Go to the VS Code Downloads page to download and install the appropriate bits for your platform (i.e. Let’s get started! Install Visual Studio Code Let’s get this out of the way up front: I’m a raving VS Code fan! In a previous post, I showed you how to Build an Amazing Markdown Editor, and now we’re going to learn how to create a fabulous HTML editor as well.

This setting can be set for all languages or by a specific language.Today we’re going to build an amazing HTML editor using Visual Studio Code (VS Code), a powerful, versatile cross-platform code editor that provides a lot of capabilities. To ensure that this extension is used over other extensions you may have installed, be sure to set it as the default formatter in your VS Code settings. Visual Studio Code Market Place: Prettier - Code formatterĬan also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. Prettier is an opinionated code formatter. Prettier Formatter for Visual Studio Code

Visual studio code format html