Become a VSCode Pro: Essential Features and Shortcuts

foreign I'll be sharing with you the best vs code features that are guaranteed to make you a more efficient developer I'll be walking you through Global and workspace settings creating custom tasks to automate workflows terminal customizations life-saving keyboard shortcuts popular extensions and much much more now by the end of this video I guarantee that you will have learned something about vs code and discovered some new features that will save you time now to guarantee that I've actually teamed up with Microsoft who has sponsored this video now as many of you know Microsoft actually owns vs code GitHub and many other developer tools and they help me come up with the outline for this video now in addition to this video we're going to be providing a 45 minute long webinar on May 9th as a part of the developer digital Meetup tour this webinar will go into much more depth on how to use vs code in GitHub like a professional and of course it will also include a live q a session to sign up for the webinar go to AKA dot Ms slash Tech with Tim to learn more about of vs code and GitHub workflows if you're watching this video after May 9th then you can still access the recording from the same link AKA dot Ms slash Tech with Tim it will also be linked in the description with that said let's go ahead and get into the video alright so let's go ahead and get started now the first section I want to dive into here is settings and customization obviously when you're working in any kind of code editor or coding environment you want to customize this to your liking and make sure everything is set up nicely so you can have the maximum efficiency and even just pleasure when you're using the code editor so in vs code obviously there is unlimited customization and the way you can get to the settings menu that I'm on right now is you can go to the gear and then you can click on settings alternatively you can open this by hitting Control Plus comma or command plus comma depending on the operating system that you're on so from here notice that we have two settings categories we have user and workspace settings now the user settings are your global settings and the works space setting is specific to a folder or a workspace that you're working in now your user settings are going to be stored in a settings.json file notice here when I hover it shows me the location of that settings.json file if I want to actually open up that file I can hit Ctrl shift p or command shift p this toggles the command palette for you and then I can go open settings and then Json so open default settings Json or open user settings or open workspace settings you can pick what you want so I'll open the user settings with Json and notice here that I have all of the available settings or at least the ones that I have modified inside of here I can do some custom settings I can change some stuff that I may not be able to change from this menu but for ninety percent of the time it's fine to just work in here but I just wanted to show you we have this Json file you can go in here you'll have intellisense when you're writing different settings and you can do some specific customization you may not be able to do inside of this file now for the workspace settings this is going to be a setting things.json file inside of a DOT vs code folder I'm going to show this to you in a second but this is going to live inside of the workspace or the project that you have open and these settings are automatically going to override your user or global settings so it goes user or Global then you have your workspace and of course you have all the default settings and these two settings would override any of the default settings as well okay so in terms of a few settings that you may want to change right away I like changing the editor font size now I like to have my font size nice and large so I usually put this at about 22 and then if I want to zoom in and out the window what I can do is hit Control Plus or control minus so you'll see quite a bit when I'm working in tutorials I'll Zoom kind of the whole vs code window in quite a bit just so you guys can read everything that I'm doing however sometimes I want to zoom stuff in without actually say affecting all of these icons or affecting the entire UI in that case I'll just make the font size larger and that's what's going to affect the actual size of the font in my code editor so that affects that and then I can zoom that in and out so just distinguish the difference there when you zoom in and out it does the entire window whereas when you change the font size it's just the font size for your actual code editing files alright so next thing that you'll probably want to change here is your theme now there's a few ways to do this of course you can do it from the settings you can go to theme and then you can select the theme that you want want personally I like to use monokai a lot of you guys ask me about my theme this is the one that I use I've used it pretty much forever you can also install additional themes 2bs code through different extensions or you can hit Ctrl shift p to open the command palette type in theme and then you can select the theme that you want and again you can kind of customize these themes too I won't get into that right now okay that's pretty much it for your global settings now I just want to show you a few more advanced uses related to settings that you may not know about so you can actually toggle settings for specific languages and using specific filters so for example let's say I want to search for all of the settings that I've actually modified what I can do is use a tag or kind of a filter story which starts with the ad symbol and then I can type modified and this is going to give me a list of all of the settings that I've actually changed here in Visual Studio code okay so that's an example of a filter maybe I want to look at all of the settings related to an extension well of course I could just do it in the extensions menu or I could type in a filter so I can do extension so EXT colon and then MS and then Python and then dot Python and it shows me all these settings now maybe I want to look at all the ones I modified there you go I can now see the settings I've modified here so just showing you there's a lot of cool stuff you can do that you may not know about and you can kind of plug in these filters all right last thing I'll show you here with settings is a custom setting that kind of is cool and shows you the power of using the settings.json file so I'm going to go Ctrl shift p I'm going to open my settings Json okay and I'm just going to go in here to the very bottom and I'm going to paste this set workbench color customizations okay editor line number foreground and then I change the color so this is an example of something you'd only be able to modify from within the settings.json file and look I can change the color of uh kind of what do you call it these line numbers right or whatever's popping up so you can do all kinds of customizations like that just wanted to show you kind of the power of this file and I don't know maybe some hidden information you may not have notified foreign so now we're going to dive into our workspace settings now if you want to create custom workspace settings you can just go in here and start changing stuff so let me go to workspace and for example I can make this 22. when I do that notice that you're going to see a DOT vs code folder pop up and then you're going to have a settings.json file inside of here now this is any changes you've made in the current workspace now this is great because for example if you had some tasks or some commands or some specific settings related to extensions that you wanted everyone in maybe your organization to have you could actually commit this file to GitHub and then people could pull that file down and automatically have those settings apply to their workspace now oftentimes you do want to Omit this from your GitHub commits depending on what you're doing but in my case if I have a private repository just for me I may upload my DOT vs code folder so then I can just pull it down on another computer and automatically get the same settings so you put them inside of here settings.json now I'll show you right that if I change the workbench color here to be all of this okay that's great that's inside of this um what do you call it workspace now what I can do is I can open up a new workspace let's go file open folder uh let me just go here to blockchain expert my new course you guys should check it out from the link in the description and notice here that if I open up a file my line numbers are not a different color because that vs code setting that workspace setting was only applied to the previous workspace okay so let's go back open recent and we'll open our tutorial okay so that was really all I had for workspace settings just wanted to show you kind of how to configure those using this dot vs code folder and then settings.json [Music] all right continuing now we are going to look at tasks now a task is essentially a command that you can run from Visual Studio code it's going to automate some kind of workflow now tasks can be automatically populated or detected by vs code or you can write them manually so I'll show you both instances so right now I just have a very basic npm project this is actually just the boilerplate you get when you create a react application so I just ran npx create react app and you can see I have kind of an npm project in my package.json I have start build test Etc okay now what I can actually do from vs code is I can open up the build scripts now the way to do that is to hit control shift and then b b as in build or command shift B now notice when I do this that actually brings up all of the build tasks that I can possibly run in this case it's detecting the npm build app task from my package.json so already you can probably see how that's fairly powerful because now you don't actually have to go to your terminal to run a command if it's Auto detected by vs code you can just run it directly in Visual Studio code now alternatively there's a lot of other tasks that you can look at so you can hit Ctrl shift p or command shift p to open up the command palette you can type tasks and then you have a ton of option here so you can do open user task configure default build task configure task manage automatic task Etc and you could run a task let's go run task now when you go here it shows you a bunch of tasks that are kind of automatically populated by vs code I can go into npm and I can run any of these so npm install npm eject Etc so let's go npm install and then notice that it starts actually executing this task and it has this in a special task terminal okay so I'm just going to close this for now because we don't need that I just wanted to show you that this is a thing in BS code many people don't actually know about that now Beyond just Auto detecting tasks we can can create our own custom tasks now there is documentation on how to do this so I'll link it in the description for now I'll just share with you kind of a basic task so what I can do is create a DOT vs code folder just like the folder where I had my settings.json file in now in here I can go to tasks dot Json and I can put custom workspace tasks so just as a quick example here I'll paste in a task that just comes directly from the Microsoft documentation you can see that we have the version of the task where the version of this tasks file story and then we have an array or a list of all of the tasks in this case we have one task the label for this is to run tests the type is shell this is the command that we're going to run and then we could change the command for Windows Mac Linux Etc in case it was slightly different we have the group and then we can present this based on specific conditions so I won't get into all the syntax again the URL is here if you want to see how exactly to kind of format this and create different tasks but now that we have this task I can go command shift p to open the command palette I can go task like this and then run task and then what I can do is use the run tests task right so notice that one is right here now it's not going to work because I don't actually have this script defined but if I did then it would run that script okay so let me close this task notice it also highlights in red telling me that this was unsuccessful okay that's all you need to know about tasks very useful feature consider adding it when you have larger projects and scripts that potentially multiple users are going to be running maybe based on a GitHub project or some code base that you're working on foreign here I'm going to share with you a few useful features related to terminals that you may not know about or maybe you do but you just don't use them so oftentimes when I'm working on a project I find myself having a ton of different terminals now it's useful that they kind of get organized on the right hand side here but when they're all just named CMD or they give me kind of a vague description oftentimes I find myself like clicking through all of these to try to find what it is that I'm looking for now obviously vs code is thought of a better way and this involves renaming and customizing your terminals so what you can actually do when you have multiple terminals like this is you can right click them so let's right click and you can change the color the icon or the name so if I go here and I rename I could rename this to say API and then I could go and I could change the color and maybe I make this yellow okay so already much clearer I understand what is being run in this term now of course you can create different types of terminals so you can have a Powershell get bash JavaScript debug Etc and you can actually split terminals as well so in this case maybe I go to split terminal or I would have pressed a little split button there and now I have two Terminals and I can kind of change the sizes this is useful if you want to view two things at the exact same time now another thing you can do with terminals that you may not have seen is you can actually view them in the standard kind of code editing area the way to do that is right click on a terminal and then go to move terminal to editor area now you get the terminal up here and now you can kind of split them as you would regular windows and view terminals at the bottom while you're viewing a terminal window here now continuing here of course I could view another one in the editor area so there you go and now I have two and then I can kind of split these and do what I want with them uh you know as I please so that pretty much covers everything I need to go through related to terminals I'll quickly mention that of course you can change the default terminal as well by going here and going configure terminal settings you can also set up profiles for your Terminals and if you want a quick way to toggle the terminal window then you can do control back tick sorry or command backtick okay that's going to toggle the terminal open and close you also of course can just drag from the bottom of the screen like this and there should be a command palette command to open the terminal so open new terminal and oh that actually opens uh a separate terminal but there you go I guess you know how that works now too all right now we move on to the next section in the video which is going to be on some useful keyboard shortcuts now vs code obviously has a ton of shortcuts you can view all of these and you can customize these to be whatever you like I find the defaults pretty useful and I usually just like to keep the defaults because they're consistent with some other editors so I don't have to kind of remember to constantly change them regardless I'm going to show you a bunch of keyboard shortcuts here I will put them up on the screen and of course will describe what they do we're going to start with some basic ones and then get into some more advanced kind of nuanced and useful ones so let's start with command palette in vs code you need to know how to open the command palette that is going to be Ctrl shift p or command shift p pretty much whenever I say control from now on if you're on Mac then you're going to be using command Okay so to open the command palette there you go and then here we can type any command that we want now what's interesting is that if you want to actually search for a file what you can do is just hit backspace here and now when you don't have this greater than sign you're able to actually do a file search so I can do for example app.css and then I can search for the file and get into that very useful trick especially if you have a larger codes now if you just want to open up that file search you can hit control P so just doing control P not having the shift is going to open up the file search like we just showed you but again to get back to command you just add that symbol down okay so that is the first shortcut next shortcut is to toggle this sidebar here so a lot of times when I'm coding this can kind of get in the way it's a bit annoying so what I like to do is hit Ctrl b b as in basket and that's going to open and close this talk uh this sidebar sorry it's going to toggle it all right there you go now next is not really a shortcut well there is a shortcut for it but I don't remember what this is this is Zen mode so if you open up the command palette and then you type in Zen mode you can toggle this and this is going to bring you into an editor that has no icons no distractions and just the code sometimes for recording I like to have this code editor I find it's kind of cleaner when you guys are following along now to get out of that I can just hit Ctrl shift p again okay and then I can toggle Zen mode and it brings me outside all right next we are going to look at adding a cursor to all of our matching selections now this is a little bit of a kind of complicated keyboard shortcut but it's very useful especially in HTML so let's say we have a bunch of P tags here and we want to modify the content of all of these was a few ways to go about doing this maybe I actually want to change all these tags to be saying H1 Tech what I can do is I can select this and then I can hit Ctrl shift and then l or command shift L and notice it's going to select all of the tags that match this so now I've selected all these and I can kind of tab inside of here and I can change these tags to be whatever I want so I can change these to be in H1 okay now I'm done with that I hit Escape now I'm going to do the same thing so I'm going to select my closing P tag here so let's select the whole thing and we're going to hit Ctrl shift L and then again I can go here and I can change this to an ending H1 tag and now I've modified all of my H1 tags using a few keystrokes as opposed to many more if I were going to change all of them uh kind of at once now of course you could use find or replace but sometimes you want to just do it quickly in the code editor in that case you're going to use Ctrl shift l or command shift L alright moving on the next command is actually similar to this one and this is to select all of the content on a single line so a lot of times you want to select the entire line there's a few different ways to go about doing this this but the way that I like to use is control l or command L notice it automatically puts your cursor on the next line by the way and this is going to select the entire line of course then you could change that you can copy it you could do whatever you want with that so that's going to be command l or control L that just selects the entire line that you're on again that's kind of how it looks right okay next command that we have is go to line now this can be useful if you're in a very large code file say you've got an editor or say you got an error sorry and it said hey you know there's a mistake online 43 there's an error here what you could do is hit Ctrl G or command G and then you can go to whatever line you want so if I want to go to line say 27 then it brings me directly to line 27. if I want to go to line one brings me to line one unfortunately my file is not quite large enough to show the usefulness of this maybe I have a larger file in here it doesn't look like I do okay here we go let's go command G let's go to Line 39 and then it brings me to that line all right so we're back inside of our app file now and I'm going to show you another shortcut which is related to commenting a line now this is very useful when you want to toggle comments so maybe something is commented you want to uncomment it or you want to uncomment multiple lines at a time this is what you'd use so let's just create a variable we'll say we can spell cons correctly cons hello is equal to one and then what I'm going to do on this line here it doesn't matter if the whole line selected my cursor just has to be here I'm going to hit control and then the forward slash on my keyboard or command and the forward slash on my keyboard that's going to comment out the whole line now to toggle this I just keep hitting it right it's going to remove the comment or add it so very useful if you have say a few lines you want to comment all of them select and then you can comment and then you can toggle the comment of course you could do a block comment but this is pretty useful now it's gonna automatically change the comment type based on the language that you're working on uh working in sorry if I was in pi python then it would obviously change it to the pound symbol now let's say I wanted to comment out maybe a tag in here well the comment for this is slightly different so if I hit Ctrl forward slash notice it gives me the correct style of comment uh whereas if I just tried to do a slash slash here that's not going to work right okay so there you go that is toggling your comments all right next shortcut is one that I always forget that that is so useful and this is to move a line up or down so especially in HTML maybe I have my image here and I want to move this down in the file rather than copying it and kind of pasting it which I can do but that typically requires me go to my mouse what I can do is Select this line or just put my cursor here and then I can use option or alt so if you're on Mac you're going to use option if you're on Windows or Linux you're going to use alt and I'm going to hold that and then I'm just going to use my arrow keys and go up and down this allows me to now move this all around the file again that's going to be holding alt or holding option depending on the operating system that you're on okay very useful next shortcut that I have another very useful one is to duplicate a line now to duplicate a line you're going to hit option or alt plus the shift key and then you're going to use the up or down arrow key so in this case I'm on line eight I'm going to hit shift alt because I'm on Windows and then down that's going to copy the line down okay now if I go here so I'm on this image tag and I hit shift alt up then it's actually going to copy the line upwards now I know this seems a bit weird because these are all image tags here but let me show you again if I go here let's go to this a tag and I hit control or sorry shift alt up notice it copies that line upwards okay now let's get rid of that now if I select this whole thing and I hit shift alt up it's going to select the whole thing and copy that up if I go down then it's going to copy it down okay so very useful again that's going to be shift alt or shift option all right now we move on to the last notable shortcut which is a multi-line edit I use this one all the time now the way this works is you are going to hit control and then alt or control and option and then you're just going to move your cursor up or down okay now this allows you to edit multiple things at a time so notice here that my cursors are in multiple locations and I can well edit all of these okay now let me get out of this let's do the same thing over here so I'm going to go Control Alt okay and then I can go up and down and I can kind of move these around and do whatever I want with these different cursors and edit multiple lines at the exact same time so depending on the type of file you have and what you're working on this can be extremely useful again this is going to be Ctrl alt or control option depending on your operating system all right so to start wrapping up the video here I'm just gonna mention to you a few useful extensions that I personally use you can see that I have a ton of extensions here so if you want to kind of pause you can see all the ones that I use but the main ones that I want to mention here are code spell checker so I'm going to go code spell you can see I have that here by the way I got to this page by clicking on this icon right here which is extensions also Ctrl shift X code spell checker very useful I think that's straightforward what that does another one I like is prettier which is right here this automatically formats your code of course I have the python extension installed and any other language specific extension that I'm using so if I'm using JavaScript I install that extension and then another extension that I like is git lens now what this does is actually tell you uh the commit message related to specific files so I think I can kind of demo this if I go back to app.js notice here it says you 26 minute ago minutes ago initialize project using this now uh the reason I like this is so I can see if I change the line or if someone else changed the line I can view this specific commit and then I can kind of say Hey you know who messed this up or did I make this mistake or what's going on here and I can ask the author of that line I just kind of saves a bit of time and makes everything really clear when I'm working in a GitHub repository now of course there is built-in GitHub um integration here for vs code so I'm sure many of you know how to use this I won't go through this extension it's already in vs code you don't need to install it and you can kind of see all your changes you know you can look at the side by side Etc and then if you're working with something like Azure say you're deploying a web service you're connecting to a database there's all kinds of azure extensions that you can install related to the different Azure services so I don't have any right now but if I was working with same Azure database or Azure storage I would of course install these extensions and then I would be able to connect directly to those instances and pretty much do everything I need to from vs code all right so with that said I'm gonna start wrapping up the video here if you want to learn more about vs code GitHub GitHub actions and more advanced developer workflows then make sure to attend the webinar that we are doing on May 9th as a part of the developer digital Meetup tour this webinar will be in collaboration with Microsoft and of course it will include a live q a session if you want to be a part of that make sure you go to the link AKA dot Ms slash Tech with Tim and register for the webinar it will also be linked in the description with that said thank you so much for watching and I look forward to seeing you in another YouTube video foreign [Music]

Channel: Tech With Tim

Views: 29,431

Keywords: tech with tim, vs code shortcuts, vscode shortcuts, keyboard shortcuts, vscode tips and tricks, visual studio code shortcuts, visual studio code keyboard shortcuts, vscode keyboard shortcuts, vs code shortcuts windows, vscode shortcuts windows, shortcuts, 10 essential keyboard shortcuts for programmers, vs code shortcuts mac, vscode shortcuts mac, vs code keyboard shortcuts, keyboard shortcut, vs code tips and tricks, most useful keyboard shortcuts

Id: phC-vKlNoaM

Length: 25min 37sec (1537 seconds)

Published: Mon Feb 20 2023