Skip to content

Instantly share code, notes, and snippets.

@digitarald

digitarald/vscode-tips-cheat-sheet.md

Created June 2, 2021 20:30
Show Gist options
  • Save digitarald/f19acbe2bfdefa4d282b3196bde3fff7 to your computer and use it in GitHub Desktop.
Save digitarald/f19acbe2bfdefa4d282b3196bde3fff7 to your computer and use it in GitHub Desktop.
Download ZIP
VS Code Tips & Tricks Talk Cheat Sheet - OpenJS 2021
Raw
vscode-tips-cheat-sheet.md

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment