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 + `
2. Close all open editor tabs
Windows/ Linux : Ctrl + k + w
Mac : Cmd + k + w
3. Opens the palette to search for a file
Windows/ Linux : Ctrl + p
Mac : Cmd + p
4. Move line up or down
Windows/ Linux : Alt + Up/Down
Mac : Option + Up/Down
5. Split editor view
Windows/ Linux : Ctrl + \
Mac : Cmd + \
6. Format document
Windows: Shift + Alt + F
Linux : Ctrl + Shift + I
Mac : Shift + Option + F
7. Toggle Sidebar
Windows/ Linux : Ctrl + B
Mac : Cmd + B
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>
9. Multiplication
- ul>li*2
<ul>
<li></li>
<li></li>
</ul>
10. Child
- nav>ul>li
<nav>
<ul><li></li></ul>
</nav>
11. Sibling
- div+p+a
<div><div>
<p></p>
<a></a>
12. Text
- a{Click Me}
<a href="">Click Me</a>
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>
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>
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>
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!
Top comments (1)
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.