How ToOnline EducationThe WebTutorials

Developers | VS Code Shortcuts For You

Are you a developer, then you must be familiar with the Visual Studio Code (VS Code)? Then you must also know that this editor is one of the most effective and powerful editors out there for developers, hence the title “Developers | VS Code Shortcuts For You” and am sure once you are done reading this article, you’ll find the editor fun and easy to use. Alright, let’s dive into it.

Command Palette

One of the most fundamental VS code shortcuts is the command palette. It is the shortcut that gives you access to all of the S code’s functionality. And the command for this is:

  • Windows ( Ctrl + Shift + P )
  • Mac OS (  Command + Shift + P )

Duplicate A-Line Down or Up Shortcut

This is a common shortcut I employ. To increase productivity in my workflow, simply enter a line of code and duplicate it on the line above or below. This is useful for single lines such as Li tags. Also with whole code blocks, such as a CSS block or a JavaScript function.

  • Windows ( Shift + Alt + Up/Down )
  • Mac OS (  Shift + Option + Up/Down )

JUST IN: A Beginners Guide for WordPress Web Design

Move A-Line Down or Up

This shortcut is similar to the previous one, but it moves the line of code up or down. It does not duplicate it and instead moves the line of code up or down. Again, useful for single lines, such as reordering ally tags, as well as blocks of code.

  • Windows ( Alt + Up/Down )
  • Mac OS (  Option + Up/Down )

Indent or Outdent A Line

Another of the extremely useful VS code shortcuts. See, when you copy and paste something in Visual Studio Code, it doesn’t always line up, right? In reality, it rarely does. This shortcut allows you to align an entire block of code, and indent or outdent it.

  • Windows ( Ctrl + ] or [ )
  • Mac OS (  Command + ] or [ )

The Multi-Select Selection

Assume you decide to convert all of your template’s H3 tags to H4 tags. So, do you go through each one and change it? No, you select them all and change them all at once. In this case, you would highlight only one H3 tag. Then you’d use this shortcut to go through and select the other instances of this tag, and it’ll give you an active cursor for each one so that changing one changes them all.

  • Windows ( Ctrl + D)
  • Mac OS (  Command + D )

The Multi Select Cursor

This is similar to the previous option, but instead of selecting the next occurrences of a selection, you can place your cursor in multiple locations and make changes to all of them at once.

  • Windows ( Alt + Click )
  • Mac OS (  Option + Click )

The Toggle Line Comment Shortcut

So this command is used to disable a line or block of code, correct? By commenting out the line or block of code, you can disable it in VS code. By removing the comment markup, you can re-enable that line or block of code.

  • Windows ( Ctrl + / )
  • Mac OS (  Command + / )

Show or Hide the terminal

As the title suggests, once you are done using the terminal and you feel like hiding it.

  • Windows ( Ctrl + ‘ )
  • Mac OS (  Command + ‘ )

Add A Line Comment

It takes some time to type out a line comment in HTML and CSS. Fortunately, there is a shortcut in VS code that will insert it for you.

  • Windows ( Ctrl + K Ctrl + C )
  • Mac OS (  Command + K Command + C )

Toggle The Sidebar

This is one of the most important VS code shortcuts for me. I don’t like that sidebar there when I’m writing code because when I need it back, I want it back quickly.

  • Windows ( Ctrl + B )
  • Mac OS (  Command + B )

That’s all the important VS code shortcuts you should know as a developer right now. Am sure once you memorize them, your coding experience will become much better.

ALSO READ: Most Used Passwords In 2022

Related Articles

Leave a Reply

Your email address will not be published.

Back to top button

Enable Ads

Kindly Unblock your ads, It's what we earn from to produce this content. Thank You.