Alternative
Amazon
Article
Writing
Art
AI
Angular
Photoshop
Premiere
Animal Crossing
Blog
Story
Android
Android Studio
Davinci Resolve
CSS
Clipchamp
ChatGPT
Crypto
DALL-E
Discord
Davinci Resolve
Davinci Resolve 18
Dream Studio
Express
Filmora
Flutter
PC Games
Git
GPT
GPT3
GPT4
GTA
GTA 6
Ghost Together
Ghost Together
HTML
iOS
iMovie
Illustrator
JavaScript
Mac
Mongo
Midjourney
Minecraft
Node.js
NBA 2k24
OSX
PHP
Palworld
Python
Playground AI
Roblox
React
Recipe (Cooking)
React Native
Semicolon.dev
Starfield PC Game
Snapchat
Steam
Stable Diffusion
SVG
Threads
Text To Image (AI)
VSCode
Vim
Web Development
Windows
WebGL
Vscode Tutorials

    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

    viewed 99.9K times
    › tutorial › vscode › vscode keyboard shortcuts

    Let's take a look at some of the most important VSCode Keyboard shortcuts to help increase productivity. VSCode has hundreds of keyboard bindings. But, only few are important. If you master these keyboard shortcuts you're guaranteed to increase your performance.

    It took hours to put this tutorial together. Please help out by sharing it 🙂

    Click this button to share link on WhatsApp or Discord or with friends:

    (Help spread the word about this article)

    Hey guys, thanks to visitors like you this VSCode Shortcuts article has been viewed over 59.2K times. Over the years I've been improving this list of best visual studio code keyboard shortcut examples! Watch this quick video to get started:

    In This Video: Top 10 VSCode Keyboard Shortcuts

    Below you will find more VSCode learning material, as well as each keyboard shortcut explained individually. Don't forget to Ghost Together (sign up below, to find out what it means.)

    Let's Ghost Together
    Sign Up Now  -  It's Free!

    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!

    All Visual Studio Code keyboard shortcuts can be freely looked up on official site. But there are too many, it can be overwhelming, and 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.

    shrink or expand text selection vscode keyboard shortcut (YouTube video)

    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

    VSCode Keyboard Shortcut: Move selection up or down (YouTube)

    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

    Copy Selection Up or Down (YouTube)

    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

    Find Matching Brace (Scope Bracket) (YouTube)

    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

    Keyboard Shortcut: Indent in VSCode (YouTube)

    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

    Add Single Line Comment Around Selected Text (YouTube)

    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

    Add Multiline Comment Around Selected Text (YouTube)

    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

    VSCode Keyboard Shortcut: How to disable Word Wrap (YouTube)

    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 Alt + 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

    Multiple cursors allow you to edit code in multiple places at the same time.

    How to add / insert multiple cursors (YouTube)

    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.

    This example jumps to line number 10:

    vscode keyboard shortcut x - go to line number

    Go To Line Number (YouTube)

    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 Edit Keyboard Shortcuts In VSCode?

    Visual Studio Code allows you to assign your own keyboard shortcuts (edit keyboard shortcuts) to any standard editor function. You can also rename an existing keyboard shortcut. VSCode has a global keyboard shortcut editor for that.

    Here's what it looks like (VSCode has hundreds of shortcuts!):

    how to edit keyboard shortcuts in visual studio code

    To edit keyboard shortcuts in VSCode, press Ctrl K then Ctrl S

    To add your own keyboard shortcut to vscode, follow these steps.

    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!

    It took hours to put this tutorial together. Please help out by sharing it 🙂

    Click this button to share link on WhatsApp or Discord or with friends:

    (Help spread the word about this article)
     

    Articles Related To Vscode Community

    Last 10 Articles Written On Ghost Together

    Last 10 Vscode Questions Asked On Ghost Overflow

    Other Websites In Our Content Network

    Voxel Engine Tutorials | Jeep Windshield Decals | loom craft | etsy alternative | craigslist alternative | instagram alternative | discord alternative | reddit alternative | x alternative
    Write For Us
    Sign Up Now  -  It's Free!

    VSCode Keyboard Shortcuts

    Comments (2) New! (You can now post comments on articles!)

    (By posting a comment you are registering a Ghost Together account.)
    Register
    Register
    Post It
    DM Coming Soon
    f f