How to get started with VS Code

hi there my friend and friends in a recent video I recommended that people who are just getting started in web development use vs code as their editor and that led to a lot of people asking me to make a video on how to get started with VSS code so here we are now for this video I'm not only assuming that you are new to VSS code but I'm assuming you're relatively new to web development as well because this is part of my beginner friendly content that comes out every Tuesday so because of that we're not going to be deep diving into the nitty-gritty parts of VSS code we're only going to be looking at the bits of it that are very relevant and useful for people who are just getting started with it and of course the very first thing you need to do is actually install VSS code but there is a little bit of a gacha here because you can get vs code or you can get visual studio and that's Visual Studio code and visual studio you do not want the purple logo you want the blue logo and again it's a little bit confusing but we want the code word at the end so just do a Google search for vs code click in in there and then you can download it this is available for Windows as well as Mac OS and Linux so you're good to go no matter what operating system you're on now once you've downloaded it you should see something that looks a little bit like this or hopefully a lot like this this is just like a fresh install of VSS code and one thing right away that can be handy is if the font sizes or stuff are a bit small a Control Plus can actually zoom in and make things bigger so for the demo I'm going to do that uh and then I can just zoom back out doesn't matter but you should end up on a welcome screen like this one uh the only thing is if you really are news you won't have any recent projects now the very first thing that I want to talk about you'll notice here it's saying you do not have an open folder and this is really important that it's saying open folder because you can open individual files as well but there's a big difference between opening a file and opening a folder in vs code if I open an individual file for example in here I have this 3D thumbnail thing that I built a while back and maybe I want to work on that HTML document I can open that file and here we go there's the file and I can work around in here uh and over here it's actually I have that file and I can see that it's there there but in most projects you work on you might not get this in the very first few days but most projects you're going to be working on they're going to involve more than one file and then say I had another page in this or I have my CSS file that I want to go to I want to work on my JavaScript they all tend to live in the same place and if I open all those individual files every time it's a little bit annoying whereas I can use either the the Open folder right here or you can do the file and open folder or you can use the shortcut and then what I can do is I can actually open the entire folder for this project and the advantage with this is now I'm inside of this project and now eventually you're going to have extensions that might take advantage of all the different things that are in here you'll actually be able to search through all the different things but the really nice thing is you can just go through and all the files you need for that individual project they're all here so you don't have to like go hunting and opening things every single time but if you want to start using like an extension like live server or a few other things that just make have some quality of life things going on opening the folder is going to make your life so much easier so always any project you're doing don't just save like the HTML file on the desktop make a folder for it and then always open that folder in vs code it's also good because if I need to make a new file I just click new file and I can do like about. HTML and it's already in the right spot right so I'm not like making a new file than having to save that file it's already there it's already in the right place now one thing that's very important I'm just going to bring this down cuz I think it's slightly off screen um where you can see I have these two different tabs for these two different files and my about page is actually not in italics and the index is in italic and this is just a little visual hint to say you open this file but you didn't actually make any changes to it so if I switch over to my Javascript file here it's going to stay italic but it didn't keep the index open this is sort of like oh I'm I'm you're diving through different files I'm not going to make a change here so let's say say I go to my index and I make a change now it goes oh this is an active file you actually want to be working on you weren't just searching through things poking around so as soon as I make a change to that now if I go to another one it's going to open another tab for me and then if I make a change to this one which right now I'm just putting a space that's enough for it to recognize that I made a change and then I can go over to another file and you can see that they're all opening tabs across the top and these two tabs have circles on them which mean that there's onsave changes and one thing that's interesting with VSS code is sometimes you can close it and it won't ask you to save your changes or anything but the next time you open vs code it's going to open with that exact place but I'd always recommend saving your work as you're going so one way you can do that is with a save all which is also a control K and S but just every now and then a save all and any file that had a change in it will get updated or you can just make changes with a contr s so instead of going to file and save every time you're going to be doing saves all the time just you make a change crl S you make some changes contrl s if you're on a Mac that would be a command s and you just save saving constantly it's going to be your best friend so just save constantly and you won't lose any work you're going to be very happy that you did it there are ways of configuring the autosave as well and the way you would do that is to go into your preferences and go into settings and we're not going to Deep dive the settings now but just to know how the settings work because there's a lot of settings in vs code but there's this handy search settings at the top so if I looked up autosave it probably will come up there we go and then I can con set here the default is off but I can choose a different type of autosave if I want to change how that behavior is working now I'm old school I'm just used to saving my stuff constantly so I leave mine off but if that's something you'd want to configure now you know how to get to it again it's just file preferences settings and we'll look at a few other things that you might want to do in there a little bit later on but for now back to here where we were looking at we have we have these different tabs another thing that could be really useful depends on the size of your monitor uh but if you have a large enough monitor what you can actually do let's close down these two CSS files and I'm going to right click on this one and I can do open to the side and look at that I have multiple different ones open so I have the two that I can work on at the same time this can be so useful you can even have like the same file open twice too and one at the top one at the bottom I wouldn't really recommend that cuz then when you're saving I find I don't it gets confusing for me but it is a possibility that you can do but I really do commonly work with split planes like this so I would suggest at least trying it out uh also if you you can drag them around when they're up here and if you do have multiple ones open here I can right click on this one and I can even do a split up split down split right split left so if I want I can put it on the bottom instead if I don't want it on the bottom I can split it to the right and I get it over there now because I already have see now I have the same file open twice so this one I can go down to the bottom and this one I can have at the top again I don't really like working that way and one reason I don't is cuz I often use this mini map if you're very early on you might not have to worry about this too much but as projects get bigger uh this mini map is sort of a zoomed out version and you can click on it to scroll quickly between different areas as well and you can turn off that mini map in the settings if you don't like it personally I used to hate it and then I got used to using it and now I kind of like it a lot uh but in my demos usually see it off just cuz I don't like the visual clutter when I'm doing demos but for normal work I actually do keep it on most of the time and again just go to your settings like we looked at search for it if you do want to turn it off it's called the mini map now I already mentioned this you might find the font sizes small cuz I think this is the default zoom and I'm used to doing demos where I need the font sizes really big and I've just gotten used to large font sizes the problem is when you zoom in it's zooming in everything so it's zooming in on the sidebar over here it's zooming in everything just gets bigger the whole interface does I might not want that I might want to keep everything the same way it was but I want it you know I want it like this but I want my font sizes to be bigger so once again let's go over to preferences and settings or you can use the shortcut control comma and if ever you don't know a shortcut it always tells you what they are and my suggestion is learn the shortcuts if you find yourself using any of the menus on a regular basis I would really recommend going oh okay it's the control comma but don't go I'm going to use it next time close the whole thing down and then use that shortcut cuz that's the only way you're actually going to start remembering it and you'll forget it the time after that and the time after that and probably even the time after that but by about the fifth sixth time of using it you're definitely going to start remembering what it was but do make sure you keep on using it so back here in the settings the one thing I want to look at here is that we have the font size right there so you can set this to whatever you want it to be um you can also change the font family right here you'll notice the default we're in is the commonly used so these are like the different things people often change at the beginning um you can change your line I like just leaving it at line but you know you can play around with these and and see what the differences are just to get an idea but I per personally I like the line one just to show you if we go to block I don't even have to close the settings I can just go back to a file and see how my cursor is like a full Square now and if I go back to settings let's change it to thin line and then I go back and you can see it's already updated to a very thin line and I'm going to go back to the default and I that's just what I'm used to so you can play around with it find one that you like uh and again you could even let's do it split to the right close this one down and then I could put my cursor there let's go over here and change the cursor what where is that um right there cursor style and let's make it block and if I click back here it's already block and then I can try the block outline and see if I like that one better and so you can play around with things if I come to my font size here and I make it bigger as soon as I click out you'll notice the font size got bigger and then I can drop that back down to 14 and is there we go takes half a second and it updates and of course you can try different fonts and uh go through and I would encourage you to look at some of these basic settings and if there's stuff you don't know what it is don't worry about it for now don't be overwhelmed by it cuz again there's a lot of settings uh the one other one that you might want to change is your theme and the default theme is actually not bad but I like using a different theme personally so to get into the themes and this is like the one personalization I think everybody should make at least to like look at it play around with it a little bit there's so many themes and so many good ones out there and interestingly the themes are uh let's go here and we're just going to search for themes but themes are an extension and that's going to sort of open up another world of stuff but you can see here is the dark modern and here's like all these other themes that are here so maybe you're somebody who actually likes having a light theme well we can switch over and it really hurts my eyes to even look at it but I do know a few people who like light themes so if you prefer that you can but you can sort of poke around in some of these different ones if you want to go a little bit crazy you can uh but there's lots of different options in here but you might be looking at it going well it's a pretty limited set at the moment so if you want and you're the type of person who loves this type of thing and I know some people I I'm the type I've been using this same theme forever now uh but I know some people who like changing it on a regular basis so for that what we're going to do is go on this side panel down on the side here and you can see these different things and so we have a search feature which is kind of Handy you can search for different things and actually do a find and replace there's Source control which is like git stuff you might not know what that is don't worry about it for now it's built into vs code which will be handy when you get to that if you don't know what it is don't worry same with the run in debug here eventually you might get into that don't worry about it for now and then extensions and extensions are a really big part of VSS code and if you start using a language like there's a framework right now called Astro that doesn't come pre-installed with VSS code but if you make a ASTRO File it's going to go oh hey we have an extension for that you want to download it so it's really smart it will recommend things for you which can be really handy but you can also come and search for themes and one theme the one I use usually is called Adam one dark and you can see it right there at the top so I'm going to click on that it's right there I can hit install on it and not only did it install you can see it is switched over and it actually gives me the choice at the top here do I want to keep it yes I do that's the theme I like but of course you know you don't have to use that theme just cuz I'm using it go and look for different themes you can also just do a search like a Google search for different themes uh and find ones uh there's probably a better thing than just searching for theme um but there's tons you here there's a whole bunch so some of them will come with like lots of different options some of them might only be one there's tons of themes out there I'd really recommend looking for one finding one that you like and they're really easy to change so you might try one for a little while realize you don't like it and then you can switch whenever you want now I did mention that one thing uh this is for beginners so one thing that you're really going to like with uh when you're in your HTML is that uh this comes with let's just zoom back in so it's a bit bigger for demo purposes uh also my sidebar is opened if I click here it's going to close it so we can close open and close it that way I actually like having my sidebar on the on that side um so when I open and close it it doesn't move things around but I'll talk about that in a second but before we worry about that what's really cool of V code is that it comes with something called EMT pre-installed and EMT is uh a shortcut for writing HTML and CSS and so if I have an HTML file I can do an exclamation point at the top and either hit return or Tab and it comes in with all of this which is super handy so I have that like boilerplate starter but we can do a little bit more than that I'm not going to deep dive it now but say I need an H1 I just do H1 hit Tab and it does the opening and closing uh if I need a paragraph with a class I just do p class name and then it's going to do it for me uh so it's a much faster way of writing things you can even do like container and in there I have div uh we'll do div * 3 something like that anyway you can really speed up the way you Rite your HTML and CSS if you're very very new maybe you're like I don't want to go that fast that's it's too quick for me uh so you know you definitely don't have to use it but it is really handy and even just if you're just doing your H1 and you don't want to have to write like H1 and it will close it for you the default um as soon as you open a tag we'll put the closing tag but just having to do you know from you get used to I've gotten used to it so just doing H1 Tab and it's open close and my cursor in the right spot it's just so handy to be able to do that and of course when you make a new HTML file and to do that it's just wonderful and the last thing I want to leave you with a little bit is well one of them is moving the sidebar over so if you do like that idea of this not like shoving your text back and forth you can just right click anywhere on the sidebar and you can just do move primary sidebar to the right and it moves it over to this side and now you see when I open and close this doesn't actually move around I love that um so I'm so used to having this on the right you can also just drag this bigger and smaller too if you need to the shortcut also if you want to open and close it is command b or or on a pc' be control B I don't know why it's letter B but it works um but just clicking here obviously does the job there's also not only can we move them to the two sides back and forth really easily the other Advantage uh you can actually turn off and on like if you don't want to see the source control one I can click that and let's just put it back on this side so we can see it happen because I know my face was on it so if I do Source control off it takes it away from here and then I can bring it back I would actually encourage leaving that there cuz you're going to start using it sooner than you think um but if there's ones you want to turn off and just remember maybe later on that you need to be able to turn it on um that option is there and I'm going to come here and I don't know if I closed it or not but here what I'm going to do is this is all my open files actually here is all the open files and here's everything that's in that 3D thumbnail folder that I had opened so one thing I can actually do here is I can come here and actually save everything so I click save all and then I can close them all and it closes everything there uh and what I'm actually going to do I don't do this very often but I'm going to come in here and I'm going to go down to a close folder just so we're back at like nothing's open we're back where we started uh because I want to go back to this welcome screen and there's one thing on the welcome screen that I'd really recommend you check out is this get started with vs code so if I click on that it's going to uh you know choose the look you want so it actually we've already done that but it will help you pick a theme uh you can sync to other devices and a few other things and then like it walks you through like different steps you can do rich support for your languages open your editor but if you go over to next section there's this section right here which is actually for an interactive playground that teaches you a lot of different things about vs code and it's really good so if I come in here um it's opened it on the side so I can close this welcome down so I have the editor playground and it has like it this is like it tells you what to do here and then you can come down and use this code to practice what it's telling you to do so I can add a cursor it's cool in vs code like you can see where my cursor is I can do a control alt down and you can see I have two cursors now and now I have three cursors and that means you can actually write in multiple places at once and then I can keep going and learn about intellisense and then about moving lines around because you can just push alt and then move lines with your up and down keys and stuff and you can duplicate lines and select full lines and there's all sorts of really cool things you can do so you can just come through here and read about it it's like a little tutorial that walks you through some of the like medium advanced stuff that could be really handy and with that if you'd like a little bit more vs code content I've done a couple of other videos one of them looking at the essential extensions that I can't live with without and another one looking at the shortcuts that I use every day those videos are all in a playlist that is right here for your viewing pleasure and with that I would like to thank my nabers of awesome Johnny Tim Simon Michael James and Andrew as well as all my other patrons for their monthly support and of course until next time don't forget to make your cor on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 39,727

Keywords: Kevin Powell, css, front-end, frontend, html, web development, visual studio code, vs code, visual studio code tutorial, vscode extensions, visual studio code tutorial for beginners, visual studio code extensions, vscode setup, vscode tutorials, vscode css, code editor for beginners

Id: EUJlVYggR1Y

Length: 17min 48sec (1068 seconds)

Published: Tue Sep 12 2023