VSCode Productivity Setup

Code faster with this snippets and shortcuts!

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