Visual Studio Code

🛠Tool

editor

shortcuts

VSCode Shortcuts

Jumping around in a file

Command	Result
`Ctrl + -`	(dash) Jump back to last cursor position
`Ctrl + _`	(underscore) Jump forward to next cursor position
`F8` (`Fn` -> `F8`)	Move to next typescript error
`Ctrl + g` -> then type line number	Jump to specific line number

Selection + Replace

Command	Result
`Cmd + d`	Select next occurance of the same word
`Option + Cmd + Down Arrow`	Add cursor directly on line below
`Option + Mouse Click`	Add another cursor at the position of the mouse click
`Shift + Option + Down Arrow`	Mark something + duplicate the marked lines
F2	Change variable everywhere

Code hints

Command	Result
`option + esc`	Open code-hints at current cursor position

Other

Command	Result
`Option + Shift + Down Arrow / Up Arrow`	Copy line
Press `Left` key	Close very long `node_modules` folder inside the bar
`Cmd + b`	Toggle left menu bar (when not in a Markdown file)
`Cmd + Shift + k`	Delete line without copying it (i.e. no cut via `Shift + x`)
Hover over variable + `Cmd + Shift + l`	Select all occurances of variable
`Cmd + i` or `option + esc`	Trigger auto-complete suggestion
`Cmd + Shift + y`	Toggle view of terminal/debug console
Click + `control`	Open file in split view
`Cmd` + `j`	Open panel (with terminal etc.)
`Cmd` + `m`	Open side bar

Notable VSCode extensions

Quokka JS lets you quickly rapid prototype by showing you console.log results directly in the editor. The package site.

Example

Just start typing. The output will be shown to the right of values.
```
const a = 8;

a    // 8
```
Polacode

Create great pics of code-snippets right within VSCode

Command line

Open file in VSCode from the command line.

code myfile.txt

Open entire folder in VSCode

code .

Format on save

Enforce rules by checking .svcode/settings.json into the codebase:

Example:

{
  "editor.codeActionsOnSave": {
    "source.organizeImports": false,
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "mdx"],
  "files.associations": {
    ".dsmrc": "jsonc",
    ".fantasticonrc": "jsonc",
    ".stylelintrc": "jsonc",
    "*.t": "plaintext"
  },
  "svgo.removeTitle": true,
  "svgo.removeViewBox": false,
  "typescript.tsdk": "node_modules/typescript/lib",
  "editor.formatOnSave": true
}

`launch.json`

Add field console to redefine console. Default is "internalConsole".

Change to "integratedTerminal" so that you get syntax highlighting

"console": "integratedTerminal",

Other

Open other repo in new window

Cmd + Shift + n to open a new window.
File -> Open to open a new project

Visual Studio Code

VSCode Shortcuts

Jumping around in a file

Selection + Replace

Code hints

Other

Notable VSCode extensions

Command line

Format on save

`launch.json`

Other

Open other repo in new window

Links

Discussion