Select Page

5 Awesome Visual Studio Code Extensions for Writing HTML

Posted on November 16, 2017
James Quick, Social Developer

One of the things that has made Visual Studio Code such an amazing editor is the plethora of extensions that make development and customization easier and quicker.  Even though Visual Studio Code is much newer than Sublime Text, for example, extension developers have caught on fast and gives us plenty of tools to enjoy.  That said, if you are a Visual Studio Code user and you have not explored its extensions, you are severely missing out.  That said, let’s take a look at some of the most useful extensions for writing HTML.

1. Auto Close Tag

As you might have guessed, this extension will automatically the HTML tags that you open.  In other words, once you close an opening tag with an angled bracket, the corresponding closing tag will be auto generated.

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Auto Close Extension in Visual Studio Code

Auto Close Extension in Visual Studio Code

2. Auto Rename Tag

Also pretty obvious by name.  This extension allows you to edit either the opening or closing tag and automatically renames the corresponding closing or opening tag.

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Auto Rename Extension in Visual Studio Code

Auto Rename Extension in Visual Studio Code

3. HTML Tag Wrapper

This extension gives you the ability to surround a given piece of code with a tag.  Fun fact, it also auto-indents your code when you use it.

https://marketplace.visualstudio.com/items?itemName=hwencc.html-tag-wrapper

HTML Tag Wrapper extension for Visual Studio Code

HTML Tag Wrapper extension for Visual Studio Code

4. Live Server

Live Server is great for static pages.  With Live Server started, every time you save your .html file, the browser will automatically refresh with the latest code!

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Live Server extension for Visual Studio Code

Live Server extension for Visual Studio Code

5. Open In Browser

Super simple.  This extension gives you the ability to open a file in your browser.  Without this, you would need to find the file in your file system to open it in the browser.

https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser

Open In Browser Extension for Visual Studio Code

Open In Browser Extension for Visual Studio Code

Subscribe

Subscribe

Javascript. Node. Angular. Bootstrap. Wordpress. You name it.  If you are a current or aspiring web developer looking to learn more, then subscribe!  I will share the latest news and tutorials as well as exclusive assets.

Thank you for subscribing!

Pin It on Pinterest

Share This

Share this post with your friends!