DEV Community

Cover image for VS Code Shortcuts
Breeana Payton
Breeana Payton

Posted on

2 1

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.

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more