Top Shortcut Keys and Hacks for Visual Studio Code (VSCode)

Visual Studio Code (VSCode) has become one of developers' most popular code editors due to its powerful features, extensibility, and cross-platform compatibility.

Mastering the essential shortcut keys and leveraging clever hacks in VSCode is essential to enhance your productivity further and streamline your coding workflow.

This article will explore the top shortcut keys and hacks to help you work more efficiently and save valuable time using VSCode.

Essential Shortcut Keys:

Opening and closing VSCode: Quickly launch or close the editor - Launching and closing Visual Studio Code (VSCode) efficiently can save valuable time and streamline your workflow.

Open the terminal or command prompt and navigate to the folder you want to open. For example:

cd /path/to/my-project

Type the following command and press Enter:

code .

This command will open the "my-project" folder in VSCode.

Remember to replace "/path/to/my-project" with the path to your desired folder.

Using these methods to open and close VSCode, you can quickly start coding and efficiently manage your coding sessions.

• Basic navigation: Efficiently move around your codebase - Visual Studio Code (VSCode) provides a variety of keyboard shortcuts that allow you to move quickly within your code. Here are some essential shortcut keys for basic navigation in VSCode:

• Moving the Cursor: Up: Arrow Up Down: Arrow Down Left: Arrow Left Right: Arrow Right

• Word-level Navigation: Move to the beginning of a word: Ctrl + Arrow Left (Windows/Linux), Option + Arrow Left (Mac) Move to the end of a word: Ctrl + Arrow Right (Windows/Linux), Option + Arrow Right (Mac)

• Line-level Navigation:
  • Move to the start of the line: Home
  • Move to the end of the line: End
  • Move to the beginning of the file: Ctrl + Home (Windows/Linux), Command + Home (Mac)
  • Move to the end of the file: Ctrl + End (Windows/Linux), Command + End (Mac)

  Page-level Navigation:

  Scroll up one page: Page Up

  Scroll down one page: Page Down

• Jumping between Sections:
  • Go to the beginning of the file: Ctrl + Home (Windows/Linux), Command + Home (Mac)
  • Go to the end of the file: Ctrl + End (Windows/Linux), Command + End (Mac)
  • Go to a specific line: Ctrl + G (Windows/Linux), Command + G (Mac), then enter the line number and press Enter
  • Go to a specific file: Ctrl + P (Windows/Linux), Command + P (Mac), then start typing the file name and select from the list

• File and Tab Navigation: Switch between open tabs: Ctrl + Tab (Windows/Linux), Command + Option + Right Arrow (Mac) Move to the next open tab: Ctrl + Page Down (Windows/Linux), Control + Tab (Mac) Move to the previous open tab: Ctrl + Page Up (Windows/Linux), Control + Shift + Tab (Mac) Close the current tab: Ctrl + W (Windows/Linux), Command + W (Mac)

• Splitting and Managing Views: Split editor horizontally: Ctrl + \ Split editor vertically: Ctrl + Shift + \ Switch between editor groups: Ctrl + 1/2/3/... (Windows/Linux), Command + 1/2/3/... (Mac)

• These shortcut keys will help you navigate your codebase efficiently and save time while moving through your code. By mastering these navigation shortcuts, you can swiftly jump between lines, files, and sections, enhancing your overall coding experience in Visual Studio Code.

Productivity Hacks:

• Customizing Keybindings:

Customizing keybindings in Visual Studio Code (VSCode) allows you to tailor the editor to your specific workflow and preferences. You can create shortcuts or modify existing ones to make your coding experience more efficient.

Creating custom shortcuts

• Open VSCode and go to "File" > "Preferences" > "Keyboard Shortcuts" or use the shortcut Ctrl + K Ctrl + S (Windows/Linux) or Command + K Command + S (Mac).

• The keyboard shortcuts file will open, showing the default keybindings on the left and your custom keybindings on the right.

• To create a custom shortcut, add a new entry in the "keybindings.json" file by specifying the command and the desired key combination.

  • {
        "key": "ctrl+shift+1",
        "command": "extension.myCustomCommand",
        "when": "editorTextFocus"
    }

In this example, pressing Ctrl + Shift + 1 will execute the "extension.myCustomCommand" command.

Modifying existing shortcuts:

