DON'T Use the File Explorer in VS Code!

like a lot of the menus and the sidebar and vs code the file explorer is a crutch you can actually get away without using the file explorer at all and it will save you time and increase your efficiency as a developer if you use these tips and maybe a couple of extensions that I can recommend so the number one thing that I have to recommend is the shortcut that I use every single day on vs code and that's a shortcut to be able to open a file so a lot of people will open up the sidebar they'll come and look for the file they want and they'll click on this or they'll double click it there's a setting I forget what it is I'll come back in and let you know there's like a soft open which I never do so I make sure to open these like double click but I've got the setting turned off that's that's the Side Story so you open up a file okay great this thing is open but you're losing all of this space up here and it's not near as fast to go through and scroll and open uh folders and all that kind of stuff so it's much easier to use on Mac it's command p on Windows is control p and this is basically a search to open a file now the cool thing about this is it shows you files that have recently been opened so they're kind of in a priority order in here so at the very least if it's something I've opened recently I can come and just scroll down and press footer okay great but the real power of this is let's say I want to open the link card list I can now type in here and get to exactly the file that I want now you may be thinking when I get to bigger projects and I don't necessarily know what things are named you probably know more of that than you expect or if you're naming your files in a way that makes sense it should be pretty intuitive so I always recommend and always do this myself I basically 99 of the time open files through the search window and then give the name of the file on open the blog file I could do that very simple super super quick and this is by far to me the fastest way to open a file in vs code now there's obviously other things that you can do inside of a file explorer like crud operations for files create a file update a file delete a file Etc so one of the things that I have done is installed an extension called a file utils I highly recommend you do this and it basically gives you utilities for working with files as you would probably expect so I guess there's another one like similarly named and icon so make sure you choose the one by Stefan listner Lesnar and inside of here you can kind of see what all it does but I'm going to show you a little bit of what it does so it gives you commands in here so this is another important shortcut to know is the command shift p on Mac or Ctrl shift p on Windows is the ability to open up the command palette and from here you can type in any command that you want to all of these commands are going to be prefixed with the name of the extension so if it's commands that come from an extension you can search for the extension first in this case File utils and and now I have access to my crud operations to delete duplicate rename move uh copy name and then create some new files I'll come back to New files in a second because I've got an even better way to do this so that's really cool I now don't have to go all the way over here to right click and delete or to rename or whatever so inside of command palette I search rename for example so I do command shift p on Mac rename enter rename the file enter that's already done I didn't actually change the name so it doesn't like that same thing for delete so if I want to delete this file file utils delete move Etc super super fast now I mentioned that I had something different for creating a new file now creating a new file by default inside of vs code if you use command n on Mac or control n on Windows it basically generates a new file with nothing in it and then it doesn't actually save it anywhere so you have to then go to save give it a name blah blah blah which is like fairly inconvenient so even if you know that shortcut it's not the best way to do it in my mind so inside of here I also have an advanced new file extension so if you search Advanced new file this is the one from Pat Benatar it's relatively simple but what it does is gives you a command to create a new file that's really really powerful so if I were to search Advanced new file inside of the command prompt you can see that pops up I'll talk about shortcuts in a second and so inside of here the first thing it gives you is where do you want to create this file and it shows you your recent selections of folders so I've been working in the utils directory data directory data talks directory the workspace root Etc I could just type in like slash Source this is really really cool because it gives me intellisense on all these folders and I can just go down and select the one that I want so if I were to do like slash for example I say all right in the workspace route and then now it's asking me for the name of the file and I can say test.js this will create this file so that's really cool show you another shortcut that we just talked about is now I want to get rid of this so command shift p for command palette on Mac control shift p on Windows Now search delete that file is gone great now the other thing that we can do is we can do Advanced new file we could spell out the directory so if we wanted to go into source and then something we could also I believe this will work if we say just n slash and then we want it to be in a folder called slash and then test dot j s uh this should create this inside of a test directory so you can do this like going down the chain of folders typed in now you don't really need to do that in this case because Advanced new files starts with the ability to do that actually now that I'm doing this I don't know if I have a shortcut for deleting a folder that could be interesting so that may be one thing like in the one percent of times I need to use the file explorer anyway I'll go ahead and delete that now the last thing I want to show you is I customize the shortcut for uh let's open up the shortcuts so I customize shortcut for new files so if we look in here on Mac it's command n and this is going to trigger the advanced new file command so that extension that I just talked about this shortcut now is overriding the vs code defaults so the don't want to use the default stuff I want to use this one specifically and also a really neat thing that I did here is I said I added a win condition these are crazy powerful because you can Define when your commands work based on the context of what you're doing in the editor so this is saying I want this command to do this thing trigger this or this shortcut to trigger this command when I'm not currently focused in the terminal why would I do that well if we look at the terminal new like new terminal I forget exactly what it's called open new terminal I have the same command set up while I'm inside of terminal Focus to con to create a new terminal window Clarin is not a thing uh clear so if I were to do command n inside of the context of the terminal that just created this second um this second terminal actually I created multiple but you can see I can do command n and you see this thing increasing over here so those are all my terminal tabs I also have set up to do command W in here so but it only works in the context of the terminal because now I can work with my terminal Windows just like I do my windows over here so I can tab through these if I create another one I can tab through these just like I would my files inside of here and I can command W to close command n to create another one Etc so it's a completely seamless integration or like workflow from terminal to text based on the context of where I am anyway uh that is my bit on the Explorer window being a crutch for you inside of vs code there's much better ways there's much more efficient faster ways so hopefully some of these tips are helpful if you're interested in more of how to customize vs code I've got a free cheat sheet that will give you some of the tips and tricks and extensions and things that I use so I'll put a link to the free cheat sheet in the description below that you can go and check out as well if you have any other questions or topics you'd like to see me cover on vs code let me know in the comments and I'll go ahead and cue those up to help you make the most out of your experience inside of vs code so I hope you enjoyed the video I'll catch you next time

Channel: James Q Quick

Views: 73,685

Keywords: vs code, vscode, vs code tutorial, vs code customization, vs code shortcuts, vs code extensions, working with files in vs code, vs code file utils, advanced new file extension

Id: LY-DNBzXy48

Length: 8min 8sec (488 seconds)

Published: Tue May 09 2023