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
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 have "<!-- -->" every time you want to remove some piece of code to run some tests. This 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:
- Press "Ctrl+k Ctrl+s" and type "emmet wrap"
- Move the mouse over the "Emmet: Wrap with Abbreviation" and click the '+' (plus sign) on the left.
- Choose a shortcut for it. I like using "Alt+w", so I just press it followed by "Enter".
Now that your tag wrapping command is set:
- Select the lines you want to put inside your tag
- Press "Alt+w" (or the shortcut you chose) and an input box will appear
- Type the tag you want to be their parent and voilá, your new tag is wrapping them.
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.
There are many different elements you can create with this tool. To see more examples of the emmet syntax, visit: https://docs.emmet.io/cheat-sheet/
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!