Vscode Tutorial

This page is under construction. In the meantime you can learn still learn the basics of VSCode

VSCode Part 2:

VSCode Cheat Sheet:

Close Tab: CTRL + W

Named Function Snippet: nfn (and tab when ready to move to next step.)

UseStateSnippet: usstn (requires ES7 React/Redux snippet pkg by dsznajder)

UseEffectSnippet: uefs (requires ES7 React/Redux snippet pkg by dsznajder)

Quick Console Log: Ctrl + Shift + L (added keybinding) OR "clg" from es6 code snippets.

Quick Try Catch: tc (from JavaScript es6 snippets... I think?)

Jump to Explorer: Ctrl + Shift + E

(I needed to turn off my GPU Hotkeys YMMV)

Quick Jump to Character (Requires MetaJump): ALT + / "characters" type letters that popup (case sensitive)

Find and select from multiple files: Ctrl + Shift + f (enter search term) then CTRL + Down arrow (need to fix that to j) Then use arrows/vim keys to move up and down in explorer. Press SPACE BAR to collapse/expand the files. Press ENTER to move into currently highlighted file.

** Need to set "search.focus.nextInputBox" to the desired key to switch from input field to the results **

Quick Jump + Select (Uses MetaJump & Vim):

Summary: ALT + Shift + / = select & jump.

To delete a multi-line block, the entire lines, go to beginning of line. Then ALT + Shift + / then enter character(s) and select using the metajump popup characters. THEN move to end of line and run DELETE command (d)

VSCode Vim:

Jump to matching () [] {}: %

Delete rest of Word: dw

Delete Entire Word cursor resides in: diw

Delete to character: dt (character to stop deletion at) EX.

"backgroundColor" to delete "ground", have cursor on "g". type "dtC" to delete all the way to C. Does not delete "C".

Delete Entire Line: dd

Delete Character cursor is on: dl

Replace Character cursor is on: rg (= replace current character with g)

Create Named Function: nfn (es6 code snippets)

Jump to Next Quotes: f"

Jump to specific line: 15G (shift G) = go to line 15

Paste in Vim: P = Paste before cursor, p = paste after cursor

Change in Quotes: ci" OR ci' OR ci(

End of Line: $

Beginning of Line: 0

Move to beginning of next word: # w (ex. 2w move forward two words)

Move to beginning of previous word: # b (ex. 2b move to beginning of words two back.)

Move to End of word: e

Move to top of file: gg

Move to bottom of file: G

Save: :w

Search (vscode vim): Couldn't easily figure out a way to make vim search not suck in VSCode, so I removed the vim keybinding. CTRL +Shift + p and right click on the keybinding with "vim" something in it, and "remove" keybinding. That allows the normal search to work.

Normal Search: Ctrl + f "search term", Press ENTER to toggle to NEXT result, and SHIFT Enter to toggle to previous result. ESC to put cursor on the chosen results line.

Features Missing / UnSolved:

- Want a better way to get to end / beginning of a React component the same way I can use % to get to begin and end of ( ) and { }

- Doesn't delete matching bracket. If I only have {} and backspace the {, the closing bracket isn't removed.

- Wrap highlighted text with { } or " " etc.

- Can't Cancel the search results with ESC. probably because of VIM bindings.

- Advanced New File not working properly. with or without vim.

- Want to enter insert mode while putting a new line above / below. currently if I need a new line, I'll put cursor on line above, move to end. hit enter then type. Would like a faster way to do that.

- Don't like how "rafc" pulls in "import React". It may already be there. sometimes I want useState, sometimes useState and useEffect, etc..