VS Code for Beginners

hi today i wanted to talk to you a little bit about visual studio code and a few things about it from the perspective of somebody that doesn't necessarily know coding already that's not already a seasoned programmer because we've noticed that a lot of the materials out there on the web that are teaching people about visual studio code are kind of focused on an existing skill set that that you may or may not possess so if you possess that skill set you can probably just skip this video because it's going to be very introductory if you don't possess that skill set then definitely listen on because we're going to try to fill in a few of the gaps that preempt the rest of the knowledge that you need to be gathering about visual studio code so just a few things that that are interesting to know about visual studio code is that it's by microsoft microsoft of course is the company that that you may or may not have heard of you probably have heard of microsoft um they made windows so you are working with and being influenced by and impacted by microsoft on a daily basis in fact um probably everybody in the world unless they never interact with technology is going to be impacted somehow by microsoft very very far reach and they for a long time have been creating these these code editors and and visual studio studio code is one of those now there is a difference between visual studio and visual studio code visual studio is a super robust call it's something called an ide an integrated development environment and and visual studio is is one of the industry standards for very very extremely robust uh integrated development environments you can develop in multiple languages you can deploy you can you can collaborate with other teammates it's just extremely enterprisey and and big and and very useful but maybe not exactly what you need while you're learning to code so that's why visual studio code exists so to differentiate between visual studio and visual studio code we often just say vs code so if you hear us talking about vs code we're actually talking about visual studio code it's just not correct to just call it visual studio because that is a completely different thing so get used to calling it vs code it it'll roll off the tongue effect a lot be easier and it's actually googleable you can type in vs code and you'll find the same kinds of great resources on vs code as you can if you type out the whole visual studio code now the thing is if you type in visual studio trying to search for information about code you're not going to find it you're going to find visual studio things which are going to completely confuse you and knock you off your horse so vs code and of course you use it for code so anything that has to do with code if it's javascript code or html code or css code or any any of the code that you're going to be using throughout your journey in codex academy it is you can do it in visual studio code or vs code so now if you're thinking about graphics if you're talking about like trying to create a nice looking button or if you're trying to move a graphic um or create a logo or or create a layout for a webpage or something like that that would be a different kind of tool not a coding tool but more of a graphics tool if you're going to write a document or or create a presentation you'd use a presentation creator or a a word processing program like microsoft word or google docs something like that those are not code those are for a completely different purpose and then if you're if you're doing something in your time with codex academy using just code then it would be vs code so that's a quick primer on on vs code as as a thing as a product as a tool let's take a look at the actual tool in action first let's take a look at what we want to learn about vs code what we want to master so we're going to go into the external criteria here and take a look at this list right here in the top so i want to be able to install vs code on my computer that's probably fairly straightforward we're going to install and use some extensions like pretty or power mode so we need to be able to do that kind of thing we need to be able to monitor the the editor settings globally or per language um that can come in handy when we start to work with more languages and we might want one to have a certain font size than another also we want to be able to use the embedded terminal this doesn't necessarily mean that i need to be able to like navigate and use code use the the not code but the commands in the terminal and like navigate folder structures and stuff like that it's more more about just knowing where the terminal is and how to how to like turn it on so we'll go over that how to open files and close tabs uh so so that's actually pretty straightforward and easy but um we'll we'll show it here because you never know uh you might need a little bit of a little refresher on that or uh just maybe i'll show you some keyboard shortcuts that you can use as well formatting code using keyboard shortcuts is also a really useful skill so that's something that we'll we'll be able to do here as well by the way this suggested learning down here is actually really great just keep in mind that they're trying to teach you every nook and cranny of visual studio code and same thing with microsoft's getting started they want to teach you everything possible like all 5000 things about vs code really we just need you to know and master these six things so that's that's pretty much it um so let's let's actually just dive in let's let's try it out so i'll keep this here because if if i'm a student in codex academy then it's always a good idea for me to keep this list actually front and center right here so that i can so that i can make sure that i'm i'm learning what i need to learn for the the skills for the badge i don't want to overlearn and i definitely don't want to under learn because i want to be able to pass the evaluation so let's take a look so here is the the website for visual studio code uh to find this what i did was i just typed in in my in my google search vs code and it came up as the first the first result here so if i just go in here um it it has right there on the front page uh like a download button this is actually pretty common for software and tools it's really helpful that they just put it front and center there for us it's a common practice now so it knows that i'm on a mac so i can click download for mac or if if it doesn't peg me then i can always choose the other one uh one of the other platforms manually so there's windows you can click the little download arrow and it'll download it so downloading in case you didn't know downloading is is to bring something from the cloud down into my computer so if i if i send something from my computer up into the cloud then i am uploading but i am downloading vs code for my mac so let's click that and it's already started there it goes i've got fairly nimble internet so it's going to be about 30 seconds or so and it gives me some tips on getting started that's kind of nice of course a lot of this stuff is is it is definitely you know admittedly it's geared toward people who already know how to develop software they're just trying to market their product to developers if you're not already uh well-versed in in software development if you're not a programmer yet then you know you look at this stuff and okay that doesn't make any sense to me it's i'm i'm not getting started with that today uh and which is completely understandable so now i've stalled enough uh i can click down here uh and and open this up it's gonna download it or it's gonna open the zip file and so now i've got my my zip file and i'm just going to double click and it's going to open it up a new file right there so i'm just going to double click that and it's loading for the first time it says verifying okay i'll say open again i can close that folder now i don't need the folder anymore and there we are i have visual studio code vs code right here on my computer it didn't really take very much time for me to uh to download it and install it and and there i have successfully uh taken care of the first skill that i need for this so i've installed vs code the next thing is is extensions so extensions are you'll know more about this as time goes on you'll as as more time as you spend more time working with code you'll start wanting other extensions that help with this and that and so in this case we're going to go with some of the easiest extensions which are one is called prettier it's very very common it's a way to format code and it's i'll say it's slower it's prettier so like this basket is prettier than that basket so it's that word prettier and what it's trying to do is trying to make your code prettier so um so i'm going to go here to this little this little box of four boxes where one is is is going to form the complete square and that's that's the extension section now i want to point something out you can't really see this probably but if you go into your own vs code and just hover your mouse over something a lot of times it'll pop up this little thing called a tool tip if i hover your mouse over this again it shows me it tells me with words what the thing is and it also lets me uh lets me know a keyboard shortcut so if you look next to that it's kind of small on my screen it just went away but it shows me a uh that these symbols mean shift command x so if i were to like not be in the extensions i can do shift command x and boom it pulls up this extensions thing so if this is something that you've got to do commonly like a lot then then you might want to learn and memorize that keyboard shortcut and one thing that i'll i'll tell you also just a tip is i when i'm learning new a new tool that has new keyboard shortcuts that are different from what i'm used to i will often keep a little notebook next to my desk and i'll just write them down so in this one i would say is is open extensions shift command x and then that gives me this extensions window right here instead of me having to click it with my mouse so the next thing we want to try to do is to install an extension so let's search for an extension here and we're actually going to search for prettier since we're already talking about it and i'm just typing in here at the top uh and it comes up with a few different options the the top one is in this case the correct one you can see that there are other versions of prettier for different types of technologies and this one's for handlebars this one's got now eslint standard this one is another one it looks like the same one as the top one uh prettier code formatter and it's got a 2.07 if you notice this one has 2.07 this one has 5.9.2 so even though even though it has the same name you can see that this one's a little bit newer also if you just click on it you'll be able to see that this one has 11 million downloads and it's got these stars so this is the this is the one this is the one so if we go over here to this one this one's got way less still got a lot of stars but it's got way less and it's a lower version so probably what visual studio code is doing for me is it's it's trying to guess which one i want and it's putting it first uh so in this case this is definitely the one so if you click here on this install button it will actually install this this uh extension for me and and it's done actually i just installed it it's it's now installed so now i can disable it or uninstall it and what's nice about this that is i didn't have to go to a website and download something i didn't have to um i didn't have to go to my folder structure and find where the zip file was or anything like that i just had to click an install button so this one right here this page gives me some information about what prettier is and here's a description there's even you can click here and go to the website to learn more about prettier um it supports these these languages uh it's got some of these things which you don't know about yet necessarily you don't have to know uh installation is is pretty straightforward we actually already did most of that this is actually pretty interesting right here it starts getting into um look at that specific languages and so i know that that's one of the things over here that we need to be able to do so let's go ahead and say we checked this one off we have installed prettier so that's done so now let's modify the editor settings globally and per language and so uh one thing that i that i might need to do is is actually do this right here i need to set the default editor for my visual studio code to use this sbnp dot prettier dash vs code and you can also see right here that you can set this as the the default formatter just for javascript see how this is structured right here now you don't for this badge you don't have to know about this format right here that's called json with the curly braces and the quotes and the colors and things like that that's called json json um you don't have to know about this and how it works but it is nice to be able to copy and paste things so i can actually copy this and right click or not my my right click's not working so i'm just going to do control c and i can actually go to my settings which we'll go we'll do in just a moment and i can paste that in so if you if you want you can um you can scroll down and read more about prettier to really understand what's happening what it's doing uh you also might get some hints for some other of other other uh requirements on the badge like formatting code using a keyboard shortcut see that right there format document using a keyboard shortcut um got more keyboard shortcuts here uh also i like this right here i like uh formatting on save that it's good to know the keyboard shortcut for for uh for formatting your code but it's also nice that it just whenever you click save it just automatically formats the code for you it's kind of a nice thing because i don't always remember to format my code but i do often save my files so i'm scrolling through and there's there's a lot to this you can see it's many many pages i wouldn't try to learn everything about it um it is good to know that you've got this research this resource here when you need it if there's some other setting that you want to make so let's um i'm going to copy this whole block right here and again my right click isn't working so i'll just do ctrl c so um so let's leave this just for right now let's go back out to visual studio code so i'm going to open a folder just for now and i'll open i don't know i'll just open this folder where i am right now lots lots and lots of files but at least i have an index.html here which is that's good enough okay so uh so if i click uh control p in visual studio code then our command p on my keyboard then i've got it gives me a list of all the files that i can open if i do ctrl shift p it brings up what's called the command palette and if i type in start typing in settings then i can open the uh the the open settings json or i can open settings ui so if i open the setting the ui version of the open settings uh then it gives me this nice looking list with with drop downs and fields that i can fill in and type you can also get to this by going to this little gear in the bottom left hand corner and going to settings so it's going to take you to the same place and this these are this is just a graphical way of seeing the settings uh there are lots and lots of settings in here that you may never need um they are they are here if you ever need them see this is auto save so if i want to just always save as i leave the window then i can say on focus change or on window change or if i want to have it save after after 10 seconds then i can i can have after delay things like that i personally wouldn't do auto save because that'd be a little bit weird but if if i'm if i need my font to be bigger in general i can change it here it'll change the font for every single language so let's let's close this and let's take a look at the other one so i'm going to do control command or shift command p and i'm going to type in settings again and this time i'm going to open settings json so let's let's do that and so now you can see that uh that i've got this this little little construct here and i'm going to paste um so it you can see here it it added the the code that i copied from the the prettier uh settings page or documentation and so what this is doing is it's telling visual studio code to use the prettier vs code and it's also saying to uh anytime you see javascript it should use uh the prettier vs code this is basically redundant but this is at least illustrating to us one way that you can make editor changes or settings changes just for one language so if i wanted to do css i could do something like this css and it i let it kind of fill in a few things for me but i can say editor editor dot font font size and we'll do 19 19 massive so i'll save that and so this is basically saying that anytime i'm in a css file it should be 19 big big letters but if i'm in html or anything else then it should be we'll say font let's see yeah well i'll just type start typing editor font size and it'll do it for me there we go it'll be 12. uh in any other case but if it's css it'll be 19. so let's try that out i'm going to go over to the html this must be 12 and then i'm going to create a new file and i'm going to say byron dot css here is um body here is css much bigger font size so uh color red that's css so then html much smaller css much bigger and it's because we set a a language specific um setting here for font size 19 and then we have another one that's just general for everybody now if i wanted to do javascript another font size then i could do that as well you can get all kinds of crazy with all of these settings while we're here in this json i will mention to you that there are a few things that you need to know about about json if you're gonna if you're if you're having problems especially with the json so if you just copy and paste it and it seems to work out of the box you don't have to troubleshoot anything then fine but if you if you do run into problems i'll just give you a quick primer like 30 seconds primer on json basically everything's going to be inside of these curly braces so you got to have one at the top one at the bottom every time you have an opening something like a parenthesis or a brace or a bracket or a quote you've got to have a closing so uh you got to have one on top one on the bottom here and then i'm going to basically set something up i'm going to do a key and value and a comma so i always have to have a comma at the end and if i could spell so i'm doing a little i don't think that's gonna work but we'll see uh so i have to have a comma at the end of every line so you can see here's a comma at the at this the end this line there's a comma at the end of this line now this one doesn't have a comma why because it has a curly brace but then after you finish with those curly braces it has a comma same thing here open curly brace uh this one doesn't have a comma because it's the last one so you don't normally have a comma at the end just like you don't have one here uh so here this editor font size that's called the key and then the value after that is the value and there has to be a co a colon in between so if you're if you're running into problems where where you've got like red red underlines like this and things aren't colored properly then then you maybe hover your mouse over it and see if it if it tells you what's going on and eventually it says here expected a comma well my line has a comma but the line above it didn't so i'll just add a comma everything's good to go again so instead of leaving this here i'm going to take it out because if i leave it in there it'll probably send vs code into a a tizzy is what we say in tennessee a tizzy so um i'm actually gonna move this back i don't want this uh crazy font size for css so i'll put it back and and that then now it's just adopting the the um the font size of the the global settings this is global here outside of a language and these are language specific which are inside of language okay let's take a real quick look at um in the embedded terminal so let's go here terminal new terminal and that's it i mean you can do some commands here ls is a listing of the the folder uh you can you can also type in cd and it'll do something and ls again so you i mean you don't have to know anything about the terminal to be able to do this um you just need to know how to how to turn turn it on so how did that do that uh you couldn't see where i did that because i was doing it out of the other window so um actually if you um if you click at the top of your screen and sorry you can't see it on my screen but if you click at the top of the screen there's going to be a terminal option so it'll be file edit selection view go run terminal right before window and help so when you click terminal then you'll be able to just say new terminal and it'll pop up right down here in the bottom of your screen there's also a keyboard shortcut so if i were to do shift command p and just type in terminal then i can open a new external terminal uh which it looks like the keyboard shortcut for that is shift command c so let's try that shift command c no that opened up a terminal outside completely outside of vs code so uh which is also useful uh i i use these outside of the ps code normally uh so let's see if there's another one so shift command p terminal and uh here here's another one create new integrated terminal and that looks like it is um i think that's control shift and then um that back tick this is like the the inverted uh uh quote so or apostrophe so it'll be uh com control shift and then back tick so let's try that ctrl shift back tick there we go yeah that's that's what did it right there now you don't have to use keyboard shortcuts but i really do recommend it because they um they help make you faster uh because every time you have to move your hand to the mouse you have to context shift just a little bit in your brain and it can it can interrupt thought processes and things like that so i definitely recommend it so open files and close tabs let's try that real quick so i was able to open this index file by clicking it it opens up over here so i'm good there um i'm able to close tabs so we'll do that right there so that's a seems simple you'd be surprised but that is that is actually something that you need to know how to do um so just to deepen that just a little bit you can also go um like if you've got a lot of tabs open and uh let's see if i can i can open up a few things so uh there we go so you can actually right click and like close all or you can close the ones that are saved so leave the ones that are open that haven't been saved yet you can close all of them to the right you can close all the other ones but besides the one that i clicked on and you can just close this one and you can see that there's a keyboard shortcut also for closing the tab so that's command w so when i close this one i can just do command w and it's gone that's opening files and closing tabs uh and then the last one is is formatting code using the the keyboard shortcut so let's uh let's let's remember what that keyboard shortcut is i'm gonna mess up my formatting here real quick and i'm just going to do command shift p again and i'm going to type in format so remember there's format document and if i go over here to the right i can see that there is shift and then uh alt f shift alt f so that's my my shortcut so if i do shift alt f then it fixes my formatting for me kind of nice so if i if i do i don't know some uh some of this no that's not if i put if i introduce an error it's not going to it's not going to work but like that's not going to introduce an error but i can just do shift alt f it fixes the formatting for me so that's that's the last thing uh it's it's not a lot we're just talking about six things i know i took a lot of time kind of talking through things you could probably uh demonstrate mastery of those things much faster than i just did but um but uh hopefully this was a good primer for you to to understand vs code a little bit more from a non-programmer perspective um and and then hopefully the next time you uh you you're you're trying to dive deeper into vs code it'll because you are a programmer and then all the the other resources will all of a sudden make sense all right have a great day

Channel: CodeX Academy

Views: 3,178

Rating: 4.8666668 out of 5

Keywords:

Id: 0fROnrISdZU

Length: 28min 25sec (1705 seconds)

Published: Tue Mar 02 2021