Visual Studio Code shortcuts

Visual Studio Code Series

Follow this series to learn more about what you can do with Visual Studio Code!

Q: How to find out what command is bound to a specific key?

A: In the Default Keyboard Shortcuts, open Quick Outline by pressing Ctrl+Shift+O

  1. NOTE THAT EDITOR CODELENS CAN BE DISTRACTING, SO DISABLE IT IN SETTINGS
  2. OPEN EDITORS SIDE BY SIDE:
    1. OPEN THE 2nd EDITOR
    2. RUN : “MOVE EDITOR IN NEXT GROUP (ctrl+ Alt+ RightArrow)
  3. QUICKLY REVIEW CHANGE TO FILE OR LINE OF CODE USING: “Gitlens: Compare with previous commit”
  4. TO QUICKLY REVERT FILE TO PREVIOUS STATE, RUN COMMAND “Discard Changes”
  5. Quickly SET LANGUAGE MODE of any file, even ones without extension
  6. BEST IS TO DO Ctrl+ Shift+ P (or ctrl+ E for one handed use) AND START TYPING COMMAND, Eg “Fold…c”
  7. FOR COMMAND BAR
    1. ONE HAND: Ctrl+E
    2. TWO HANDS: Ctrl + P
  8. FIND ANY SYMBOL IN WORKSPACE: Ctrl+T OR IN FILE: Ctrl+Shift+O
  9. // Controls if suggestions should be accepted on commit characters. For instance in JavaScript the semi-colon (‘;’) can be a commit character that accepts a suggestion and types that character.
    “editor.acceptSuggestionOnCommitCharacter”: true,
  10. BUILD

    1. Ctrl+Shift+B Run Build Task workbench.action.tasks.build
  11. SETTINGS:
    Ctrl+, Open User Settings workbench.action.openGlobalSettings
  12. SIDEBARS: First toggle Activity Bar To Hide IT. NOW USE THESE:Ctrl+`: Toggle Integrated Terminalworkbench.action.terminal.toggleTerminal
    Ctrl+Shift+C Open New Command Prompt workbench.action.terminal.openNativeConsole
    Ctrl+Shift+V Toggle Markdown Preview markdown.showPreview
    Ctrl+Shift+F Show Search workbench.view.search
    Ctrl+B Toggle Sidebar Visibility workbench.action.toggleSidebarVisibility
    Ctrl+Shift+E Show Explorer / Toggle Focus workbench.view.explorer
    Ctrl+Shift+D Show Debug workbench.view.debug
    Ctrl+Shift+G Show Source Control workbench.view.scm
    Ctrl+Shift+X Show Extensions workbench.view.extensions
  13. Ctrl+Shift+Space Trigger Parameter Hints editor.action.triggerParameterHints
    Shift+Alt+F Format Document editor.action.formatDocument
  14. Ctrl+. Quick Fix editor.action.quickFix
  15. VIEW FILE STRUCTURE: Ctrl+Shift+P+ Then @: OR Ctrl+Shift+O
  16. PREVIOUS CURSOR POSITION
    1. Alt+Left Go Back workbench.action.navigateBack
      Alt+Right Go Forward workbench.action.navigateForward
  17. EDITOR
    Ctrl+\ Split Editor workbench.action.splitEditor
    Ctrl+1 Focus into First Editor Group workbench.action.focusFirstEditorGroup
  18.  REOPEN
    Ctrl+Tab Open Next workbench.action.openNextRecentlyUsedEditorInGroup
    Ctrl+Shift+Tab Open Previous workbench.action.openPreviousRecentlyUsedEditorInGroup
    Ctrl+Shift+T Reopen Closed Editor workbench.action.reopenClosedEditor
  19.  ERRORS
    1. Ctrl+Shift+M Show Problems workbench.actions.view.problems
      F8 Go to Next Error or Warning editor.action.marker.next
      Shift+F8 Go to Previous Error or Warning editor.action.marker.prev
  20. SMART SELECT CODE BLOCK
    1. Place the cursor inside the bracket (not directly next to a bracket) and execute editor.action.smartSelect.grow until everything inside the bracket is selected. The default shortcut is Shift+Alt+Right.
    2. You can shrink the selection with editor.action.smartSelect.shrink which has the default shortcut Shift+Alt+Left.
  21. Ctrl+Shift+\ Jump to matching bracket
  22. FOLD
    1. Ctrl+Shift+[ Fold (collapse) region editor.fold
      Ctrl+Shift+] Unfold (uncollapse) region editor.unfold
      Ctrl+K Ctrl+[ Fold (collapse) all subregions editor.foldRecursively
      Ctrl+K Ctrl+] Unfold (uncollapse) all subregions editor.unfoldRecursively
      Ctrl+K Ctrl+0 Fold (collapse) all regions editor.foldAll
  23. Introducing Visual Studio Code
    1. Ctrl + O: Open
      1. ? for all available shortcuts
    2. Ctrl + P: Command Palette
      1. Backspace + ? for all available shortcuts
  24. Getting Started with Visual Studio Code
    1. Crtl + B: Toggle Sidebar
    2. Ctrl + \: Split Window
  25. Intellisense
    1. tsd.d.ts: Can contain all references so that individual files needn’t list ’em
    2. angular. will prompt installation of typings for angular, but this will not add entry in tsd.d.ts. For that, use tsd command line with –save flag
  26. Refactoring
    1. VSCode will move a line up when you use OPT+UPARROW or down when you use OPT+DOWNARROW.
    2. Press F8 and you will see the first error or warning. Press F8 again and you will see the next one.
    3. press F12 to navigate to the definition or Ctrl + Click
    4. Ctrl + K +
      1. C to comment OR ctrl+ /
      2. D to uncomment
      3. Shift+Alt+A Toggle Block Comment editor.action.blockComment
    5. Peek at Definition: OPTION F12
    6. Find All References: SHIFT F12
    7. Change All Occurrences: CMD+F2
    8. Rename symbols in all files: F2
  27. Debugging
    1. click on the debug icon in the sidebar or CMD+SHIFT+D.
    2. Once the debug configuration is established you can choose your configuration form the dropdown and click the green button, or alternatively press F5 to begin debugging.
      • F5 continue
      • F10 step over
      • F11 step into
      • SHIFT+F11 step out
      • SHIFT+F5 stop
  28. Git Integration and Preferences

ALL SHORTCUTS ARE LISTED HERE: https://code.visualstudio.com/Docs/customization

Customizing Keyboard Shortcuts

All keyboard shortcuts in VSCode can be customized via the User/keybindings.json file.

  • To configure keyboard shortcuts the way you want, go to the menu under AppMenu | File , Preferences , Keyboard Shortcuts.
  • This will open to the left the Default Keyboard Shortcuts and to the right yourUser/keybindings.json file where you can overwrite the default bindings.

MY CUSTOM:

// Place your key bindings in this file to overwrite the defaults
[
{
“key”: “alt+z”,
“command”: “workbench.action.toggleZenMode”,
“when”: “editorTextFocus”
},
{
“key”: “ctrl+q”,
“command”: “workbench.action.closeEditorsInOtherGroups”
},
{
“key”: “alt+x”,
“command”: “gitlens.showCommitSearch”,
“when”: “gitlens:enabled”
},
{
“key”: “alt+f”,
“command”: “workbench.action.toggleMenuBar”
},
{
“key”: “ctrl+]”,
“command”: “workbench.action.navigateForward”
},
{
“key”: “alt+right”,
“command”: “-workbench.action.navigateForward”
},
{
“key”: “ctrl+[“,
“command”: “workbench.action.navigateBack”
},
{
“key”: “alt+left”,
“command”: “-workbench.action.navigateBack”
}
]
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s