VS Code Shortcuts

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.