VS Code Tips & Tricks

Harald @digitarald Kirschner - June 2021

Cheat sheet with instructions to try out the tips & tricks covered in the talk.

Part 1: Personalize the look & feel.

Auto Save

• Setting Files: Auto Save (files.autoSave)

Activity Bar Position

• Right-click Activity Bar
• Command View: Toggle Side Bar Position

Arrange any view

• Drag icons and section headers from Side Bar and Panel
• Command View: Reset View Locations

Search in the Editor

• Setting Search: Mode (search.mode)
• Setting Search › Search Editor: Double Click Behaviour (search.searchEditor.doubleClickBehaviour)

Word wrap combos

• Setting Editor: Word Wrap (editor.wordWrap)

Better new files

• Setting Files: Default Language (files.defaultLanguage)

Pin your VIP tabs

• Right-click tab Pin
• Commands View: Pin Editor & View: Unpin Editor
• Shortcut cmd+k shift+enter

Wrapping tabs

• Setting Workbench › Editor: Wrap Tabs (workbench.editor.wrapTabs)

Bring your settings everywhere

• Right-click cog Turn on Settings Sync
• Command Settings Sync: Turn on …

Part 2: Coding tricks

Expand and shrink selection

• Commands Expand Selection (Shrink Selection)
• Shortcuts ctrl+shift+right (ctrl+shift+left)

Insert/replace suggestions

Setting Editor › Suggest: Insert Mode (editor.suggest.insertMode)

Suggest status bar

Setting Editor › Suggest: Show Status Bar (editor.suggest.showStatusBar)

Part 3: JavaScript debug all the things

Auto attach to NPM scripts

• Codelens Debug in package.json scripts section

JavaScript Debug Terminal

• Command Debug: JavaScript Debug Terminal
• Terminal click + icon, then JavaScript Debug Terminal

Auto attach to browser

• Click localhost:port links logged in the JavaScript Debug Terminal

Logpoints

• Right-click gutter Add Logpoint
• Right-click breakpoints Edit Breakpoint …, dropdown Log Message

Performance profiling

• Start/stop by clicking ⊙ on a thread in the Call Stack list
• Command Debug: Take Performance Profile
• Codelens for profiling times

Real-time flame chart

• Extension vscode-js-profile-flame (ms-vscode.vscode-js-profile-flame)