Hey beginners!
If you're still right-clicking "Copy" or highlighting code with your mouse like it's 1999, this post is your wake-up call.I'm a web dev just like you - except now I code 2x faster thanks to 3 tiny VS Code shortcuts.
Let's dive in. ⬇️
Ctrl + D - Multi-Select MagicProblem: You wrote "color: red;" 7 times and now need to change it to "blue".Old way: Click - edit - repeat 7 timesNew way:
- Click one "red"
- Press Ctrl + D to select the next match
- Keep pressing until all are selected
- Type "blue" - all change at once
/* Before */
color: red;
color: red;
color: red;
/* After Ctrl+D - type "blue" */
color: blue;
color: blue;
color: blue;
Pro tip: Hold Alt while clicking to select multiple spots manually.
Ctrl + / - Comment Like a ProProblem: You want to "turn off" a line to test something.Old way: Delete - panic - undoNew way:
- Select line(s)
- Press Ctrl + /
- Instant comment! Press again to uncomment.
<!-- Ctrl + / does this -->
<!-- <p>This paragraph is hidden</p> -->
Works in HTML, CSS, JS, Python - everywhere!
Emmet Abbreviations - HTML on Steroids
Problem: Typing full HTML is slooow. New way: Type this - press Tab nav>ul>li*5>a{Item $}
Becomes:
<nav>
<ul>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</nav>
Try it: Type "!" + Tab - full HTML5 boilerplate in 1 second.
Your Turn: Try ONE Today
Reply below with:
- Which shortcut you tried
- What you built with it (screenshot or code!)