5 VSCode quick tips to boost your HTML writing

When I started writing HTML and CSS documents, I found out that one of the best ways to practice building websites was cloning some of them. I spent a lot of time dealing with monstrous HTML documents with tags full of texts and links, which sometimes was not the most exciting experience. Since then, I’ve managed to look for some time-savers that could improve my efficiency inside VSCode, and here are some that I found:

1 — Selecting blocks of text

Have you ever tried to select that giant text inside a paragraph and end out selecting the whole content of your code? Had that great feeling as your page scroll goes faster than you expected more than once?

By clicking on some element inside a block in your HTML and pressing “Ctrl+Alt+Right Arrow”, you can select whole blocks of text or code. And as much as you keep pressing the right-arrow while holding “Ctrl+Alt”, higher levels of this block will be selected.

2 — Commenting code

The comment tag for HTML documents is not the easier one to type. It is not friendly to write that tag every time you want to remove some piece of code to run some tests. The quick hint here is to press “Ctrl+/” to create a commented area. It works both for a single line and for big blocks of selected code. Another way to have the same result is pressing “Ctrl+k Ctrl+c”.

3 — Creating multiple cursors

There are times when you have a list with 10 items and you need to give them all the same class. The usual approach for this is the good old “Ctrl+c” “Ctrl+v”.

The tip here is: when you select some item and it gets selected on other parts of the code, you can press “Ctrl+d” to create another cursor on that item’s next occurrence. So, for example, after selecting “<li>” you can press “Ctrl+d” to create a cursor on the next “<li>”, and keep pressing it to select the next ones. This way you can change all of them at once and you don’t need to worry about pasting things in the wrong place. If the items are aligned, you can try “Shift+Alt+Arrow Up (or Down)” for the same result.

Extra tip: When having a lot of cursors, you can use it to copy and paste some lists in a pretty easier way.

4 — Tag Wrapping

Isn’t it sad when you want to create a parent tag for a piece of code and the indentation goes all messy, the closing tag gets to the wrong place and you need to spend precious time rearranging everything? Tag wrapping is a great solution to this problem!

You must set up your VSCode to allow tag wrapping by doing the following:

Now that your tag wrapping command is set:

5 — Emmet

This is one of those cases we leave the best for the end. Emmet is a VSCode built-in tool to improve your productivity within your code. It allows you to create blocks of code only by typing a tag name and hitting “Tab” or “Enter”. There are pretty cool shortcuts you can use here, and I will show you a brief overview in the following image. Tip: These emmet commands can be used with the “tag wrapping” tip above.

And that’s it for now, folks! Hopefully, these tips will be helpful in your journey through HTML writing. And if you have another good one, leave a comment and let’s improve our coding together!

Related posts:

The experiences of women in STEM (science, technology, engineering and mathematics) during their college years and beyond have been explored in recent years in order to identify and address gender…

Our team focused on this idea because first of all we like trading, and we decided to create a platform for people to continue learning and improving their skills in a simple way without having to…

Bitcoin - digital currency (also called crypto-currency) that is not backed by any country’s central bank or government. Bitcoins can be traded for goods or services with vendors who accept Bitcoins…