• Open the keyboard shortcuts file as mentioned above.
• Find the command you want to modify by searching or browsing the default keybindings.
• Click the pencil icon next to the keybinding you want to change and enter your desired key combination.

If you want to change the keybinding for "Comment Line" from Ctrl + / to Ctrl + Shift + /, modify the entry like this:

{
    "key": "ctrl+shift+/",
    "command": "editor.action.commentLine",
    "when": "editorTextFocus"
}

Now, Ctrl + Shift + / will comment or uncomment a line of code.

• Snippets:

Snippets are predefined code templates that can be quickly inserted into your code. They help accelerate repetitive code insertion and improve your productivity.

Creating and using snippets:

• Open VSCode and go to "File" > "Preferences" > "User Snippets" or use the shortcut Ctrl + K Ctrl + S (Windows/Linux) or Command + K Command + S (Mac).
• Select the programming language you want to create a snippet or choose "New Global Snippets File" for snippets applicable across all languages.
• Add your snippets using a specific syntax in the JSON file that opens.  

1. To create a snippet for a basic HTML structure:

   "HTML Basic Structure": {
       "prefix": "html",
       "body": [
           "<!DOCTYPE html>",
           "<html>",
           "  <head>",
           "    <title>$1</title>",
           "  </head>",
           "  <body>",
           "    $2",
           "  </body>",
           "</html>"
       ],
       "description": "Basic HTML structure"
   }

When you type "html" and press Enter or Tab, the snippet will be inserted, and you can navigate through the placeholders ($1, $2) and customize them.

Shortcut for inserting snippets:

• Type the prefix of the snippet you want to insert and press Tab.
• Alternatively, press Ctrl + Space to trigger IntelliSense and choose the desired snippet from the dropdown.

• Integrated Terminal

The integrated terminal in VSCode allows you to run commands and scripts without leaving the editor, enhancing your productivity.

Opening and managing the integrated terminal:

• Open the integrated terminal using the shortcut Ctrl + (Windows/Linux) or Command + (Mac).
• To split the terminal vertically or horizontally, press Ctrl + Shift + 5 (Windows/Linux) or Command + Option + 5 (Mac) or right-click inside the terminal and select "Split Terminal" from the context menu.
• You can switch between multiple terminal instances using the shortcut Ctrl + (Windows/Linux) or Command + (Mac), followed by the number corresponding to the terminal instance.

• Running commands and scripts:

• • • Type your desired command or script directly into the terminal and press Enter to execute it.
    • You can also use the up and down arrow keys to navigate your command history.
    • If you frequently run specific commands or scripts, you can create tasks in the VSCode's task runner and execute them from the integrated terminal.

• Extensions and Plugins
  • Extensions and plugins are powerful tools that extend the functionality of VSCode, allowing you to boost your productivity by adding new features and capabilities.

  Installing and managing extensions:

  1. Click on the "Extensions" icon in the left sidebar of VSCode or use the shortcut Ctrl + Shift + X (Windows/Linux) or Command + Shift + X (Mac) to open the extensions marketplace.
  2. Search for the desired extension and click on the "Install" button.
  3. Once installed, the extension will appear in the list of installed extensions, where you can enable, disable, or uninstall it as needed.

• Popular extensions for productivity
  • GitLens provides enhanced Git functionality, allowing you to explore Git repositories, view blame annotations, and more.
  • Bracket Pair Colorizer" helps you visualize matching brackets with colour highlighting, making navigating and understanding your code structure easier.
  • "Live Server" enables a live-reloading local development server, making previewing and testing web applications convenient.
  • ESLint" or "Prettier" assists in formatting and linting, ensuring consistent code style and identifying potential errors.

• By customizing keybindings, utilizing snippets, leveraging the integrated terminal, and exploring extensions, you can significantly enhance your productivity in VSCode.

• Experiment with these productivity hacks and discover the ones that best suit your workflow, enabling you to code more efficiently and effectively.

Advanced Hacks

• Debugging Shortcuts on VSCode

Debugging is an essential part of the development process, and Visual Studio Code (VSCode) provides powerful features to help you debug your code effectively. Here are some useful shortcuts for debugging in VSCode:

Debugging code

