HTML
CSS
SVG
JavaScript
Python
React
Node.js
Express
WebGL
PHP
Mongo
Crypto
VSCode
Premiere
Flutter
React
Web Development
Vscode Tutorials
    Just Another Ghost  @jst
    Writer at Learning Curve and generally just another ghost! Born of a earth and dust to create. Sooner or later everything we make will be destroyed.

    Learn CSS Visually! Every single CSS property visualized in this pictorial CSS guide book!

    best css book for beginner web developers

    ⭐⭐⭐⭐ and 1/2⭐ - owned by over 27.1K readers.

    Get this CSS book in PDF format, on Amazon or start reading this css book on your Kindle device today!

    VSCode Keyboard Shortcuts / VS Code Keyboard Bindings

    Viewed
    54.0K times
    semicolon@jst › tutorials › vscode keyboard shortcuts › visual studio code key bindings › Sat Apr 17

    Hey guys, thanks to visitors like you this article has been viewed over 47K times and counting. Over the years I've been improving this list of best visual studio code keyboard shortcut examples!

    I skipped simple ones like Ctrl-X and Ctrl-Z because that's obvious and the same in pretty much in any text editor. So my focus has been primarily on best vscode keyboard shortcuts. (If best is defined as keyboard shortcuts that boost productivity the most.)

    This article is not complete, so feel free to post a comment at the bottom and share how you use VSCode keyboard shortcuts to stay more productive, this can help the coding community!

    Many Visual Studio Code keyboard shortcuts can be freely looked up on official site. But there are so many, it can be overwhelming. And truth is, most keyboard shortcuts in vs code will never be actually used.

    In this article, I created a list of the most helpful VSCode shortcuts, with animated examples.

    Check out this quick (3 minute) VSCode Keyboard Shortcuts on tutorial on YouTube!

    How to change or disable any default VSCode keyboard shortcut

    In this article I created animations explaining some of my favorite VSCode keyboard shortcuts. To be honest the first thing you might want to do is change font size in VSCode (as well as theme colors.)

    For visual speed learners!

    Visual Studio Code Keyboard Shortcuts for VSCode (hotkeys, vs code hot keys and bindings) vs, code, hotkeys, hot, keys, combos, advanced, key, bindings, mac, windows, linux, indent, outdent, word, wrap, shrink, copy, expand, move, command, ctrl, alt, shift, control, vscode, visual, studio, code, keyboard, shortcuts,
    All VSCode Keyboard Shortcuts (Windows) All VSCode Keyboard Shortcuts (Mac OS X)

    In VSCode, aside from simple key combinations the Ctrl + K combo initiates a special action that requires second key of chord. It was added to increase the number of shortcuts you can use.

    When you press Ctrl + K you will notice vscode status bar change to a new message that says:

    (Ctrl + K was pressed) Waiting for second key of chord...

    Having said this...we will start this tutorial!

    Just scroll down through this list to see each vscode keyboard shortcut in action. Animations were created to demonstrate each use case. Or watch vscode keyboard shortcuts on YouTube to speed up learning process 🙂

    If you already know several basic VSCode shortcuts you might want to further improve your productivity by learning about the lesser known key combos.

    To create this list, I went through dozens of commonplace VSCode keyboard shortcuts. I avoided obvious ones and focused on extremely useful shortcuts that are not easy to figure out.

    1. Shrink or Expand VSCode Selection

    PlatformShortcut
    Windows Shift + Alt then left or right key.
    Mac shift + control then left or right key.

    Wait, what, we could do this?

    shrink or expand selection

    Open shrink or expand text selection on a separate page.

    I'll kick this article off with an example of my most favorite keyboard shortcut in VSCode. This shortcut allows you to either expand or shrink selection around natural block scope checkpoints (see animation above.)

    On Windows, hold Shift + Alt and use keyboard left and right arrows. On Mac it's shift + control and the arrows. Left arrow shrinks selection, right arrow expands it.

    This shortcut will stop at key points in your function block scopes. It will also stop inside your CSS style definition code and be mindful of opening and closing HTML tags. It helps you to intuitively do what you would have done using the mouse, which saves a lot of time if you develop a habit for using it.

    2. Move VSCode Selection One Line Up or Down

    Make selection. Hold Alt and press up or down arrows.

    vscode keyboard shortcut 2 - move selected text up or down one line

    Select a word, phrase or a function. While holding Alt use arrow keys up ordown to move the selection up or down in your source code.

    3. Copy Current VSCode Line Above or Below Selection

    You can duplicate current line or selection to make a copy of it above or below. This might save some time if you were to do same thing using classic copy and paste shortcuts Ctrl + C and Ctrl + V.

    Press Shift and Alt and use up and down arrow keys to copy the line either above or below. Continue holding Shift and Alt and using arrows to make as many copies as you need.

    (On a Mac, it's shift and option combo. But on the Mac control is also known as alt, as its secondary function.)

    vscode keyboard shortcut 3 - copy current line up or down

    4. Jump Between Matching Opening or Closing { Brackets }

    Sometimes it's hard to tell what function or block scope a closing bracket belongs to. This is true especially when your code is long (like complex API end-point) or generally long functions with multiple for-loops, callbacks and other scopes.

    You can easily jump between closing and opening brackets of the same scope with this useful VSCode keyboard shortcut.

    To make this work, first you have to make sure the cursor caret is positioned right at the beginning or end of an opening or closing bracket.

    Press Ctrl + Shift and \ on Windows. Note: On a Mac it's Ctrl + command ⌘ and \.

    vscode keyboard shortcut 4 - find or jump between opening or closing function scope bracket

    Your cursor will toggle-jump between opening and closing bracket.

    5. Indent Code Inside VSCode Selection

    Select a line, multiple lines or a block of code delimited by curly brackets that you want to indent. Now you can indent or outdent this block by using Ctrl and either [ or ] on Windows.

    On a Mac, it's command ⌘ and [ or ]

    vscode keyboard shortcut 5 - indent or outdent vscode selection

    6. Comment Entire VSCode Selection With Single-Line Comments //

    Sometimes you want to comment an entire block of code using // character and not the multi-line / / because multi-line comments cannot be nested. That situation can make this key combination useful.

    The shortcut is Ctrl + /.

    vscode keyboard shortcut 6 - wrap selection with single line comments

    VSCode is intelligent enough to understand whether you're commenting a block of JavaScript code, CSS code or if you're commenting HTML. In case of HTML it will actually use HTML comment brackets: <!-- --> (it will automatically identify type of code you're in by where your cursor and selection are.)

    7. Turn Selected Text Into Multiline Comment

    There are times you will want to wrap a block of code using the multi-line comment.

    Highlight the code you want to comment and press Shift + Alt + A.

    vscode keyboard shortcut 9 - create multi-line comment

    Pressing this combo again (or after selecting any multi-line comment block) will undo the multiline comment.

    8. Toggle Word Wrap

    To toggle word wrap press Alt + Z.

    vscode keyboard shortcut 8 - toggle text word wrap to collapse long lines of code

    There are times you need to wrap long lines of code so you don't have to use horizontal scrollbar to see them in their entirety. This shortcut will break down long lines of code.

    9. Create Multiple Cursor Selection On Any Line

    Use Ctrl + mouse click to add an extra cursor anywhere in your code.

    This is an interesting feature because it allows you to create a cursor (or multiple cursors) on any line, even if those lines are not neighboring. I personally don't know in which cases this can be useful but I thought it was so unique I decided to document it here.

    vscode keyboard shortcut x - create multiple cursor selection anywhere in your code

    10. Go To Line Number

    This one's pretty common, but I thought I'd include it here just to be complete.

    One of the essential shortcuts is Ctrl + G. It's helpful when you get a stack trace error and need to jump to a line of code where the error was generated.

    Hit the shortcut and start typing line number into popup input box. Then press Enter and your cursor caret will jump to that line number.

    vscode keyboard shortcut x - go to line number

    This example jumps to line number 10.

    11. Replace All Occurrences Of Text In Current Selection

    This keyboard shortcut allows you to change an instance of a word, phrase or any span of text defined by current text selection to a replacement text value that you simply type in.

    vscode keyboard shortcut 11 - change all occurrences of selection everywhere in the file

    Select something. Press Ctrl + Shift + L. This will select all words that match your current selection. It also adds a cursor to each text span matching your current selection.

    Simply start typing your replacement text and vscode will start replacing all instances of text matching your selection in-editor as you type. Press Escape to confirm changes.

    In this example we've selected the word "yellow" and changed it to "red" everywhere without invoking any extra search and replace UI. Multiple cursors are added automatically.

    Change all occurrences in selection / regex / whole word / case sensitive version

    If you need advanced search and replace (with regex, case sensitivity and whole word option) use the more advanced Ctrl + H shortcut to replace all occurrences of text.

    Alt + C toggles case-sensitivity.

    Alt + R toggles regex find and replace.

    Alt + W toggles whole word search.

    How To Change Binding On Existing VSCode Keyboard Shortcuts?

    Finally, what if you want to add your own keyboard shortcut to vscode?

    In VSCode you can assign your own keyboard shortcuts to any option or installed extension. You can also rename an existing keyboard shortcut key combination. VSCode has a global keyboard shortcut editor for that.

    Press Ctrl + K, followed by Ctrl + S (Note: you don't have to release Ctrl.) You'll enter keyboard shortcut editor where you can also search all key binding whether you're on Windows, Mac or Linux. This will display a screen with a list of all currently bound keyboard shortcuts, there are hundreds.

    Double click on any of the keyboard shortcuts and a new box will pop up with an input field. Click inside it and simply press the key combination to reassign to your own shortcut.

    You probably already know about this official VSCode keyboard shortcuts PDF. But VSCode potentially has hundreds of keyboard shortcuts not even mentioned in this official doc. You can access the table of all VSCode keyboard shortcuts, change binding of existing shortcuts or add your own custom key combination.

    VSCode Keyboard Shortcuts Covered In This Tutorial

    1. Shrink or Expand VSCode Selection
    2. Move VSCode Selection One Line Up or Down
    3. Copy Current VSCode Line Above or Below Selection
    4. Jump Between Matching Opening or Closing { Brackets }
    5. Indent Code Inside VSCode Selection
    6. Comment Entire VSCode Selection With Single-Line Comments //
    7. Turn Selected Text Into Multiline Comment
    8. Toggle Word Wrap
    9. Create Multiple Cursor Selection On Any Line
    10. Go To Line Number
    11. Replace All Occurrences Of Text In Current Selection

    VSCode Keyboard Shortcut Reference Table

    This table is an overview of all vscode keyboard shortcuts we've looked at in this tutorial and some extras that weren't mentioned. (Code formatting and folding and unfolding code for example.) It will be used as a vscode keyboard shortcut reference for improving this article in the future.

    For clarity only Windows shortcuts are shown. On a Mac, usually replace Shift with command key. The rest of it is the same in most cases.

    Command Shortcut
    Wait for second key of chord Ctrl + K followed by second key of chord
    Code Format Selection Ctrl + K + F
    Global Code Format Shift + Alt + F
    Un/fold (collapse) block Ctrl + Shift + [ or ]
    Un/fold (collapse) all Ctrl + K + 0 or J
    Un/fold (collapse) all subregions Ctrl + K + [ or ]
    Shrink or Expand Selection Shift + Alt + Arrow Keys
    Move Selection Alt + Arrow Keys
    Copy Current Line Shift + Alt + Arrow Keys
    Find Opening Bracket Ctrl + Shift + \
    Indent or Outdent Code Ctrl + [ or ]
    Single-Line Comment Ctrl + /
    Multiline Comment Shift + Alt + A
    Toggle Word Wrap Alt + Z
    Add Multiple Cursors Ctrl + mouse click
    Go To Line Ctrl + G
    Replace All Occurences Ctrl + Shift + L
    Toggle Case-sensitivity Alt + C
    Toggle Regex Search Alt + R
    Toggle Whole World Alt + W
    Add or Modify Keyboard Shortcut (add your own keyboard shortcut) Ctrl + K then S

    What is Ctrl + K + S? In VSCode Ctrl + K then S will pop open a searchable vscode keyboard shortcuts editor. This is where you can rewire existing key bindings. You can filter key bindings by using the search box. There are hundreds (if not over thousand) bindings.

    What is Ctrl + K? In VSCode Ctrl + K combo waits for "second key of chord." Double-key shortcuts help VSCode provide more unique shortcut combinations. When you press Ctrl-K VSCode will ask to provide "second key of chord," which is simply another key. For example Ctrl + K, followed by F is the shortcut for formatting code in selection.

    Other VSCode shortcut subjects to consider

    • vscode shift left
    • vscode shift enter
    • vscode shift tab
    • vscode shift block left
    • vscode shift tab
    • vscode shift alt f
    • vscode shift enter jupyter
    • vscode shift multiple lines
    • vscode shift tab not working
    • vscode ctrl click not working
    • vscode ctrl click not working c++
    • vscode ctrl click not working golang
    • vscode ctrl click not working php
    • vscode ctrl click not working react
    • vscode ctrl click not working typescript

    Final Words

    VSCode provides a wide range of keyboard shortcuts that allow you to quickly perform common actions. For example, you can use the "Ctrl+C" shortcut to copy text, or the "Ctrl+V" shortcut to paste text. You can also use keyboard shortcuts to navigate through your code, or to format and refactor your code.

    In addition, VSCode provides a number of customizable shortcuts that you can use to perform actions specific to your workflow. To view a list of all the keyboard shortcuts available in VSCode, press "Ctrl+K Ctrl+S". This will open the Keyboard Shortcuts reference in the sidebar. You can then use the search box to find a specific shortcut, or browse through the list of shortcuts by category.

    Many visual studio code keyboard shortcuts and key bindings are obvious whether you're on Windows 10, Mac or Linux - they are part of the standard set of shortcuts offered by many other text editors and IDE­s.

    But not all vscode shortcuts are useful, and some are hard to discover or guess. This guide focused on some of the less known but extremely helpful vs code keyboard shortcuts.

    Hopefully this tutorial helped you discover at least one new favorite shortcut!

    Learn CSS Visually! Every single CSS property visualized in this pictorial CSS guide book!

    best css book for beginner web developers

    ⭐⭐⭐⭐ and 1/2⭐ - owned by over 27.1K readers.

    Get this CSS book in PDF format, on Amazon or start reading this css book on your Kindle device today!

    Write For Us
    Sign Up Now  -  It's Free!
    © 2021
    DM Coming Soon
    f f