VS Code- Shortcuts for Web Developers

Hey Coders! If you are doing web development or are into programming then you might have heard about VS Code or Visual Studio Code, one of the best modern IDE from Microsoft for modern developers.

Visual Studio Code is a fast and lightweight cross-platform code editor for writing modern web and cloud applications. You can use VS Code not only on Windows, Linux but also on Mac. In this article, I'm going to go through 15 VS Code and HTML shortcuts that I find the most convenient for me when I'm coding.

1. Open integrated terminal

Windows/ Linux : Ctrl + `
Mac : Cmd + `

1. Close all open editor tabs

Windows/ Linux : Ctrl + k  + w
Mac : Cmd + k + w

1. Opens the palette to search for a file

Windows/ Linux : Ctrl + p
Mac : Cmd + p

1. Move line up or down

Windows/ Linux : Alt + Up/Down
Mac : Option + Up/Down

1. Split editor view

Windows/ Linux : Ctrl + \
Mac : Cmd + \

1. Format document

Windows: Shift + Alt + F
Linux : Ctrl + Shift + I
Mac : Shift + Option + F

1. Toggle Sidebar

Windows/ Linux : Ctrl + B
Mac : Cmd + B

HTML Shortcuts

1. ID and Class Attributes

- div#header
<div id="header"></div>

- div.header
<div class="header"></div>

- div#id1.class1
<div id="id1" class=class1"></div>

- p.class1.class2.class3
<p class="class1 class2 class3"></p>

1. Multiplication

- ul>li*2

<ul>
     <li></li>
     <li></li>
</ul>

1. Child

- nav>ul>li

<nav>
   <ul><li></li></ul>
</nav>

1. Sibling

- div+p+a

<div><div>
<p></p>
<a></a>

1. Text

- a{Click Me}

<a href="">Click Me</a>

1. Grouping

- div>(header>ul>li*2>a)+footer>p

<div>
   <header>
      <ul>
           <li><a href=" "></a><li>
           <li><a href=" "></a><li>
      </ul>
    </header>
<footer>
  <p></p>
</footer>
</div>

1. Item Numbering

-ul>li.item$*5

<ul>
    <li class="items1"><li>
    <li class="items2"><li>
    <li class="items3"><li>
    <li class="items4"><li>
    <li class="items5"><li>
</ul>

1. Implicit tag Names

-ul>class

<ul>
   <li class="class"></li>
</ul>

- table>.row>.col

<table>
   <tr class="row">
      <td class="col"></td>
   </tr>
</table>

Conclusion

VS Code has a large number of shortcuts to increase our coding speed. This article only includes some must-know shortcuts for every web developer who works with VS Code. I'll make part2 of this if needed.

I hope you found some exciting shortcuts in this list to make your coding more efficient, and if there are any other tips of your own, don't forget to share them in the comments.

Thanks for reading 🐼 Happy Coding!