Online HTML formatter

Add HTML formatter in Sublime Text and VS code using plugins

HTML or Hypertext Markup Language helps us to write the content of our webpage. It controls the way that our website is going to look and what matter it is going to contain. To write better HTML, certain things needs to be kept in mind. These things include:

  • Proper indentation in tags
  • Closing your paired tags
  • Proper spacing between tags

And many more things. These things that require the basic formatting may improve code readability for other users. Thus, it is extremely essential to adhere to these rules. 

One tool that can help you in this is known as the HTML Formatter. In this article, we have covered a step by step process on how can you implement a HTML formatter in Sublime Text and VS code using some simple plugins. So, let us get started.

Sublime Text

Sublime Text is a sophisticated text editor for code, markup and prose. So, if you are trying to write your HTML using Sublime Text editor then follow these steps to integrate a HTML formatter plugin.

We are going to install this plugin using the Sublime Package Manager.

After opening the Sublime Text editor. Press Ctrl+Shift+P (Cmd+Shift+P in case of Mac) from your keyboard. This will bring up the Command Pallet as shown in the screen shot below.

In the Command Pallet, type install. Then from the options given select Package Control: Install Package

Once it is successfully installed. Then again being up the Command Pallet using the same shortcut, which is Ctrl+Shift+P (Cmd+Shift+P in case of Mac). Now type prettify, and from options select HTML-CSS-JS Prettify.

After this, you will see that some installation is going on in your Sublime Text editor. You can check the same in the bottom left corner of the screen shot attached. Yours should look similar. Wait for 5-10 seconds, until the installation is complete.

Now, again go to Command Pallet, an alternate way is to go to Tools -> Command Pallet.

Now type htmlprettify and select the option with the same name.

Now, you may get this kind of error popup. To rectify it we need to install node.js into our system. If that is already installed then you will not see this error and HTMLPrettify plugin will start working for you.

Installing Node.js

Go to official node.js website. You can click here

From the website click on the green button saying 14.16.0 LTS

This kind of dialog box will appear. So, select any location where you want to store your setup file for node.js

Now, wait while your setup file is downloaded. Once it is done, open up the file and a dialog box similar to the below screen shot will be visible to you. Click on Next.

Accept the license agreement and click on Next.

Make sure that your installing location is the same as shown in the below image. Otherwise it will not work. Click on Next.

Again, click on Next.

This step is optional, so if you want you can leave the box unchecked as well. Then click on next. 

Now, click on Install to begin your node.js installation.

If you see something like this, then your installation has begun. So wait for 2 – 3 minutes until the installation completes on its own.

Click on Finish.

Now, again run HTML prettify using Command Pallet and now you will be able to use it. As shown in the below image.

VS Code or Visual Studio Code

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.
So, if you are using VS Code or planning to use it to write your HTML code then this extension will help you to close your open HTML or XML tags with a shortcut. So, all you need is to remember a shortcut Alt+. and it will help you with your tags. So let us see how can we install the extension in VS Code. 

Search for Close HTML/XML tag in the extensions section of VS Code. Alternatively, you can follow this link. It will open up the web page of the extension. Similar to what is shown below. Now click on the Install button.

Before installing, it will make sure that VS Code is installed in your system. If it is then click Continue, else follow the link shown in pop up to download it for yourself.

Now, this kind of a dialog box will appear, select Open Visual Studio Code option to open up your Visual Studio Code for further process.

Now, click on install.

Once, it is installed then you will see the updated options of uninstall and disable in your extensions page.

Now, you can use this extension by using the Shortcut (Alt +.) or through Command Pallet (Ctrl+ Shift+ P). In Command Pallet search close tag and the extension will work as shown in the image.