Note details

Code faster with these VS Code shortcuts

BY u6dwl
August 25, 2025
Public
Private
6552 views

Speeding Up Your Coding with VS Code Shortcuts

Introduction

  • Problem: Switching between keyboard and mouse for routine tasks like copying, pasting, and navigating files can consume a significant amount of time.
  • Solution: Using shortcuts can drastically reduce this time, increasing productivity.

Shortcut Tips by Category

UI Optimization

  • Sidebar Toggle: Use Ctrl + B (or Command + B on Mac) to toggle sidebar visibility.
  • Integrated Terminal: Use Ctrl + `` to toggle the integrated terminal display.

Navigating Files

  • Quick Open Menu: Ctrl + P lets you quickly open files by typing the name directly.
  • Keyboard Scrolling: Use Ctrl + Arrow Up/Down to scroll through long files without touching the mouse.
  • Jump to Elements: Press Ctrl + P, then @ to display and navigate to elements within a file.

Editing and Multi-panel Uses

  • Split Editor: Use Ctrl + \ to split the editor display for multiple files.
  • Close Tabs: Use Ctrl + W to close unnecessary tabs quickly.

Speedy Code Writing

  • CSS Property Completion: Use abbreviations with Emmet for properties (e.g., dg for display: grid).
  • Control New Line: Ctrl + Enter creates a new line and places the cursor automatically.

Bulk Editing

  • Select All Matches: Select a word and press Ctrl + Shift + L to select all occurrences for bulk editing.
  • Add Matches Incrementally: Use Ctrl + D to add matches one by one to ensure precision.

Custom Keybindings

  • Duplicate Lines: Change default Shift + Alt + Down Arrow for duplicating lines to Ctrl + D.
  • Customizing Shortcuts: Modify key bindings via the command palette (Ctrl + Shift + P -> search for "keyboard shortcuts").

Moving Code Lines

  • Move Line: Duplicate lines with custom binding Ctrl + D, then move using Alt + Arrow Down/Up.

Conclusion

  • Enhance Efficiency: These VS Code shortcuts aim to enhance coding speed and reduce repetitive stress.
  • Custom Themes: Coder Coder Dark theme is available on the VS Code Marketplace for further personalization.

Additional Resources: Check out the linked video for more features such as theme development and publishing.