Don't Use the Sidebar in VS Code!!

as developers we're always looking for ways to write code faster well here's a tip don't use the sidebar and vs code let me tell you why what's up everyone if you're new to the channel my name is james quick and i do weekly videos on web development related topics and a lot of what i talk about is how to improve your efficiency as a developer i'm obviously a big fan of vs code if you watched anything on this channel so in this video i want to tell you how to improve your workflow inside of vs code by not using the sidebar now if you've watched any of my videos before you may have heard me talk about as a developer you want to keep your key your hands on the keyboard as much as possible the going back and forth between the keyboard and the mouse that's the kind of stuff that slows you down so i'm a huge advocate for shortcuts i can't tell you how many times i've worked with someone in person and i see them missing out on using shortcuts and i'm like no no no stop use this shortcode your shortcut it's going to be so much easier and that's what i want to talk about today so the sidebar nvs code is really nice to have it's got the file explorer it's got a debug tab it's got some git integration stuff built in has lots of different features but you almost never need to actually use it so i'm going to tell you in this video shortcuts and a few extensions that will help you replace your workflow inside of the sidebar so you can do it all from your keyboard so let's go ahead and dive in all right so i'm inside of my vs code here and i've got open the compressed fm source codes this is for my new podcast that you should totally check out but this is the code for the actual application itself not that important just the example of a piece of code that we can use in this demo so when we open up this sidebar to the file explorer you can do obvious things like go and search for files you can open files you can move files create folders delete files all that sort of stuff but you can also do all of that stuff from your keyboard so let's close out all of these files which by the way first shortcut here is command w on mac or control w on windows can close file so no need to come up here and click the x button command w or control w to close out a file now let's say i'm inside of this project and i want to open up a new file so i want to open a file i could come in if i want the sponsors page i could come into pages and come down to sponsors and open that page that way but the easier way is using command p on mac or control p on windows to now do a search from your keyboard for that file so sponsor sponsors page inside of this directory press enter that file is open so again command p or control p on windows i can search for cloudnary to open that file so this is the easiest way this is what i use all the time to open files and if you think about this sometimes you've got really big projects that have nested directories maybe i have some of these let's look in the modules and then contact and i've got files in there this stuff can get really hard to go in and actually just click through but i can easily as you get comfortable with your project just search for the file that you're looking for like the contact page open boom done now i also mentioned your command w or control w will close the file so that's great let's open back up the sponsors page and then in here what if i want to switch between two different pages you probably already know this one but just want to be sure your control tab on mac and then control tab on windows as well will allow you to switch between these files so no matter how many i get on here let's open the cloudinary page let's open the contact page no matter how many things i get in here i can toggle between them from my keyboard again no reason to go back here and search for the file again and then double click it to open it again so we can open files we can close files what if we wanted to do a few things that are not just built into some of the some of the shortcuts here create a new file move a new file rename a file something like that well this is where extensions come into play so let's look at one of my favorite is the advanced new file now the way this works is this one here with the dash's advanced new file the way this works is it gives you a shortcut that you can use in your command palette to create a new file but while you create it specify which directory it's supposed to go in this is so neat so if i wanted to create a new file with the sidebar over here i would have to go into the certain directory into pages and then right click new file type the name so on but now if i open the command palette which is command shift p on mac or command or control shift p on windows if i do that then i can do new file under advanced new file but i have this set up to a shortcut so i've replaced command n on my machine to trigger this advanced new file so i don't even have to do that so let me back out a little bit and i can do command n now the first thing it prompts me for is what directory do you want to put this thing inside of well i want to put this inside of next.js scroll down and pages so i'm going to create a new page this will be my test page js it creates the file we can see that over here inside of pages there's my test page file and then i already have the file open so again i can uh command n to trigger this thing if i want to put another pages or another page in the pages directory it pops up first so i can page this again test page 2 js ready to go bingo bingo for cheesy sound effects words i don't know but really really the easiest way for me to create files now one of the things that it does not do is it does not give me the ability to like move a file rename a file i can't tell you how many times i've created a file either given it the wrong name or forget to add js as an extension to the end of it so if you need to rename a file now i've got another extension for a few other utilities which kind of gives maybe this away this is the file utils extension now if you look in here you can create duplicate move rename and delete files and directories basically everything you could do inside of the sidebar now you might be wondering if this thing can also create files why do i not use it why do i use the advanced new file extension specifically the advanced new file has some extra configurations that you can add to ignore certain directories so it makes a little bit easier a little bit cleaner for me to create files you can make that decision for yourself i would probably start with file util see how it works for you then you may need to may want to add the advanced new file extension yourself i'll let you make that decision but with file util set here i am really comfortable with the command palette so anything that you want to do in vs code you can do from the command palette which is command shift p on mac control shift p on windows and then now i just search for the thing that i want to do so if i want to rename a file i search rename i press enter test page two is the name what if i want test page two three four five press enter now that thing is renamed i don't have to come over to the sidebar find the file which is the hard part right click rename then give it a new name i can do it all right here so one more time and actually let me just show you how i would really do this myself because i don't do it as slow as i just did it for you as we're showing it so if i wanted to rename this file i would rename i would come over and go back to to enter done so much easier same type of thing if i wanted to move a file so file utils move where do i want to move this directory to what if i wanted to move it out of the pages directory now i can get rid of pages that thing has now moved into i don't know what parent director does that go to that goes into the source directory so it should be somewhere down here test page two now what if i realized these are not files that i really want while i could come over here right click delete and so on but i could also do that here so i could open the command palette again do file utils delete enter done that thing is gone same thing here and vs code is smart after i've already run this delete command it's going to have it recent up here so i can just press enter again that thing is gone i don't have to do anything inside of the sidebar over here now there are some use cases for me like if i'm looking at the get integration of some of the files that have changed for example if i start typing in here vs code is going to show me that over here so sometimes i'll use this i'll open it up for this visual diff between my file and what uh what could have been what would have been what was before i do that occasionally i debug occasionally obviously we open the the extensions tab to go in and do some of that stuff but i almost never use the sidebar and that should be your goal the the less you can do that is dependent upon your mouse the more you can do that is dependent upon your hands your developer hands and your keyboard the better off you'll be hands down all right i hope you enjoyed that i hope you can kind of see the benefits of keeping your hands on the keyboard keeping it away from the mouse as much as possible if you're interested if you felt like you learned something here you want to know more about some powerful vs code shortcuts i've got a cheat sheet for vs code that's completely free that you can check out in addition to i've got a full course on learning everything you need to know on vs code so you'll have a link to both of those resources in the description below curious let me know some of your favorite shortcuts in vs code throw those in the comments and as always thanks for checking out the video and i'll catch you in the next one

Channel: James Q Quick

Views: 383,178

Keywords: vs code, visual studio code, vs code tutorial, vs code sidebar, vs code explorer, vs code shortcuts, vs code extensions, vs code file utils extension, vscode advanced new file extension, best vscode extensions, vs code tips, web development, vs code setup, james q quick, vs code customization, vs code tutorial for beginners, how to create a file in vs code, vs code extensions for web development, vs code extensions 2021

Id: s3H6PmB4SZ4

Length: 9min 15sec (555 seconds)

Published: Tue Apr 27 2021