DEV Community

Cover image for VS Code shortcuts and tricks that I wish I knew sooner

VS Code shortcuts and tricks that I wish I knew sooner

Hannah Gooding on August 12, 2020

Introduction After teaching myself for a year I started coding full time when I joined the Founders and Coders web development bootcamp ...
Collapse
 
miku86 profile image
miku86
  • learn the shortcuts for Add Cursor Above and Add Cursor Below
  • learn the shortcuts for Move Line Up and Move Line Down
  • learn the shortcuts for View: Toggle Side Bar Visibility
  • learn the shortcuts for View: Toggle Integrated Terminal
  • learn the shortcuts for View: Show Search
  • learn the shortcuts for Search: Replace in Files
  • learn the shortcuts for File: New Untitled File
  • learn the shortcuts for View: Open Next Editor
  • learn the shortcuts for View: Open Previous Editor
  • learn the shortcuts for View: Close Editor ...

VSCode is quite mouse-less to use.

Collapse
 
hannahgooding profile image
Hannah Gooding

Great tips! Learning that alt moved lines up and down also blew my mind! Luckily I learned that quite quickly through pairing with someone over Liveshare :)

Collapse
 
vaskrist profile image
vaskrist

These also tremendously help my productivity since they operate not only on the current line, but also on all lines with any selection:

  • learn the shortcuts for Copy Line Down and/or Copy Line Down
  • learn the shortcuts for Delete Line
Collapse
 
koistya profile image
Konstantin Tarkus • Edited

Setting up VS code snippets does definitely pay off.

github.com/kriasoft/nodejs-api-sta...

Collapse
 
hannahgooding profile image
Hannah Gooding

I know, I can't believe how long I spent manually counting nested folders when it took 2 seconds to Google the extension haha!

Collapse
 
yvettelau profile image
YvetteLau

Thanks for sharing!

I want to translate it into Chinese to help more developers, Can I get your authorization?
I will give credit at the top of the article.

Collapse
 
hannahgooding profile image
Hannah Gooding

Hi Yvette, sure that's fine with me. Please can you send me the link afterwards?

Collapse
 
yvettelau profile image
YvetteLau

Yes, of course

Collapse
 
_phzn profile image
Kevin Lewis

It might be useful to know that you can do multi-line snippets in VS Code by providing multiple strings to the body array:

"Setup Express & Body Parser": {
    "prefix": "expressBodyParser",
    "body": [
      "const app = require('express')()",
      "const bodyParser = require('body-parser')",
      "app.use(bodyParser.json())",
      "app.use(bodyParser.urlencoded({ extended: false }))",
      "",
      "$1",
      "",
      "app.listen(3000)"
    ]
},
Collapse
 
jefftrusty profile image
Jeff Trusty

I got a lot of tips from this article a year ago:

dev.to/jsmanifest/21-vscode-shortc...

Collapse
 
hannahgooding profile image
Hannah Gooding

All so helpful - thank you for sharing!

Collapse
 
gelzibar profile image
Andrew Hill

I'd never even looked at Enmet and those shortcuts seem like they'll be such a QoL improvement. Bracket Pair Colorizer is a godsend!

Collapse
 
indcoder profile image
Augustine Correa

Please use Bracket Pair Colorizer 2 which is much better & faster than the 1st edition but the developer cant change because there are breaking changes between the two editions

github.com/CoenraadS/Bracket-Pair-...

Collapse
 
hannahgooding profile image
Hannah Gooding

Thank you for pointing this out Augustine, I have edited the article to link to v2 and added an editorial comment :)

Collapse
 
picwellwisher12pk profile image
Amir Hameed

Emmet was better in Sublime Text. In VS Code there are many conflicts with other extensions, so often Emmet directives do not work properly .

Collapse
 
hannahgooding profile image
Hannah Gooding

I'm curious which you extensions you find Emmet conflicts with?

Collapse
 
hannahgooding profile image
Hannah Gooding

To be honest, I haven't used Emmet shortcuts that often since learning about them; I haven't written code in HTML files in a while since I mainly work in React.js. But I just Googled how to make Emmet work in React and this article helped me set it up for JSX in minutes! Yay! ✨

Thread Thread
 
picwellwisher12pk profile image
Amir Hameed

I am not exactly sure what causes conflict but I know if configured properly Emmet can do wonders with JSX too. It worked fine few times but then it started messing up. I could not push much time into finding the cause.

Collapse
 
tashima42 profile image
Pedro Tashima

Great!

Collapse
 
jwp profile image
John Peters

Thanks Hannah!

Collapse
 
charalambosioannou profile image
Charalambos Ioannou

Amazing article. Keep going. Didn't know these existed but i will definitely use these shortcuts now.
Thanks 😀

Collapse
 
joses_mayweb profile image
Nkoro Joseph

Nice

Collapse
 
echoingnarc profile image
echoingnarc

Great tips! Thanks for the article.

Collapse
 
xarala221 profile image
Ousseynou Diop

Thank you for sharing.

Collapse
 
madza profile image
Madza

emmet is awesome, glad they made it built-in :)
all of the extensions are must-have as well ;)

Collapse
 
mallsjr profile image
Michael Alls

Thanks for sharing!

Collapse
 
evelynpei profile image
Evelyn Pei

Thanks for sharing these shortcuts, Hannah! Very useful

Collapse
 
not12thpotus profile image
Zach

While reading this, I noted that the emmet shortcodes mentioned here all work in PhpStorm as well.

Collapse
 
brandondamue profile image
Brandon Damue

Thanks for this post

Collapse
 
tgusd profile image
AirDavo!!

Wow!
Can you tutor me? You make things look so simple and easy to understand.

Collapse
 
rajeevranjancom profile image
Rajeev Ranjan

vscode_and_Linux_cheat_sheet_pdf
Have a look at this also will help you

github.com/rajeev-ranjan-au6/vscod...

Collapse
 
evelynms1 profile image
EvelynMS1

literal lifesaver, thank you so much Hannah!