Before continuing with the snippets guide, make sure to install the extension ”ES7+ React Snippets” and ”React - Typescript snippets”. There are also some other extensions that might be useful, check them out in my Settings article.

Shortcuts

Here’s the list of all the shortcuts I use.

Folder Navigation

• Ctrl+Tab: Change to last tab.

• Ctrl+W: Close current tab.

• Ctrl+.: Open settings tab.

• Ctrl+O: Open file.

• Ctrl+K, Ctrl+O: Open folder.

• Ctrl+`: Open/Close terminal.

Code Navigation

• Ctrl+End: Navigate to the bottom.

• Ctrl+Home: Navigate to the top.

• Ctrl+Left / Ctrl+Right: Navigate through entire words.

• Ctrl+S: Save current file.

• Ctrl+D: Select next match (based on selected text).

• Ctrl+F2: Select all match (based on selected text).

Code Manipulation

• Ctrl+X: Cut line (delete/copy at the same time).

• Ctrl+Enter: Insert line above.

• Ctrl+Shift+Enter: Insert line below.

• Alt+Up: Move line up.

• Alt+Down: Move line down.

• Ctrl+/: Comment whole line (JS & JSX).

• Alt+Click: Add additional cursor.

Snippets

I included the snippets extension above. Now, I’ll mention the specific snippets I tend to use.

• clg => console.log()

• imd => import { second } from 'first'

• imp => import second from 'first'

• dob => const {propName} = objectToDestruct

• ust => const [, set] = useState<>()

• usef => useEffect(() => { return () => {} }, [])

• rfc => Empty React Functional Component