• • Start debugging: F5
  • This shortcut starts debugging your code. It launches the debugger and begins executing your program.
  • Stop debugging: Shift + F5.
  • Pressing Shift + F5 stops the debugger and terminates the debugging session. It halts the execution of your program.
  • Restart debugging: Ctrl + Shift + F5
  • Use this shortcut to restart the debugging session. It stops the debugger and starts it again from the beginning.

• Breakpoints and stepping through code
  • Toggle breakpoint: F9
  • Place the cursor on the line where you want to set a breakpoint and press F9. It adds or removes a breakpoint at that line. Breakpoints pause the execution of your program at that specific line, allowing you to inspect variables and step through the code.
  • Step over: F10
  • Pressing F10 allows you to execute the current line of code and move to the next line. If the current line contains a function call, it will not step into that function but instead execute it as a single step.
  • Step into: F11
  • Use F11 to step into a function call. If the current line contains a function call, pressing F11 will take you inside that function, allowing you to debug it line by line.
  • Step out: Shift + F11
  • When you are inside a function while debugging, Shift + F11 allows you to step out of that function and return to the caller function.

1. Additionally, you can use the following shortcuts while debugging to control program flow:
   • Continue: F5
   • Pressing F5 resumes the execution of your program from the current breakpoint until it reaches the next breakpoint or completes.
   • Restart: Ctrl + Shift + F5
   • Use Ctrl + Shift + F5 to restart the debugging session from the beginning, discarding any previous state.
   • Stop: Shift + F5
   • Pressing Shift + F5 stops the debugger and terminates the debugging session.

These shortcuts will streamline your debugging process in VSCode, allowing you to set breakpoints, navigate through your code, and analyze program execution efficiently.

• Version Control Shortcuts on VSCode

Version control is a crucial aspect of software development, and Visual Studio Code (VSCode) provides seamless integration with Git, making it easier to manage and track changes in your codebase. Here are some useful shortcuts for version control in VSCode

Git integration:

• • Open the Source Control view: Ctrl + Shift + G
  • Pressing Ctrl + Shift + G opens the Source Control view in VSCode. This view provides a visual representation of your Git repository, showing modified files, branches, and other Git-related information.
  • Stage changes: Ctrl + Enter
  • With a file selected in the Source Control view, pressing Ctrl + Enter stages the changes in that file. Staging prepares the changes to be committed in the next Git commit.
  • Commit changes: Ctrl + Enter
  • After staging your changes, pressing Ctrl + Enter allows you to commit those changes. It opens a commit message input box where you can enter a meaningful commit message.
  • Push changes: Ctrl + Shift + Enter
  • Once you have committed your changes, pressing Ctrl + Shift + Enter pushes those commits to the remote repository.

• Common version control commands
  • Open the Command Palette: Ctrl + Shift + P
  • Use Ctrl + Shift + P to open the Command Palette in VSCode. You can access various version control commands by typing their names, such as "Git: Pull" or "Git: Fetch."
  • Switch branches: Ctrl + Shift + P, then type "Git: Checkout to..."
  • Press Ctrl + Shift + P to open the Command Palette, then type "Git: Checkout to..." and select the desired branch to switch to it quickly.
  • View Git blame annotations: Ctrl + Shift + P, then type "Git: Blame"
  • Use Ctrl + Shift + P to open the Command Palette, then type "Git: Blame" to view Git blame annotations. Blame annotations show who last modified each line of code in a file.
  • View Git history: Ctrl + Shift + P, then type "Git: View History"
  • Press Ctrl + Shift + P to open the Command Palette, then type "Git: View History" to access the Git history view. This view displays the commit history of the current branch, allowing you to navigate through the commits and inspect changes.

These shortcuts will simplify your Git workflow in VSCode, enabling you to perform version control operations efficiently, switch branches, view commit history and collaborate easily.

By mastering these shortcut keys and leveraging clever hacks in VSCode, you can significantly enhance your productivity and streamline your coding workflow.

Remember to practice and gradually incorporate these shortcuts and hacks into your daily coding routine to maximize their effectiveness. With time, you'll become a more efficient developer and accomplish more using Visual Studio Code in less time.

If you discover this, publish thrilling, discover extra thrilling posts like this on Learnhub Blog; we write a lot of tech-related topics from Cloud computing to Frontend Dev, Cybersecurity, AI and Blockchain. Take a look at How to Build Offline Web Applications. 

So, start exploring these shortcuts and hacks today and unlock the full potential of Visual Studio Code!