Editor Tips & Tricks

[waderyan]

From only two days with the team in Zurich, I have been exposed to a handful of tips and tricks in the editor I didn't know existed.

This is an idea for a doc page - "Editor Tips & Tricks". The idea is to have a page (I'm imagining with lots of animated gifs to demonstrate) to show cool things within the editor.

A couple I have already seen.

• vertical text selection
• staging portions of a commit

I'm sure @joaomoreno could add a lot to this page.

[joaomoreno]

👍

• Ctrl E as the only navigation model you'll ever need
• Full screen Code with terminal on OS X
• Open Recent action

ping @Microsoft/vscode

[isidorn]

• Ctrl B , Ctrl J easy way to enter focus mode
• Ctrl 1 , Ctrl 2, Ctrl 3 easy way to navigate between editors

[waderyan]

Here's another one. When did we add this? (Apologize graphics are poor)

[joaomoreno]

@alexandrudima did that

[alexdima]

• I use ctrl+d and ctrl+k ctrl+d a lot in combination with alt+c and alt+w (cmd+alt+c and cmd+alt+w on mac)
• did you know that you can undo the last cursor only operation with ctrl+u (sort of like undo but not touching the contents)

[egamma]

• Open a file on the side from the explorer by CTRL+CLICK
• Open Definition on the side: CTRL+K F12

[waderyan]

After talking to @chrisdias, we're thinking a good first stab at this is to do a git repo like vscode-awesome.

[Tyriar]

@waderyan as in an official tips & tricks repo which is linked to by vscode-awesome?

[waderyan]

Yeah. Although it doesn't need to be linked to by vscode-awesome but that is a good idea.

[egamma]

Toggle between minimized and maximized side editors.

1. minimize editor
   

2. click into the minimized editor to maximize and minimize the other editor
   

[Tyriar]

@egamma I actually did that by accident the other day and thought it was awesome, only just figured out how I did it though. Definitely a great candidate to tell people about.

[Tyriar]

Developers working on smaller modules/programs may find giving workbench.action.openRecent a keybinding useful, it pops up a 'search' dialog that you allows filtering of recent folders. I use it as a replacement for a "project manager" extension, bound to ctrl+alt+p. It's enables really fast folder switching once you're used to it

workbench.action.files.openFolder works in a similar way but it opens up the folder above the current folder in the native folder browser and isn't bound to just recent folders. I have that on ctrl+shift+o.

[egamma]

One tip to not forget, is to invite users to use the insider channel to get the latest.

[egamma]

Here is a tip for how to setup a large .js project:

• add a jsconfig.json
• exclude the folders with the generated JS
• use multiple jsconfig.json files when you have different project contexts e.g., client/server

[egamma]

Tip when using ES7 constructs disable the javascript validation and configure eslint for validation with React etc.

[egamma]

When node debugging use nodemon
nodemon --debug server.js

And configure the launch config using restart. {
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858,
"restart": true
}

In this way when you change the node.js server code, nodemon will restart and node and the VS Code debugger will re-attach.

[weinand]

Combine the nodemon tip with TypeScript: run tsc in watch mode and every TS edit will restart the server.

[bpasero]

Some tips in unspecific order:

• when the workspace is under git control, you see added, changed and deleted lines as decoration in the editor ("quick diff")
• the right hand side of a diff editor is fully functional and editable (unless you open it on the readonly git index)
• you can compare any 2 files from the explorer or command palette (Compare active file with...)
• you can drag and drop files into the explorer as well as drag files out of the explorer to other apps
• Ctrl/Cmd-click on variables allows you to view their source code in the hover (needs rich language support)
• You can use the Back/Forward command to jump between cursor locations and files
• Mouse support: Middle mouse to close a file, Buttons 4+5 to navigate back and forth
• Configure VS Code as external editor for git (this is a GA feature)

[jrieken]

• Cmd+{1,2,3}, Cmd+W to focus and close an editor
• select text in an editor, Cmd+Shift+F to search for that string

[gregvanl]

Closing since this is covered by Wade's wildly popular Tips and Trick repo https://github.com/Microsoft/vscode-tips-and-tricks