Visual Studio Code Intro & Setup

hey what's going on guys so it's been a while since I did a video aside from the course release I've been sick lately I had some kind of viral infection with sore throat and headaches and all that crap but I wanted to do something that doesn't require a lot of focus and thinking and programming so I figured I'd make kind of an intro video on visual studio code which is just an awesome text editor so I'll go over the basics as well as some of my favorite extensions settings and some of the intellisense features we'll basically set it up from scratch and this is completely cross-platform so if you're on Windows Mac or Linux you'll be absolutely fine with it it's open source it's created by Microsoft but again it's completely cross-platform so if you want to download it you can go to code Visual Studio com I'm not gonna go through the installation because it's very self-explanatory just go through click Next and you'll get it installed alright so what I have here is just kind of a it's not really a fresh install but I've made it default with no plugins no customized settings or anything like that so it should match that the the state of your editor if you just installed it so this is the welcome page just kind of gives you some options to open a file or a folder gives you some options over here for your color theme and all that but we're gonna go ahead and close the welcome page up and we're gonna look at the sidebar first so the the activity bars they call it so this first icon is your Explorer this is where you'll open your project so all your folders and files are in one place and there's multiple ways to open folders of course you have this button but I'll show you some of the other ways in a few minutes so this icon here is just a global search so you can search things you can replace you can include or exclude certain files pretty self-explanatory this next one is a version control icon so this is where you can do all your get once we have some files you'll see that we'll be able to initialize a repository we can push to a remote git repository there's some really good integrated version control with Visual Studio code this next one is your debugger I'm not going to go over this this is beyond the scope of this tutorial but there's some really nice debugging capabilities especially for just a text editor remember this isn't an IDE like Visual Studio it's a text editor button has some pretty powerful debugging features and then this icon is your extensions so they have some recommended extensions that show up here you can also search for them I'm gonna show you some of the ones that I use later on and then down here we have this cog icon and from here we have some set we can go to our settings which I'll show you in a second keyboard shortcuts we can change the themes check for updates we also have the command palette so if we open that up you get this command palette in the middle of the screen and you could pretty much do anything from here any kind of command in this editor you can find here simple commands whoops I can actually open it with f1 as well so if I wanted to open a file for instance if I type file this is all your recent stuff and then this is just everything that's gonna match your search so file you can see open recent refresh Explorer save save all if we click open file it's just gonna go ahead and let us open a file so if you can't find what you're looking what what you're looking to do just be sure to check the command palette and you'll probably find it there alright for instance if for themes if you want to change a theme you can go to preferences themes and that'll show up so it's really handy alright so what I want to do now is take a look at some settings so if we go to preferences file preferences settings the way that they do this is it's basically just one big JSON file on the side here you just have key value pairs you have the key which is the option or the setting and then the value of it and there's different categories that you can choose from so files window editor commonly used and what you would do if you want to customize any of these is take the key value pair and put it over on this side so this is your customized file so you'll always have all your customizations in one place rather than having to remember that toggle switches that you switched off and on like in other editors so I actually prefer this method of keeping your settings so if we just put some curly braces here one of the first things that I always change is my editor size and that's usually for you guys so you can see what I'm doing by default it's 14 but I'm gonna go ahead and paste that key value pair in here and just change it to 26 you want to remove the last comma of the last setting and then just ctrl or command s to save and it'll kick in right away alright so autosave is another popular feature a lot of developers use I don't use it but what that does is it'll autosave and it'll save your files automatically without you having to save them if you want to change the delay you can search okay so that's another thing you can go in this bar and you can search for settings so if I search autosave you'll see down here are files autosave delay it's set to one second by default or a thousand milliseconds but you can change that if you want okay so another thing that I usually change is my tab size so I'll go ahead and grab that put a comma here paste that in and I usually like to change this to two because I think four makes it it's kind of it makes your code go over to a little bit too far so to kind of makes it more a little more compact so that's one thing I always change another thing that I always change is word wrap so if I just search for wrap right here you can see by default it's off meaning that my code will go off the page and I don't like that especially for you guys I want you guys to see all the code so I always have to turn that on so I'll go ahead and switch that on another thing I usually change is my terminal font size again so you guys can see it so we'll say search for terminal and if we go down here you'll see the default font size is 14 so I'm gonna copy that paste it in over here and I'm going to change that to 26 all right and just remove that trailing comma and I'll go ahead and save that and that's all I'm gonna do for now and you guys can look through the settings and kind of experiment if you want alright so next thing let's go ahead and open a project now I could hit open folder and the project I want to open is on my desktop it's this vanilla Jas weather application that we created in the new JavaScript course so we could go ahead and open it that way select folder or we could go ahead and select the folder in our Explorer and just go open with code and that'll open it right inside the folder another thing we could do is open it from the command line or the terminal so if I go to my get bash which is my terminal program I use for Windows and just do code dot that will open it in that folder as well alright so a couple ways to open your project so before we go ahead and look at that code writing and efficiency and all that and intellisense I want to take a look at the terminal because that's one of my favorite features of this editor is the integrated terminal so if we go to view and then integrated terminal you'll see it pops up down here we can also do control tilde that will toggle it and we can make this bigger or smaller if we want and by default if you're on Windows as I am you're gonna have PowerShell as the default type of terminal all right now I don't like PowerShell I don't like the standard Windows command line I prefer to use git bash if you want to use git bash you can get it from git - SCM comm it's also available for Mac but you don't really need it with Mac because there's a there's a pretty good standard bash editor or terminal in Mac so are in OSX so Windows not so much you'd probably want something like this or you could use the the new integrated Ubuntu in certain versions of Windows 10 and up but I haven't gotten into that yet I'm perfectly content with git bash so that's what I use now if you want to use that down here instead of PowerShell you'll have to add a setting so again we're going to go to preferences settings and over here actually we'll just search for terminal and we'll scroll down to let's make this smaller and what we want is do they pass it all right all right here terminal integrated shell windows and you'll see it points to PowerShell dot exe so what we want to do is copy this key value pair and go ahead and put a comma here and paste it in and then we want to change this to the location of git bash which the default is going to be not in the windows folder but in Program Files and we're gonna do - - get - - bin not - / / and then bash dot exe ok so that should be right so let's save this and then let's go ahead and close this up now if I close my editor and open it back up it's still PowerShell what we need to do is add a new terminal because we can have multiple terminals you'll see it says one powershell we only have one terminal open which is powershell but if i click the + the next one i open is going to be bash by default because of that setting so we can have as many as we want I could put another one so now you have three different terminals open now the powershell one i'm gonna select them i'm gonna hit the delete and that's gonna get rid of it so now we just have to bash terminals alright if i were to list the contents of the folder here in this one and then switch to this terminal you'll see it's not there because this is completely different it's a completely different environment so what this is great for is if you're doing like angular development or react where you have the CLI and you have a dev server and you need to run that server and that takes up your terminal so you can't use it so what you would do is run that for instance ng you'd run like ng serve or or whatever it may be npm star it's a no js' app and then just switch to another terminal to do your all your other stuff to create your components or whatever it is that that you plan on doing all right and of course you can just do standard commands you can create files so if I say touch file dot J s you'll see that that creates a full file up here file J s if I want to remove it I can use the RM command and just say RM file J s and that removes it and I do have a video on basic command line if you want to check that out all right so enough on the terminal let's go ahead and close that up and now what I want to do is open up one of these files will open up the app dot J S which is just just vanilla JavaScript and I want to just take a look at some of the intellisense features now when we talk about intellisense we're talking about features like code completion parameter info dropdowns quick info stuff like that stuff that makes sure your coding more efficient so for example this line here we have the document object and we're calling the add eventlistener method passing in an event to listen on and then the function to run when that event runs so let's go ahead and rewrite this line now as soon as I start typing we're gonna get this drop down and document is actually one of those options okay because it by default vs code the intellisense works with JavaScript okay it works with JavaScript typescript jason HTML CSS sass and less and I think that's it by default so anything else Python PHP just have to install the extension to get the intellisense which is very very simple just go to extensions and search for it so again let's go back and let's do a dot and we'll see all the options available with document dot so we want add eventlistener and then we'll go ahead and we'll put in the event we want to listen on which is Dom content loaded and we'll put a comma here now this tells us the parameter type a parameter info for add eventlistener it's telling us it takes in two type and it takes in it's a string okay so it even gives you the data type so what I'm gonna put here is the get weather function so if I start to type get W you'll see get weather pops up because that's a function down below so I'll go ahead and put that in now another cool thing that this intellisense does is camelcase hinting so let's say I just do G and then capital W and you'll see get weather will show up so it'll match whatever the case so if I were to let's see if I were to have a function here called go while like that and I were to go and type in lowercase G uppercase W you'll see go while will pop up along with get weather so I think that's a really cool feature of the intellisense okay so let me just get rid of that line now as far as your functions like let's say we have this we have this get weather that it's calling if we want to know where this function is and look at the contents of it we can right click and we can say go to definition and that will bring us down to the get weather function now if you don't want your at your actual spot or your cursor to move you can just go peak definition and it'll give you this pop-up with the function and you can actually edit it here as well okay so you could go ahead and you can edit that function from this pop-up and save it alright which is very handy okay another thing you could do is you could do right-click and you could say change all occurrences and it'll choose all the get weathers and let's say you wanted to change it to I don't know get status and you'll see down here it's also changing here and here anywhere where it says get weather okay which can be handy as well now as far as keyboard shortcuts go a lot of them are standard to pretty much all text editors but there are some that stand out with vs code so obviously if you want to go to the beginning of a line then you could click I'm going to put my cursor right here so if I click the home key that'll bring me to the beginning of the line if I hit the end key that'll go to the end if I want to go to the the first line of the file I could do control home if I want to go to the end I could do control end and that brings me down there alright so we can move our cursor where we want and if we want to do things like let's say copy align so right here you can see where my cursor is I'm gonna just do ctrl C and then go down below it or go anywhere let's go right here and I'll hit control V and that will paste it in alright and obviously control Z is gonna undo it if I want to cut it I could go to that line and I could do control X it'll cut it out I could go down here and paste it in just like that if I want to copy a line down for instance I could do I could go to the beginning here with the HOME key and I could do shift alt down and that will copy it down okay we can copy them up as well so if I wanted to move it down not just copy it then I could just do alt down or alt up and I can just move the line around okay so if I wanted to add a comment here I could do ctrl forward slash and that would comment out the line I can just toggle it again with control forward slash now if I wanted to comment out a block of code like let's say this entire event listener with this function then I could just highlight it and do control forward slash and I can toggle that as well all right now I'm not gonna go over all of the shortcuts because there's just a ton of them if you want to change any of them you can go to your preferences keyboard shortcuts and you can see all the different shortcuts here and you can click on edit and you can change it to whatever combination you want alright so the next thing I want to talk about real quick is Emmet now Emmet is really good for HTML and CSS it allows you to use abbreviations that allow you to write your markup much quicker now I'm not gonna spend a lot of time on this I actually have a full video on Emmet it's like a 40-minute minute video but I'm gonna go to my HTML file and just get rid of this for a second and if I wanted to have like let's say an h1 I could do h1 tab and that will give me a beginning and ending tag if I wanted to have a class on that h1 I could do H 1 dot for class and then test and that gives me a class of test if I wanted it to be an idea I could do hash test tab and it gives us the idea of test okay tab is the hot key by default but again you can go into your keyboard commands which I just showed you and you can look for the the the hotkey for Emmet and change it if you want now if we want just a div we don't even have to specify an element we can just say hash test or whatever and it gives us a div with the ID of test we could do the same for class if I wanted the class of foo tab and it gives us a class of foo and then if I'd want to do let's say 3 or let's say 4 Li tags I could do Li times for tab and it gives us 4 of them okay and that can also do an HTML boilerplate if I do exclamation tab and it gives us the doctype the HTML and head and body tags which is really efficient so we have to type all this stuff out every time alright but that's about as far as into eminence I'm gonna go like I said do have a full video on Emmet so let me just put my file back and save of what actually one thing I want to mention about Emmet is if you want to use it in certain let's say template engines like edge for instance which is a template engine that is Emmet doesn't work in by default what you would need to do is go to your settings so preferences settings which you can also get to with control comma okay so you can get to it that way as well and then just search for Emmet and there's a crapload of options for Emmet the one we want is included languages so right here Emmet included languages so I would take this put it over here and if I wanted to use it with edge templating I could just put in edge and say that we want this basically rendered as a HTML and that would you and now M it would then be allowed to use you could use it with edge okay so I'll just keep that there and I believe you need to do the same with things like JSX for react and other template engines as well okay so now I'll show you how to change the theme so if we go to this settings to this icon down here we can go to color theme and you have all these different themes you can choose from abyss which I really don't like if we go to let's say Manik I this is actually a really popular one this makes it looks like look like sublime text default theme which a lot of people like and another way I can get here is with is through the command palette if I click f1 and just type in theme you'll see preferences color theme and that brings you to this as well let's see red I don't know who would use that but I just like the default theme I don't know maybe I'm just I'm just a simple guy but I prefer the default dark + theme which is this here alright and if you want to install custom themes you can just go back there and go to the bottom and say install additional color themes and then you have all these themes on the side here and you can install those just as if you were to install an extension alright so that brings us to extension so let's click on this icon here let's actually clear this up and we can search for extensions here so the first one I'm going to install is an extension called brackets pair colorizer and as you can see as you type it does kind of a smart search and it's this one right here bracket pair colorizer and what this does is it adds colors to your brighter to bracket pairs so that you don't get confused with for instance nested if statements when you have a bunch of stuff nested into each other and you have all these different break curly braces or brackets or parentheses and it gives them color pairs alright this extension was introduced to me by Dylan from code 360 coding tutorials 360 which is a great channel and you should check out as well so let's go ahead and install this and once you install an extension you just want to click reload excuse me sorry if my voice is a little raspy guys now if we look at let's say the get weather function right here so you can see the the curly braces are yellow inside here we're calling a get weather method from the weather object and inside there we have we're getting a promise so we're using then but these curly braces are blue okay these curly braces are blue because they're inside of these ones now if we were to have some kind of if statement in here with another set of curly braces those are yellow okay if we put another one in here those are purple do another one those are blue so it's gonna rotate between these colors which makes things much less confusing when you have a lot of nested blocks okay so that's one of the extensions that I use quite a bit another one is live server and I'm sure if you guys have watched a lot of my videos you probably know about this one it basically gives you a development server and it gives you auto load functionality and you can use it with just a single HTML file okay so this is great for like vanilla JavaScript applications where you're not using nodejs or angular or is anything with a dev server or web pack or something like that and you can you want to open it up in a development server it just gives you a better environment to work with okay and of course you get the auto load so let's go ahead and install this all right so it's installed I'm gonna click reload and then what I'm gonna do is you want to go to your HTML file and then this is where you want to start your server from now there's two ways to do it you can go down here and you see you'll have this go live link or you can right-click in the file and you can say open with live server and then it's gonna open on your loopback address your local host on port 5500 by default and you can see we have our application so this is like I said this is an application that uses a weather API this is in the JavaScript course that I just created we could change the location if we want and that'll get saved to local storage so if I reload it's still there but either way and no matter what it is even if it's just a static HTML website with no JavaScript it's still a nice little environment to work in and again it's auto load so I'll show you if I snap this over here and let's see all this stuff the weather info is generated in JavaScript so I need to find something I can change here let's just take the that's the modal let's take the change location text right here which is this button and we'll just change it to test and just save and you'll see automatically at Auto loads and changes okay so that's really powerful instead of having to keep and keep reloading it every time now to stop the server you can go down here and we see where it says port 5500 you can click that or you can right click and actually I guess you can't right click so you just click the port 5500 that stops the server and if I try to reload this page it doesn't work okay so if you don't want to use a server like that and you just want an easy way to open your your HTML files another extension that I'd recommend is open in browser so let's see right here open open in browser let's install that okay so now we have the index.html file here and I'm just gonna right click and I'm gonna say open in default browser and you'll see that opens I don't think it has auto load let me just check say yeah yeah so it doesn't have auto load so if I save I actually have to reload so I don't use this too much because I I do use live server so there's really no reason for me to use this but it is an option all right another another extension that I like is vs code icons which gives you some nice-looking icons for each file type so let's go ahead and install this and we'll click reload and now if we go to our file manager here actually we have to activate it we will get this little drop down will slightly activate and now you'll get these little icons so you can see for HTML files I have this html5 logo and then we have these little j/s so when you start to use other other file types like PHP or dot pi files you'll have those icons as well so it's just it's not really used for like you know efficiency and or anything like that but it's just cool it's just nice to look at I guess and I guess it makes you realize what type of file it is quicker okay another extension that I like is faker so this is actually from faker j/s it's called vs code faker and what this does is it allows you to generate fake addresses credit card numbers finance info all kinds of stuff for your just basically test data so let's go ahead and click reload and now let's say let's go down here and we'll just have a div and let's say we wanted to put a name in here so what I could do is go to the command palette and type in faker and I could choose something from here let's see so I'll choose faker name and you can choose from first name last name all this other stuff title job stuff I'm gonna choose first name and it gives us Luverne okay so it's just a way to create fake data on the fly I guess a name isn't really I mean you could just think of a name in a second but you can do like addresses and credit card numbers and phone numbers things like that now those are really the the general extensions that I use all the other extensions I use pertain to a certain language or framework for instance I use PHP intellisense so this has intellisense and advanced auto-completion for PHP so that I would definitely recommend if you're doing any kind of PHP development with Visual Studio code so go ahead and reload that another one that I use is angular angular version 5 snippets which is C this one here by John Papa so I usually use that and that will just give you code highlighting code hinting everything you need for angular and it says version 5 but it'll also work for angular 4 and angular 2 alright for a vanilla JavaScript I would recommend the es6 snippets so this right here javascript es6 code snippets I definitely recommend that if you're working with you know promises and and anything to do with es6 plus alright and trying to think for react let's see what do I use for react so you have react native tools you have I think this is yeah this is the one that I usually use react native react and redux snippets for es6 and es7 so i would definitely recommend that for react alright and then also view JSC view uh yeah view view to snippets so that's what I would suggest for view and then for Python for Python and I'd suggest just this top one here that's 4.8 million downloads and this gives you everything you need for Python alright so those are the extensions that I use now I want you guys to make any recommendations that that you feel others could benefit from so extensions that you guys use that has really major your your coding and your development more efficient more quick easier because like I said I'm not a huge tooling person and a lot of that comes from what I do I make tutorials and I don't want I don't want my editor to look like something that doesn't match anybody else's so that beginners get confused and and they're there we're both using vyas code but they're asking me what editor I'm using I've had that happen before so that's you know that's one of the reasons I'm very simplistic with this stuff now I know I mentioned that I get into version control so I'm just gonna do the very basics here just create a neutralizer repository and push it to github so I'm gonna do the very very basics here and just create a repository so this is my github account and I'll just click the plus sign new repository and we'll call this weather j/s and it'll say simple weather app using the W Underground API and create repository okay so now usually what we do is just type this stuff in the command line but we have integrated functionality that we can use here if we just click on the version control and let's click this icon here to initialize it as a repository so we'll click initialize repository and what that does is it creates a dot get fought our dot git folder excuse me so as you can see all the files now have this u next to them which means unstaged our untracked so what we want to do is click up here and go to stage all changes and that adds them to the staging area you can see index added then what we want to do is when we're sure we want to go ahead and commit all it'll ask us for a commit message so we'll just say initial say initial commit and enter and now we have no changes here okay now if I go and change something like let's say just out of comma here comma a comment we'll just say test and save then that gets put into the unstaged changes or actually this is modified so what we want to do is add that and you can actually see the difference between your new change and the old file that's in the repository so let's go ahead and say let's do commit all actually should probably just stage it first so we'll do stage all changes okay and then we'll go commit staged commit message will say added comment ok so now we have no more changes here and I'm just gonna close that up now this is all local okay this is all in our local repository if you want to push the github then you need to add this as a remote repository so this right here so I'm gonna grab that and just open the terminal and paste that in alright so now that's added as a remote repository so let's go ahead and go up here and say push - and we have that option as our repository so we'll choose that and that should be pushing it to the master branch now if I reload you can see all of our files are here if I look at index.html we have that test comment there so if I want to change something like let's say we'll change tests to hello if we save that okay now this is uh this is modified we want to stage this so let's say stage changes we can do it from here or up here and then let's go up here and say commit staged will say changed comment and then we'll push it so we'll go push has the master branch okay so we want to push to here and that should do it so if we look at our index and you can see now the comment says hello all right so this is just the core basics of how this works another thing we could do is we can have a dot git ignore file and the purpose of this file is for for things that you don't want to include in your git repository so let's say we have let's do test dot txt and we don't want that to to to be to go to the git repository so what I'll do is let's go to the version control you can see it's unstaged or untracked but I'm going to add this to the git ignore so if we go ahead and do that you can see our get ignore file now has text test.txt so now if we make another change let's change it to hello one and save and then let's go ahead and stage so we'll say stage all changes and then we'll say commit all and we'll put a commit message I'll just say another change and enter and then let's push to github go over here if I reload our index page now it's hello one is the comment and if we go back to the repository whoops you can see that there is no test dot txt because that's in our git ignore file okay and we can see all the commits that we've made right here so we've made four commits so initial added comment change comment and another change so as I said I'm I don't use this too much I mean I do use it but I use the standard commands much more so maybe this is something I should get into a little more maybe it's more efficient what I'm gonna do is I'm gonna link a another video from one of my mods on my discord server Simon also goes by Cookie Monster on the server and he made a video on vs code and he goes more in depth into get into branches and so on along with some other stuff so it's a new channel he's just getting started so show him some love go over there watch that video if you're interested and that's it guys thanks for watching and I will see you next time

Channel: Traversy Media

Views: 599,751

Keywords: vscode, visual studio code, vscode extensions, vscode plugins

Id: fnPhJHN0jTE

Length: 38min 37sec (2317 seconds)

Published: Tue Dec 12 2017