DEV Community

Cover image for Keyboard Shortcuts: React in VS Code
Jessica Triana
Jessica Triana

Posted on

Keyboard Shortcuts: React in VS Code

Honestly, much of what I've learned about programming in general seems like magic. I mean, how many times have you watched a code along video and seen the speaker make something happen instantly without ever explaining how they did it?

Often, it's simply a keyboard shortcut they've become so accustomed to using it doesn't even cross their mind to take a moment to explain it. While in reality, this is some of the most useful information to share during a working example!

Here are a few useful shortcuts:

1) option + up or down arrow
(windows: shift + up or down arrow)
Allows you to move a line of code up or down the page

2) command + /
(windows: control + / )
Comments out highlighted code

3) command + option + j
(windows: control + shift + j)
Opens the Chrome DevTools console

4) option + shift + F
(windows: alt + shift + F)
Instantly formats your code
Alt Text
This is the fastest way to perfectly indent your code and break out long lines into multiple short phrases.

5) rcc + tab 
(Provided by the JS JSX Snippets Extension in VS Code)
Creates a React Class Component based on the file name
Alt Text
A quick and easy way to to build a component from scratch without logging your train of thought.

6) (hold down) option + multiple clicks
(windows: alt + multiple clicks) 
Creates multiple cursors
Alt Text
Useful when you need to edit the same word in many places on a page.

Yes, it is important to learn syntax and naming conventions, but once you've got it down you'll start to prioritize speed over practicing your typing skills. 

For more keyboard shortcuts, visit the VS Code Docs:

Top comments (1)

magpiny profile image

Thanks for posting this. Your rcc reminded me of rfce.