DEV Community

Cover image for VS Code- Shortcuts for Web Developers
Tabassum Khanum
Tabassum Khanum

Posted on

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

2. Close all open editor tabs

Windows/ Linux : Ctrl + k  + w
Mac : Cmd + k + w
Enter fullscreen mode Exit fullscreen mode

3. Opens the palette to search for a file

Windows/ Linux : Ctrl + p
Mac : Cmd + p
Enter fullscreen mode Exit fullscreen mode

4. Move line up or down

Windows/ Linux : Alt + Up/Down
Mac : Option + Up/Down
Enter fullscreen mode Exit fullscreen mode

5. Split editor view

Windows/ Linux : Ctrl + \
Mac : Cmd + \
Enter fullscreen mode Exit fullscreen mode

6. Format document

Windows: Shift + Alt + F
Linux : Ctrl + Shift + I
Mac : Shift + Option + F
Enter fullscreen mode Exit fullscreen mode

7. Toggle Sidebar

Windows/ Linux : Ctrl + B
Mac : Cmd + B
Enter fullscreen mode Exit fullscreen mode

HTML Shortcuts

8. 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>

Enter fullscreen mode Exit fullscreen mode

9. Multiplication

- ul>li*2

<ul>
     <li></li>
     <li></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

10. Child

- nav>ul>li

<nav>
   <ul><li></li></ul>
</nav>
Enter fullscreen mode Exit fullscreen mode

11. Sibling

- div+p+a

<div><div>
<p></p>
<a></a>
Enter fullscreen mode Exit fullscreen mode

12. Text

- a{Click Me}

<a href="">Click Me</a>
Enter fullscreen mode Exit fullscreen mode

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

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

15. Implicit tag Names

-ul>class

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

- table>.row>.col

<table>
   <tr class="row">
      <td class="col"></td>
   </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

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 part 2 of this, if needed.

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

For daily web development threads, updates and content follow me on Twitter.
https://twitter.com/codewithtee

Thanks for reading ๐Ÿผ
Happy Coding!

gif

Top comments (1)

Collapse
 
uthman_eli_cd82d29be9e571 profile image
Uthman Eli

EchoAPI for VSCode shines as one of the top platforms for API design and testing, offering a user-friendly interface and a powerful feature set that simplifies the entire process. Its accessible design makes it ideal even for beginners, while the ability to share API collections boosts team collaboration, leading to a smoother development workflow.