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

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

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

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: https://code.visualstudio.com/docs/getstarted/tips-and-tricks