Hello! Today I am going to write about some useful vscode shortcuts and how they can be quite helpful in coding. This will be aimed at MAC users. However for PC / Linux Users for the most part you just need to switch the command key to control. Also I swear I am not being paid or something by VSCode but if you dont use it as your editor, I would definitely recommend it. It is a great editor and these keybinds will help you code faster and more efficiently. When I reference a keybind I will be typing within an array so you know which buttons are required to be pressed.
When I first started coding I didnt think it would be that useful to learn the keybinds. I was concentrating more on the actual code I was writing. This was probably a good thing, I would definitely suggest paying attention more to important things than making your coding quicker. However, at a certain point I think it is useful if not important to hone your craft and become better at little things. Just like when we code and try to make DRY code, being quicker and more efficient while coding is important too. Especially if we are making or trying to make careers out of this.
The idea behind alot of these keybinds it to keep our hands off the mouse or trackpad as much as possible. It is similar to when we learn how to type and we learn of the "home row". Hand placement goes a long way for faster typing just like being able to navigate our editors and whatnot is much quicker without having to use the trackpad.
There are alot of useful keybinds that vscode has implemented that I find quite useful all the time in coding. I think the one that I use the most by far is the [command + d]. With vscode we can have the cursor over a word or variable and pressing [command + d] will select that variable or word. Pressing [command + d] again will then select the next time in your code (going down) that the word/variable was used. This is very useful for someone like me who is changing variable names often.
Another similar one is a multiple line selector. This one can be used with your trackpad or mouse if you want or not. The command is [option + click] for using a trackpad/mouse or you can also do [option + shift + (up or down arrow)] if you want to just go up or down. This can be quite useful if you are changing multiple lines of code, or deleting multiple lines (hopefully not!).
Then we have the terminal opening shortcut, this one is super useful as well. For those of you who were not aware, vscode has its own terminal. In order to bring it up you can use the command [command + `]. I use this all the time as well. It is super useful especially when writing code in react or building a backend with ruby on rails. But it can also be useful when writing any code, having the terminal up can help with a variety of things. If you are writing in JavaScript you can use node in the terminal to check certain functions or things without having to use the chrome dev tools.
The command that goes hand in hand with the terminal opener is [command + shift + 5]. This will split the terminal into two. When writing react code or ruby on rails code having the double terminal is almost required in my opinion. It allows you to not only have your liveserver open and running but also allows you to use your rails console to make sure your stuff is working. Also you can do git commits real easy and often, which is recommended.
There are so many other useful ones. I often use [command + /] which will comment out an entire line. I use this often when debugging and trying to track down where I messed up. It also works well with react JSX code. There is also the [command + option (left or right arrow)] this will navigate between your vscode tabs. Finally maybe my favorite one is [option (up or down arrow]. When your cursor is on a specific line, this command will move the whole line up or down. I use this one all the time, especially when I have a whole bunch of code blocks and I misplace my return or what have you. There are a whole bunch of other nice ones and I would suggest you check out this image that shows all of them!
Top comments (0)