DEV Community

Cover image for VS Code Shortcuts
Breeana Payton
Breeana Payton

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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:

Gif Of A Line Of Code Being Copied

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):

Gif Of Multi Line Editing

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:

Emmet Abbreviation Example Gif

Now that first line looks a bit insane:

ul>li#question${Question}*5
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)