DEV Community

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

Read full post

miku86 • Aug 19 '20

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.

Hannah Gooding • Aug 21 '20

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 :)

vaskrist • Aug 24 '20

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

Konstantin Tarkus • Aug 12 '20 • Edited

Setting up VS code snippets does definitely pay off.

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

Hannah Gooding • Aug 14 '20

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

YvetteLau • Sep 1 '20

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.

Hannah Gooding • Sep 2 '20

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

YvetteLau • Sep 3 '20

Yes, of course

Kevin Lewis • Sep 17 '20

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)"
    ]
},

Jeff Trusty • Aug 13 '20

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

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

Hannah Gooding • Aug 21 '20

All so helpful - thank you for sharing!

Andrew Hill • Aug 12 '20

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!

Augustine Correa • Aug 18 '20

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

Hannah Gooding • Aug 21 '20

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

Amir Hameed • Aug 18 '20

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

Hannah Gooding • Aug 21 '20

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

Hannah Gooding • Aug 21 '20

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! ✨

Amir Hameed • Aug 21 '20

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.