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.
.png)
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.
| Windows | macOS | |
| Searching all Files | Ctrl+Shift+F | Command+Shift+F |
| Toggling Sidebar | Ctrl+B | Command+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.
| Windows | macOS | |
| Quick Open | Ctrl+P | Command+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.
| Windows | macOS | |
| Toggle Comments | Ctrl+/ | 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.
| Windows | macOS | |
| Select Next Match | Ctrl+D | Command+D |
| Select All Matches | Ctrl+Shift+L | Command+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.
| Windows | macOS | |
| Command Palette | Ctrl+Shift+P | Command+Shift+P |
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 here. That will be all from me today. I hope you learned something from this piece as much as I did. Bye👋HAPPY CODING!!! ❤️
