I remember starting out with HTML and hating when I had to code a list.
<ul>
<li>Question</li>
<li>Question</li>
<li>Question</li>
<li>Question</li>
<li>Question</li>
<!-- And so on... -->
</ul>
Though you could use copy and paste I couldn't imagine that developers would use such a slow method when it is their passion to make software more efficient. So I did some research and here are 3 of the shortcuts I came across that I now use everyday.
Copy the Line Without "Ctrl (Windows)/Command (Mac) + C"
You can copy a line of code without having to highlight, copy, and paste. Put your cursor on the line of code you want to copy, hold Shift + Alt/Option and press the down or up arrow key if you need to copy the line above or below. It looks like this:
Edit Multiple Lines at Once
What if you needed to change that list of questions to now be a list of answers? Instead of highlighting line by line you can now select multiple lines by holding Alt (Windows)/Option (Mac):
Use Emmet Abbreviations
So I've made my list, but now I realize that they all need an id if I want to be able to manipulate them individually in Javascript. IDs have to be unique. Do I need to edit line by line? What if there were 100 of these?
This issue could have been prevented using Emmet, a tool built into VS Code (and a lot of other code editors) that includes a ton of code shortcuts for some basic languages. The shortcut that would solve my problem looks like this:
Now that first line looks a bit insane:
ul>li#question${Question}*5
Let me break it down:
"ul": Letting Emmet know I want an unordered list
">": This is a "child" signifier. Whatever element follows will be the child of the ul.
"li": I want a li element inside the ul.
"#": The symbol for the id attribute (like in CSS) the text that follows is the value of id. So #question is id="question".
"$": This is tells Emmet "I want this numbered". By default it starts with 1.
"{}": This is a "text" signifier. This will add text to the nearest element.
"*(number)": This is a "multiplication" signifier. This tells Emmet you want the current element repeated "number" of times. We could replace the 5 in the example with a 20 if we had 20 questions.
For more Emmet Abbreviations you can visit here.
Hopefully these can help you speed up your coding a little. If you have any questions about Emmet feel free to comment below. I'm happy to help.
Top comments (0)