VS Code important Shortcuts for fast development

  • Post last modified:May 12, 2022
  • Reading time:4 mins read
  • Post category:Blog

Visual Studio Code provides a rich and easy keyboard shortcuts editing experience using Keyboard Shortcuts editor. It lists all available commands with and without keybindings and you can easily change / remove / reset their keybindings using the available actions. It also has a search box on the top that helps you in finding commands or keybindings. For detailed information you can go on official site.

Keyboard Shortcuts

  1. CTRL+SHIFT+P – show the command palette
  2. CTRL+k CTRL+T – show the lists of themes
  3. CTRL+T – Finding a class, function or variable in all files.
  4. CTRL+K Z – Toggle Zen Mode
  5. CTRL+L – Select the current line in the cursor.
  6. CTRL+R – Reload window
  7. CTRL+` – Toggle the terminal window
  8. CTRL+SHIFT+` – Create a new terminal instance
  9. CTRL+P – Find a specific file in your current folder
  10. CTRL+K CTRL+Z – Comment a block of code
  11. CTRL+K CTRL+U – Uncomment a block of code
  12. CTRL+, – Go to user settings
  13. Ctrl+K CTRL+S – Go to keyboard shortcuts
  14. Ctrl+F – Find
  15. Ctrl+H – Replace
  16. ALT+DownArrow – Move the selected code one line down
  17. ALT+SHIFT+UpArrow – Copy the selected code one line up
  18. ALT+SHIFT+DownArrow – Copy the selected code one line down
  19. CTRL+B – Toggle Sidebar
  20. CTRL+SHIFT+X – Show Extensions
  21. CTRL+SHIFT+G – Show Source Control
  22. CTRL+SHIFT+E – Show File Explorer
  23. CTRL+SHIFT+D – Show Debug
  24. CTRL+SHIFT+V – Preview Markdown

Useful Extensions

1. Live Share

Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless what programming languages you’re using or app types you’re building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more!

2. Prettier – Code formatter

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

3. Live Server

When writing code, we often go back and forth between our IDE and the browser, to examine the result of our latest code updates.
Live Server makes sure your browser refreshes when it needs to.

4. GitLens

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

5. Debugger for chrome

A VS Code extension to debug your JavaScript code in the Google Chrome browser, or other targets that support the Chrome DevTools Protocol.

6. Auto Rename Tag

Need to rename an element in HTML? Well, with Auto Rename Tag, you just need to rename either the opening or closing tag, and the other will be renamed automatically. Simple, but effective!

Leave a Reply