“As a developer, the less time you spend on your mouse and the more time you spend on your keyboard, the better off you'll be”.
So hello everyone my name is Vikas Rai and today we will look at 20 shortcuts that you need to know in Vs Code.
If you are not familiar with Vs Code then don't worry , its not a big thing like another programming language or something instead it is a Code Editor for doing programming and web development and It is a very popular one and used by most of the web developers.
You can check this post to know more about it.
In this I have discussed about Vs code what it is and its importance.
Now I do want to kind of reiterate why shortcuts are important for your workflow and the idea is that if you're taking your hands, you maybe can't see all this interaction, but you take your hands there on the keyboard, you move them over to the mouse, you move them back.
It takes seconds or even parts of a second to do all of those things. But as a developer, with us being on our computers all day that back and forth, I really can slow us down. Even if you take a second here, there, that can add up to minutes and hours, maybe over the course of a year.
So it's really important with the more experience that you get to keep your hands on your computer, because you can be incredibly powerful with just using shortcuts. If you have any developers out there that are using them, a lot of them use them because you can do everything from the keyboard.
It's really, really hard to learn. It's really tedious and it takes a long time to master, but it can be really beneficial for that exact same reason.
So that is the why you want to keep your hands on the keyboard and we'll just go ahead and dove into all of these 20 extensions and visual studio code.
So the first couple of shortcuts I'm going to show you are for really optimizing the space in your editor. These shortcuts are both for Windows and Mac user .The ctrl key will be for the windows user and cmd key will be for Mac users and rest will be same for both users.
1. Toggle Sidebar: ( ctrl/cmd +B)
So shortcut number one is to toggle your sidebar. So by using the shortcut, if you open it, shows a lot of useful information. One is the explore where you can see all of your file, something you probably want to see fairly often.
But when you don't want to see it just hit Command + B on Mac and Control +B on Windows, you don't necessarily need to come and click this thing up in the top left on “file icon”.
2. Toggle Terminal: ( ctrl/cmd + ` )
Shortcut number two is to toggle something else, and that is your built-in terminal. So I use the built-in terminal in Vs code a lot.
I can go in here, look at my files, I can run my servers, I can do whatever I want. I use the built in terminal all the time in Vs code. But what I do is I toggle it away when I don't need it. So this is actually ( cmd + ) on Mac and ( ctrl + ) on Windows a controller until they will open and close or toggle close or toggle open the built-in terminal in vs code , again to give you more space to actually see and write your code.
3. Open User settings: (Ctrl/cmd + , )
Number three is how to get to your User settings so you can come down to this cog wheel and you can click the settings bar here, and then you can see all of these settings of code which settings and voice code are amazing, by the way.
But you can do this one step simpler with doing Command comma or Control comma on windows and going ahead and opening that up directly. And then I can come in and change whatever I want to. One of the cool things about Vs code is when you change anything in here, it takes place almost immediately. So as I change the zoom to four, it zooms in. I probably don't want that, but these things take effect really quickly. So being able to get to your sort, being able to get to your settings really quickly, using the command or control com a shortcut can be really useful.
4. Quick Open a file: ( ctrl/cmd + P )
Number four now is going to be how to quick open file, so if I wanted to open a file, I could come over to the file explorer and I could look for blogs that I can click and open it, but I never do that.
And the real world, I never do this in my day to day stuff what I do is something called Quick open , so this is Command + P on Mac or Control + P on Windows.
As you can see above what it does, it opens a list of my files and then gives me the ability to search through my files if I want. In my courses page, I could type in courses and then press enter. It will open that file for me, all saying on the keyboard, I can open any of the files that I need as a developer.
I usually know the name of the file I'm looking for so I can just type it in. If you don't know the name, that would be maybe the one use case to come over and actually click on a file from within the Explorer. Other than that, I always use the Quick open with Command or Control + P on mac and Windows.
5. Tab through Open files: ( ctrl/cmd + tab )
Number five now is the ability to toggle through our tab, through the files that you have open. So notice I've got five files here. If I wanted to go to data.js file, for example, I could come up and click on dat.js.
But what I do is I use control and tab to tab through these things, similar to how command tab on a Mac will let you toggle through applications, control tab will let you toggle through your different files that you have open. So this way, if I want to go from index.js to _app.js, I just control tab twice and I'm to _app.js .
It takes a little bit to get used to this, but I almost never go up and actually click a file. I almost always use my toggle through with control tab. And if you add shift into that so control shift tab, you can toggle backwards so you can go forwards and backwards to be able to get to whatever file that you want, which is already open.
6. Move file to Split window: ( ctrl/cmd + )
Number six now is how to take a file and put it in a separate pane or into the split editor.
And what I mean is I can manually drag a file over to the right and leverage the split editor in code, but clicking and dragging is not optimal.
So there's a shortcut for that, as there is with almost everything, and that is the command or control and backslash , and that will automatically take that file over to the separate pane. The one thing I wish happened is that the original file would close because if I take it to one side, I probably don't need it on both, but it works really well.
The split editor is really cool. You can customize this grid in any way that you want to. You can do an actual like grid by dragging something to the bottom or left or right.
It's really, really cool. So to bring one of your files to another pane is command or control and then your backslash.
7. To Close Files: ( ctrl/cmd + W)
All right, Number seven is the ability to close files, I never come up and click the X to close files, I use command or control W just close that file really quick and easy.
And I never have to touch the mouse to do it. So I open files with quick open with command or control P , and then I close them with command or control W.
8. Search/Replace file: ( ctrl/cmd + F)
All right, number eight, here is a search and replace inside of a file, so if I want to search for the and keyword, I can select it and then I can use command F to be able to open up the search and replace. I could jump through these searches now that I have it open or and or I could add a replace and do that.
So what I do is I will select a word and let me get rid of this to show you how it works.
I would select a word and instead of doing command F, I have set up to do command age, which will go ahead and trigger the replace.
What this means is Command H will populate the search field with what I have selected the and then it will automatically take me to replace where I can do this. And then from there the shortcuts to go ahead and do all the replacements is command and enter or control and enter. So in this case, I can go ahead and do all those replacements with just two shortcuts. One, to open up the search and replace and the other to actually do all of the search and replaces.
These are really powerful. Once you learn how to work with them and kind of put them together for searching and replacing inside of a file.
9. Global Search/Replace file: ( ctrl/cmd + shift+ F)
And that leads to number nine, which is to do global search and replace so very similar here. If I select the word and let's get rid of this one, if I select the word and then do command shift or control shift F that will do a global search and you have the ability to do your global workplace as well.
For me, it is command shift. Aides will do that global workplace. Go ahead and take me down here. You can see all these changes. You can open them to see what it's going to look like and then you can change them here. So you have the ability to search and replace and a file as well as globally inside of the directory that you have open number 10 here is a very special one.
10. Open command Pallete: ( ctrl/cmd + shift + P)
And it is kind of the source of all truth or the ultimate command, the command to rule them all.
And that is the command pallet. So command pallet is command shift. And what you can do from here is run any command that you want to.
So if I wanted to close the side bar, I could run that command from here instead of using the shortcut.
So if you ever forget what a shortcut is or if you ever forget exactly what a command is, you can open up the command pallet, you can start to search it. If I want something with GitHub and you can go down and run that specific command, this is your failsafe. If you ever forget, if you ever need some assistance, open the command and try to search for what you're looking for. Most likely you'll be able to find it and then you can run that command from right there.
All right.
Now, let's get into some shortcuts with navigating or working with your actual code.
11. Toggle Comments: ( ctrl/cmd + / )
So I'm going to come up here and this is going to be number eleven here is to comment your lines or to toggle comment your line.
So I'm on this line here and command or control slash commands slash or controller slash will toggle comment this line. So not only can it do it for one line if I select multiple lines, so I like both of these, it will work on both of them as well. Now the last thing I think that's really cool about this is I'm inside of React World here, JSX, if you're not familiar with that, that's OK.
But Commenting and JSX is a little different than regular JavaScript comments, but Vs code already knows that it's doing the specific type of comment that works for JSX this is so cool to me that vs code has this awareness to toggle the comment in the appropriate way for the given piece of code that you're working on within a given file.
12. Navigate Text : (ctrl/alt + Hold Down )
Number 12 now is some tips on how to navigate your text so if you want to if i wanted to add this header or edit this header class here and i was on the left side i could hold down the right arrow and i could get all the way over here but that's not very efficient so if you hold down option and do left or right that will allow you to skip word by word instead of character by character this is really nice you can also on mac hold down command and go left right to get to the beginning and the end of a line so if i wanted to edit that header i would probably go all the way to the end and then come in one and then maybe hold down option to get to the beginning of that word and now start to type whatever you need to.
I can't tell you how useful these are think about how much time you spend navigating the text inside of your code now you should be able to navigate a little bit faster now on windows the home and end buttons will get you to the beginning and end of a line and one last thing on mac if you hold down shift and command and go up or down that will take you to the beginning or end of the actual file itself i think control and home or control and end will get you to the beginning and end of your file on windows as well.
13. Copy , Cut and Paste : ( ctrl + c ,ctrl + x ,ctrl +v)
All right number 13 here is how to copy cut and paste now this is kind of three shortcuts for one but these are probably ones that you're familiar with so you can select a line i could copy this line with command c or control c and then paste it with command v or control v sorry i got some weird formatting there so those are probably ones that you're familiar with you probably or maybe you already know the ability to do your cut
as well so i could cut this line from here with command x or ctrl x and then maybe i want to paste it up here so now i do my Command v or control v so that works really well the one thing I will add here is that you don't actually have to select the entire line what you can do is just be
on that line and now i can copy this one go down to a new line and paste that one as well again some weird formatting there so you don't have to select the entire line if you run command c command x or control c control x for cut or copy on mac or windows it will select the entire line by default vs code will do that for you which is actually pretty neat.
14 . Duplicate Line: (Shift + option/ctrl + up/down)
Now a similar one to this you saw me kind of copy a line and then paste it again if i just want to duplicate that line I can hold down option and shift and be able to duplicate that line by doing up or down on the keyboard and I can do this as many times as i want probably not that many but to be able to duplicate a line hold down option and shift while you're on that line and then up or down it will make a copy of that line.
15 . Multiple Cursor: ( Alt/cmd +Right click)
Another really useful probably one of the most useful ones is multiple
cursors and you can do this by holding option and clicking to get multiple cursors and then i could come in and change all of these to a p tag for example if i wanted to all at one time but that still requires being able to click with my mouse so if I am here i can hold down command
option shift or control option shift on windows and just do down to get multiple cursors on this line same sort of capability i can now replace all those li tag with p tags that doesn't really make sense but i could if i wanted to using multiple cursors.
16. Select Word: ( ctrl/cmd + D)
Another nifty one here is if I am inside of a Word document for example and I want to double click on any word so then be able to search it well you don't have to double click if I am inside of this newsletter word Command d or Control d will actually select that entire word so let suppose there is a word James and select and then that would
automatically actually update your search if search is open with that text
that you selected so you can select that entire word with just having your cursor there and then doing a command d or ctrl d to select it.
17. Select all instance of Selected word: (ctrl/cmd +Shift + L )
Number 17 here is to take that a little bit further where if I select the article as a word now I can also do (Command shift L or Ctrl shift L) that will select every instance of that word and then give me multiple cursors to edit that word.
So if I wanted this to be article instead of articles then you can now type in “s” and it will update in every instance of that word it's actually really nice and really powerful to be able to do this.
18. Rename Symbol: ( F2 )
Now there's a shortcut even on top of that that makes renaming something even better let me get to something that has a little bit
of JavaScript in here so you see i have my error message property here so if i wanted to rename error message in every location that it's used i could do the trick that i just showed you but i could also uh click on this word and then do function two so f2 this is the rename symbol allow me to rename this variable in every place so I could type in error message and it's going to now replace that everywhere that it's referenced now Vs code did a little bit of intelligent stuff here where it knows that this thing is actually error message so it actually renamed it here instead of just like replacing the name if that makes sense but it did the equivalent of exactly what we want where it's going to be now error message down here instead of err message so it did that global or not global but inside of my file it updated the name of that variable in an intelligent way
so that now i could reference it that way through the rest of my code
19. Multiple Cursor: ( Alt/cmd +Right click)
All right Number 19 is to make or multiple cursors so that id you have repeated words and you have to make changes in all of them the you can simply use this command ( alt or command + right click ) on every place where you want to change .
20. Zen Mode : ( ctrl/cmd +K Z)
All right number 20 here is our final shortcut and i wanted to leave you with a little bit of Zen in your vs code development so this is the Zen mode shortcut to take you into Zen mode where it will get rid of all distractions inside of your vs code editor and what this is ( Command k and wait then press Z).
As you can see all the files folder and the bottom taskbar is gone and you have just your code .
So this will take you into Zen Mode it's a little weird you do command k or control k on windows you do that then you press Z it'll take you into Zen mode no distractions no fluff no bezel in vs code just your code so you can really focus and then to get out of it is the exact same thing command k and then z to toggle open Zen mode.
Conclusion
All right so those were my top 20 favorite shortcuts that I use in Vs code every single day. If you think we missed some of shortcuts , then let me know in the comments below what are your favorite shortcuts that we might have missed thanks as always for checking out the Blog if you enjoyed it make sure to give a like and share it with others also.
Thanks again for reading it and I will see you later in the next Article .
More articles to read:
I hope you enjoyed reading this article and if you have read till here then thank you so much for your patience reading.
To read more such post , do visit https://nextjsdev.com .
I need your support guys , thank you very much.
Top comments (0)