My Top 5 VS Code Keyboard Shortcuts (macOS & Windows)

Today's article is about my top 5 VS Code keyboard shortcuts that help to boost my productivity as a front-end developer.

In my previous article about VS Code here, I wrote about my top 5 VS Code extensions and how much I've fallen in love with VS Code since I started using it. VS Code is so versatile and there are so many ways you can customize it to make your work easier and faster. Today I will be writing about one of those ways which are shortcuts. With no further ado, let's dive right into it

What is a Shortcut? A shortcut is a quick way to get one or more tasks done within your apps. In VS Code, there are so many shortcuts that you can use but today, I'm writing about keyboard shortcuts for both macOS and Windows.

1. Let's start with "Searching All Files" & "Toggling Sidebar". These two are closely related together so I decided to write about them together. We also learn two commands here so more like a 2-in-1 for this one. "Searching all files" is one of my favourite features of VS Code. This gives you the ability to search for any matching text everywhere in your files. Your search result will comprise your searched term and the location of the file. I use this feature every day to search for any specific keyword in our codebase and make changes if need be. Side Note: You can also click the search icon on the sidebar of VS Code to do the same thing. Moving on, let's talk about, "toggling sidebar". As the name indicates, this shortcut collapses or expands the sidebar that is being used to search. This will also give the full width of your editor.

Searching all FilesCtrl+Shift+FCommand+Shift+F
Toggling SidebarCtrl+BCommand+B

2. Open a File (Quick Open): Searching for a specific file in a large codebase can take a lot of time. This shortcut helps to easily find and open a file quickly without having to search for hours. This action will open the selected file in the background while you can keep opening new files if need be.

Quick OpenCtrl+PCommand+P

3. Toggle Comments: Commenting/Uncommenting a block or line of code is something every developer does. Whether you are experimenting with a code modification, tracking a bug, or even just adding a comment to your code. I use this shortcut every day and you can definitely save some time by using it too.

Toggle CommentsCtrl+/Command+/

4. Multi Select: Let's say as an example, you will like to change all h3 tags in the file that you are currently working on to h2 . It will definitely take a long time trying to change it one after the other and you may miss out on some tags if you have to go through everything one by one. If you are working on a very large codebase, that will actually take hours to complete. There are two shortcuts to go about this depending on your preference. The first instance is if you want to select (add) your tag, word, or text in your next occurrence (In this case, you just want to update the next place where the tag occurs. This is good for selecting all occurrences within a specific vicinity.). While the second command which is my preference is when you want to find all occurrences in your current file, match, and replace them.

Select Next MatchCtrl+DCommand+D
Select All MatchesCtrl+Shift+LCommand+Shift+L

5. Command Palette: With the help of a command palette, you can access your commands according to your current context. You just need to type a keyword related to the command and find it, instead of navigating menus after menus. Let's say for example you want to disable some settings and you can't remember how to go about it. Just type the shortcut to open the command palette and once that is opened, you can type the keyword of the specific settings you are searching for. A couple of suggestions will pop up that will help you out.

Command PaletteCtrl+Shift+PCommand+Shift+P

If you are interested in seeing all the currently active keyboard shortcuts in VS Code. You can do this by clicking on the Command Palette (View -> Command Palette), and then search for  Preferences: Open Keyboard Shortcuts. Remember that you can also use shortcuts to open your command palette. Also, if you are interested in reading more about VS Code tips and tricks, check out the VS Code docs hereThat will be all from me today. I hope you learned something from this piece as much as I did. Bye👋

Quote:- "Knowledge is power." ~ Francis Bacon