DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to Optimize Your Workflow with VSCode Shortcuts
Nathan
Nathan

Posted on • Updated on

How to Optimize Your Workflow with VSCode Shortcuts

Introduction

Microsoft’s Visual Studio Code is a free, open-source code editor that runs on Windows, Linux, and macOS. It’s a full-featured development environment with support for hundreds of programming languages, including C#, F#, and Visual Basic. In this article, you’ll learn how to improve your workflow with VSCode.

How to customize your VSCode shortcuts

Creating custom VSCode shortcuts is very easy. All you need to do is open the Keyboard Shortcuts editor and add a new shortcut.
To open the Keyboard Shortcuts editor, go to File > Preferences > Keyboard Shortcuts.

Image description

In the Keyboard Shortcuts editor, you can either search for an existing command or create a new one. To create a new shortcut, click on the + icon.
Enter the name of the command, choose the key combination, and click on Add.

Now that you have created a custom shortcut, let's see how to use it.
To use a custom shortcut, simply type the key combination you assigned to the command. For example, if you created a shortcut for the "Open File" command, you would type "Ctrl+O" to open a file.

Creating custom VSCode shortcuts is a great way to optimize your workflow and be more productive. By taking the time to customize your shortcuts, you can save yourself a lot of time in the long run.

Navigation Shortcuts

The Command Palette (Ctrl + Shift + P) is another great shortcut for quickly finding and executing commands.
For example, if you want to reformat your code, you can use the Command Palette to find and run the Format Document command.
Ctrl + G is a shortcut that allows you to go to a specific line in a file. This can be handy if you want to quickly jump to a certain section of code.
Ctrl + F is a shortcut for finding text in the current file. This can be useful if you want to quickly find and replace a piece of text.
Ctrl + Shift + F is a shortcut for finding text in all files. This can be useful if you want to search your entire project for a certain piece of text.

Editing Shortcuts

Here are some of the best VSCode shortcuts for editing code:

  • Ctrl+Shift+Up/Down: Move a line of code up or down
  • Ctrl+J: Join two lines of code
  • Alt+Enter: Insert a new line after the current line
  • Ctrl+/: Comment out a line of code
  • Ctrl+Z: Undo an edit
  • Ctrl+Y: Redo an edit
  • Ctrl+X: Cut a line of code
  • Ctrl+C: Copy a line of code
  • Ctrl+V: Paste a line of code

Image description

These are just some of the many shortcuts that VSCode offers for editing code. Be sure to experiment with them and find the ones that work best for you. And if you know of any other great shortcuts, be sure to share them in the comments!

Multi Cursor and Selection Shortcuts

Once you have your cursors in place, you can use the shortcuts below to edit code more efficiently.

  • To delete the current line, press Ctrl+Shift+K.
  • To duplicate the current line, press Ctrl+Shift+D.
  • To move the current line up or down, press Alt+Up or Alt+Down.
  • To indent or unindent the current line, press Tab or Shift+Tab. You can also use these shortcuts to quickly select and edit code in multiple files. For example, if you need to make changes in multiple files, you can use the MultiCursor shortcut to select all occurrences of a word in all open files. To do this, press Ctrl+Shift+P and type "MultiCursor". Then select the "Add Cursors to All Occurrences of Word" option.

If you're working on a project with multiple files, you can use VSCode shortcuts to optimize your workflow. The MultiCursor and Selection shortcuts let you quickly select and edit code in multiple files, which can save you a lot of time when making changes in multiple files.

To select multiple cursors, hold down the Alt key and click where you want to add a cursor. You can also select a block of text and then press Alt+Shift+I to add cursors at each end of the selection. To quickly select all occurrences of a word for editing, press Alt+F3.

Once you have your cursors in place, there are several shortcuts available for editing code more efficiently:

  • To delete the current line, press Ctrl+Shift+K.
  • To duplicate the current line, press Ctrl+Shift+D.
  • To move the current line up or down, press Alt+Up or Alt+Down respectively.
  • To indent or unindent the current line, press Tab or Shift + Tab respectively. These shortcuts can also be used to quickly select and edit code in multiple filesβ€”for example, if you need to make changes in multiple files containing similar code. To do this using the MultiCursor shortcut, first press Ctrl+Shift+P and type "MultiCursor" into the Command Palette that appears; then select the "Add Cursors to All Occurrences of Word" option from the dropdown menu that appears next.

Code Formatting And Linting Shortcuts

To format your code, simply press ⌘ + ⇧ + P (on a Mac) or Ctrl + ⇧ + P (on Windows) and type "format". This will bring up the Format Document command, which will automatically format your code according to the rules specified in your .editorconfig file.
To lint your code, press ⌘ + ⇧ + P (on a Mac) or Ctrl + ⇧ + P (on Windows) and type "lint". This will bring up the Run Linter command, which will run the linter specified in your .editorconfig file.
Both of these shortcuts are lifesavers when it comes to code quality, and we highly recommend taking advantage of them!
Code formatting is the process of setting specific standards for how code should look.
This can include anything from spacing and indentation to how comments should be formatted. There are a variety of reasons why code formatting is important, including making code more readable and consistent, reducing errors, and improving team collaboration.

There are many different ways to format code, and the best way to do it depends on the language you're using as well as your personal preferences.
However, there are some general guidelines that all developers should follow. For example, most languages use some form of indentation to denote different blocks of code.
In addition, it's generally considered good practice to use consistent spacing throughout your code.

You can also use the Format Selection command to format only a specific section of code. To do this, highlight the section of code you want to format and press ⌘ + ⇧ + F (on a Mac) or Ctrl + ⇧ + F (on Windows).

VSCode Extensions

The best extensions for VSCode will vary depending on the specific needs of the developer. There are also extensions that add new features to VSCode.
However, some useful extensions that many developers may find helpful include the following:

  • Code Runner: Allows you to run code snippets directly from the editor.

  • GitLens: Helps you better understand code with features like code lens, blame annotations, and references heatmaps.

  • Path Intellisense: Autocompletes filenames and folder paths.

  • indent-rainbow: Colors your indentation to help you better visualize code structure.

  • Bracket Pair Colorizer: Colors matching brackets to help you better identify code blocks. -(deprecated)

If you are looking to improve your productivity and workflow, installing some VSCode extensions can be a great way to do so. By taking the time to learn some of the available shortcuts, you can save yourself a lot of time in the long run.

Check us at www.Blstsecurity.com

Top comments (8)

Collapse
vassovass profile image
Vasso Vass

@nathan20 Great post, I have bookmarked it - Just FYI "Bracket Pair Colorizer" is deprecated due to being built in.
Image description

Collapse
nathan20 profile image
Nathan Author

thank, I will update it

Collapse
shshank profile image
Shshank

Thanks for this helpful post, but can you please share a shortcut to duplicate text in same line, like we do in Sublime with Crtl+D , thanks.

Collapse
nathan20 profile image
Nathan Author

Image description

Collapse
shshank profile image
Shshank

Thanks for replying, but not on downline, on the same...just select text and paste

Thread Thread
nathan20 profile image
Nathan Author

You can always use copy paste, I don't really get what you mean

Thread Thread
shshank profile image
Shshank

If you ever used sublime text, there is a feature shortcut, without pressing ctrl+C n Ctrl+V you can use Ctrl+D to copy n paste on the same line after selection.

Thread Thread
nathan20 profile image
Nathan Author

I use sublime but never try this shortcut

Find what you were looking for? Join hundreds of thousands of developers on DEV so you can:

Β 
🌚 Enable dark mode
πŸ”  Change your default font
πŸ“š Adjust your experience level to see more relevant content