When I started writing and 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 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 , and here are some that I found: HTML CSS HTML VSCode 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 inside a block in your HTML and pressing , you can select whole blocks of text or code. And as much as you keep pressing the right-arrow while holding " ", higher levels of this block will be selected. clicking on some element " Ctrl+Alt+Right Arrow " Ctrl+Alt 2. Commenting code The comment tag for 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 to create a commented area. It works both for a single line and for big blocks of selected code. HTML  "Ctrl+/" 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 and it gets selected on other parts of the code, you can to create another cursor on that item's next occurrence. So, for example, after selecting " you can press to create a cursor on the next , 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. select some item press "Ctrl+d" <li>" "Ctrl+d" "<li>" 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 to allow tag wrapping by doing the following: set up your VSCode Press " " and type " wrap" Ctrl+k Ctrl+s emmet Move the mouse over the " : Wrap with Abbreviation" and click the (plus sign) on the left. Emmet '+' Choose a shortcut for it. I like using " ", so I just press it followed by . Alt+w "Enter" Now that your tag wrapping command is set: you want to put inside your tag Select the lines (or the shortcut you chose) and an input box will appear Press "Alt+w" you want to be their parent and , your new tag is wrapping them. Type the tag voilá 5. Emmet This is one of those cases we leave the best for the end. is a VSCode built-in tool to improve your productivity within your code. It allows you to create blocks of code only by and hitting . There are pretty cool shortcuts you can use here, and I will show you a brief overview in the following image. Emmet typing a tag name " Tab " or " Enter " 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 syntax, visit: emmet 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!

5 VSCode Quick Tips to Boost Your HTML Writing

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How To Configure Rails Tests with RSpec, FactoryBot and Capybara

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

How To Configure Rails Tests with RSpec, FactoryBot and Capybara

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps