VS Code for Beginners: The Ultimate Collection of Tips & Tricks

[00:02] going to show you a few tips and tricks that i picked up along the way to get you using vs code like a pro so the first thing i want to show you is how to open up your project in vs code and obviously you can just go down and

[00:16] on the terminal i know it's probably the quickest way to do it um so let's say you're going to create a new project so let's create new test proj new folder now there's a couple of ways

[00:30] we can open this up we can do code test proj into that new folder

[00:44] just doing code dot now bs code is opened up and you can start writing code for a new project if you're on a mac like me and that last command didn't work to open up code and

[00:57] that's because it's not on your path and what you can do to do that is to shift command p which will load up the command palette and then type in shell and you command in path click that and you should get a nice

[01:11] message so it's been successfully installed so next time you go and try installed so next time you go and try that command it should work pro then you need to learn the keyboard shortcuts

[01:25] which you can even print out if you want to and you do command shift p this loads up the command palette from there you can do keyboard shortcuts by typing in shortcuts and you'll get a help keyboard shortcuts reference link there and

[01:41] press enter that'll load up the keyboard shortcuts for your frozen system so in my case it's a mac but for you it might be windows and one of the things i'll show you first is how to quickly find a file so

[01:59] if you do command p or control p if you're on windows this will load up the search files window so there you can type in we want to go to i've got a weather

[02:12] through and find particular file results and and go down and go to the one you want to so let's go to the controller scroll up here so here you've got the um file all opened if you want to go to a

[02:26] particular line and you can do command p again and in this case we're going to do and then type the line that you want to go to now this is particularly useful if you've got a really long file um so let's just say we want to go to line 38

[02:40] press enter and your cursor will now be online 38 another cool feature you can do to help you go through the code is again command p this time we're going to do the at symbol

[02:53] the various functions that we've got in this um functions and methods and names that we've got inside this controller um so if you want to go to a function obviously we've only got a get function in this one we're going to get async

[03:07] and that will take us to this get method so vs code lets you edit multiple things at once and there's a few ways of doing that so let's say we've got weather response here now when you double click on

[03:20] for you every single place where that text appears but actually it's possible to edit all of those at once so if we do command d or ctrl d on windows you can see as i click through it's going to highlight

[03:34] items from there if we start typing we will actually edit all of these at once which is pretty cool another way that you can edit multiple things at once is to use the

[03:48] um alt click if you're on windows and this lets you place your cursor in multiple places um so let's say we want to add a comment at the end of each of our our lines of code

[04:02] to hold down option or alt and then click on all the other lines of to and then from here we can just start typing and it's going to edit in all the places

[04:19] need to update a bunch of things at once in different places in your code one thing i do particularly like doing is being able to update is being able to update uh several lines at once um so

[04:33] if you do alt shift or option shift you can actually drag your cursor down um so we pick here we can drag this down hold down alt shift and then drag down the cursor and then we can add in like multiple spaces or whatever you

[04:47] want to do can be done you can even um particularly if i'm editing a csv file you can edit multiple lines at once while we've got the cursor there the other thing you do is obviously you can

[05:01] go through with the arrow keys a character at a time what's more useful is again if you hold down option you can actually jump to the end of each and goes through and jumps to those particular points

[05:15] so previously we edited the response word there and there's a better way of multiple references or something throughout your code so let's say we wanted to edit this get weather async method um

[05:30] there's a great thing you do here it's called rename symbol so this is going to link through all the references in your code and using that it's going to rename so this is much safer to do than say a find and replace

[05:43] which might end up editing something you don't want this will only edit this particular method let's call it get weather async or get get weather now i think um now it's gone through and you can see

[05:56] up here in the unsaved openness it doesn't save it but this has gone and updated the weather client it's updated the forecast with the new method name

[06:08] another cool thing you can do is say you want to cut a line out your code um once you know that control x will do a cut or command x if you're on on a mac and we can take this whole line out you don't

[06:20] copy the whole line you can let you just have your cursor on it do command x and um and obviously you can then paste that where you want it um down here for some reason you can put that in

[06:34] move around a particular line of code and key and then use the arrows and this will move that line of code around for you now one thing i find

[06:49] myself doing especially if i'm trying to debug something or i'm making something you know obsolete is section of code and obviously you can do this just by

[07:02] putting in your comments um for each line and that's a bit slow um or obviously you can do the the shift option or shift alt thing go through and select it but actually there's a shortcut for it now

[07:15] if you select what you want to comment out you can do command forward slash and that will do a complete section for you you can just do that while you want because it's on the line

[07:29] especially at work i'll have 20 million tabs open i find that on the same visual studio code when i'm working on a project i'll have 10 20 different tabs open all pointing to different things now visual

[07:42] studio code gives you a great way to navigate between all those tabs and so let's open up a few more things and i'll show you what i'm talking about one of the things you can do to navigate between all these different tabs is to

[07:56] use control and number now this should work on both windows and on a mac so if we want to go to the first tab to and same for the others control two control three control four

[08:10] tabs is to be able to pin them so say there's open the way we do that is you right click on a tab and you can see down here we've got the option to pin it

[08:23] and now what that means is that it will always be there um so if we were to do here and do close all then we still keep our pin tab open um so it's great thing to just keep those

[08:35] windows there if you want to close a tab that's been pinned and you need to unpin right clicking on pin and then it will allow you to close it now one thing that i find is that i'm often jumping around pieces of code

[08:50] so say we started on our startup page then we want to go back to where we were previously and now you can do that by pressing ctrl minus and that will jump straight back

[09:03] worked on and now you can keep doing this and points which is really cool one feature i use quite a lot is code so the way this works you can basically

[09:16] type in a bit of code and then it will auto complete what you want to type in statement um so let's type switch and now you can see here the the second option um it's a switch statement if you click

[09:30] on that actually auto generate the the main part of your switch statement for you and this works with a lot of different methods now you can write your command shift p

[09:42] and we type in snippets and we can do configure user snippets now there's a global snippets file that works across all instances um or there's one specific to the project that you're working on

[09:56] snippets file here and you can call it what you want i'm just going to call it what you want i'm just going to call it snippets for you and so it already comes with code ready for you to

[10:10] console example um so first we're just gonna uncomment all of this now this particular example is obviously for javascript and typescript and you can change the

[10:24] language scope that you want to use and edit it to what you want i must admit i haven't written many of these snippets myself what i tend to do is go to extensions and from there if you just search for

[10:37] snippets you can then find snippets for all of the top languages and save you a lot of time in and write your own ones html one really good inbuilt feature of vs

[10:52] code is something called emit now i think this used to be an external plugin but now they've basically built it directly into vs code now the way this works is we've got html page here and we want to fill it out so

[11:05] what we do is we'll type html and you can see here we've got an abbreviation now you can just click enter and that will fill out the tags but let's say we want to go a bit more so let's say we want a body

[11:19] on a biddy a body with um with um a div inside it a nested div for you now let's say we want uh another div

[11:32] with an unordered list and you can do li time x5 and that will create five of them for you like that so it's really powerful and it saves a lot of

[11:46] time if you're writing html one thing when you're coding that you're creating new files so we can do that really quickly in vs code so if we right click and do a new file

[11:59] obviously you can type in a new file but say we want that in a nested folder but we can actually type model followed by forward slash and then say let's say weather dot cs and you see that's created our model

[12:15] folder as well as our our weather file this works with multiple nested folders so let's do new file i'm going to type folder and then nested folder

[12:29] let's call it nested nested and then file.json structure as well as our file inside there now another way you can do new files is by doing command n

[12:43] to load up a new window but you can see here that it's just a plain text file constantly working with c sharp or another language and you want the new files that you create to be in the same language there is a setting for that if

[12:56] we go command shift p load up this and then type in settings we can open up our settings file and then the setting you need to add in and then the setting you need to add in is files dot default language

[13:17] the default language if we do command space it will autocomplete and in this case we want to have active editor language now if you language you might just want to set that explicitly

[13:30] but this will use the language that you're currently using on your page so let's get rid of our new file go back to our controller and do command n again and now you can see we have a c sharp file rather than a

[13:44] plain text file so one thing that we've used a lot already but already talked about is the command palette so this is control shift p or command shift p on a mac and here you can search for and execute

[13:57] a lot of the commands that are built into vds code one really cool feature if you're working on a react project or a node project in general is type in npm and here you can see a bunch of options for node but if we do npm run script at

[14:12] this will show all of the options that are in your package.json file instead of having to run them on the command line one of the most useful terminal we can get to that by doing control

[14:28] factic you can see here i'm using zsh as my terminal on a mac um but i can also load up other terminals you can see how i'm and i'll load up multiple terminals and switch between them this is really

[14:42] running in the background but you also need to run as something else and alternatively you can see the other types of terminals that are available to so this will be different if you're running on a on windows as you might

[14:56] have power shell here for example and we can also you can see this little window this little icon here and that allows you to split up your terminals you can see both of them at once another cool feature that i find myself

[15:10] using quite a lot especially on c-sharp projects is to be able to click on a folder and then one here do open in integrated and that's great way to just quickly jump to a particular part of your code

[15:25] lastly one really cool integration with vs code which makes it really useful is it's git integration so you can see here we've got the source control icon it

[15:37] gives you a great ability to use the functionality of git without so yes you can type them straight in on the terminal so we go back to our main folder here

[15:51] and we can type git status and it will tell us that sort a nice ui so let's just edit this file so let's just edit this file i'm just gonna

[16:09] don't load up straight away uh sometimes i don't you can click the refresh button and that will find your your files it's the same thing as typing git status on the command line um but it just gives you a nicer ui and

[16:21] it's much easier to add and remove files that you need to um another cool feature is if you use the particular things maybe you want to publish a new branch

[16:35] or add a new remote all of the commands that you would normally use in git are all here via the ui so it's much safer to use these and it is to you online and get it wrong

[16:48] now one extension that i really like which works with git is called git lens so we search for kit lens in extensions kit now what this does it gives you a lot of

[17:01] really great functionality directly inside your code base if we go back to our file we can see here on the current line you're on it will tell you who edited that file when it was edited and the

[17:14] and if you hover over that it will give you further details um so you can even you further details um so you can even go to git hub and see the the commit there i hope you like this video on vs code

[17:27] tips and tricks this is only my second video on youtube so please hit like and subscribe to help this channel out thank you