Visual Studio Code setup for HTML CSS and JavaScript | VS Code setup for beginners

hey what is going on everyone this is going to be just a short introduction video on what exactly i'm using for my browser code editor and expansions and so forth and so on so for the browser i'm using obviously google chrome now you can use anything you want you can use mozilla firefox use opera if you wish i'm using google chrome it just fits me it has excellent developer tools so it just fits my knees but of course as i said you can use whatever you wish now for the code i'm using visual studio code although i started out a couple of years back with adam adam i thought to be really good it still is don't get me wrong also i tried out sublime text but i ended up using visual studio code so after we still released videos to the code and it has a ton of new updates you can by the way you could either use visual studio code the stable build or you could use the insider edition i'm using both of them actually so if you click on install edition the difference is you're going to get much frequent updates all of the updates are actually stable i never had problems with them but well it is an option now for visuals to decode if you wish to use it just click on download if your mac this is going to be automatically for mac if you actually if you go to downloads yeah you can choose your you can either download it for windows you can either download it for for linux or for mac now i am using mac and windows dom ask me why i just do so as i said download it install it and you will get created with this actually bare-boned visual studio code with nothing in it so let's start from scratch and set it up to have exactly my environment but first of all let's create a folder so right click on your desktop or wherever create a folder i'm just going to call it my folder and i'm going to drag and drop it in here now you could either drag and drop or you could to open a new folder go to wherever you saved it my folder select it and it would open on a mac it's a bit different but not that much okay now if you wish to create files you can click on new files so far so on i have an entire course on visual studio so if you wish to check that out you could do so uh nevertheless let's go to extensions now on the left side actually let me make this larger let me enlarge this let's just say we're going to stay here enlarge this to here and with control or commander mac and plus you can enlarge the text so i'm going to actually go this way so you can see everything that i do now first things first let's install live server this is very important live server is let me just show you some let's type in live server but basically you're going to get the server not live share live server now click on install this very quick it's already installed now let's go to our folder let's create a index.html okay we have this created let's create a quick boilerplate let's say a h1 a capital h why did i do this h1 sub and i want to say hello world okay now if you did this and we need to restart let's do a quick restart there's actually two ways of yep down here you you could either click on go live and it will ask you is it okay yes it's okay and there so what's up okay there's a page now if you can now drag and drop it to the left side i used to have my coded on the left side and my folders on the right side so my current project now if you wish to edit something let me make this let's say you want to add h2 with all good and control s or save file it will automatically update the key is the same thing as clicking on refresh now this will just make your things a bit faster if you don't do this then you should then you would need to go to your folder and double click that index file and open it up and constantly hit refresh each time you you make a modification to it okay so this is our first extension of the next extension is for me extremely useful now you can see the way the let me show you the paragraph tag with lorem oh and we don't have emmet we'll also install that alarm if some don't even have this ah bare bone viewers to the code okay so for our next extension let's install prettier which will well it will automatically rearrange your code so let's stop in here prettier and it's actually the first one install it the next extension i would suggest to use is bracket pair colorizer now what this does it just colorizes your brackets okay so after we have this installed let's create a new file i'm going to create a javascript file so let's say main.js now in javascript you know you will have parentheses in parenthesis in parenthesis so let's create an if statement and after we have our if statement let's say something happens here and then something else should happen and this is blah blah and then if this happens then we can create another if statement you can see the the parenthesis the camera case everything is going to change so if i create another if statement they're going to have another different color if i create another one it's going to have another different color let's say i go here with an else else and this is still blue and if i create here another if statement and again this has another color okay and also let's say let's create a function with something and within this function we're going to create a array and this array will have a for each loop on it you can see within here we have now our error function this error function has again different colors and so forth and so on okay so this is extremely useful now let's go back to our extensions and the next extension i'm going to show you is and it's extremely useful is better comments so what this does it allows you to exactly like you see here let me zoom in a bit more this doesn't help it allows you to create different types of comments so if you create a comment with a star it's going to be this light green then exclamation bar is going to be red question mark is with would be blue if you type in to do let me actually show you this so let's say i'm going to create here a comment and let's say comment now you go to the start hit the star it's going to change color it's going to be lighter green exclamation mark is going to make it blue red question mark is going to make it blue and then if you type in to do it's going to make it orange okay so that's basically it it's this is pretty helpful believe me okay that's basically it for for the main setup let's see did i forget anything now for snippets you could also let's go here and search for html and css uh support this is very important and the snippets so let's go into our html and let's see i'm doing an h1 this is already using emit and now if i type lauren epson now i'm going to have this emmet now if you have this problem this is word wrap you can do now a control shift mp and can type in word wrap onward wrap preference wrap there we go and toggle it on okay and this will toggle on word wrap basically going to compress your text now for javascript a pretty useful extension is the javascript esx snippets code extensions and this will give you all the code extensions for es6 okay now install this and then you should be good to go so this being said hope you enjoyed this video and see you next time bye bye

Channel: Norbert BM Web Development

Views: 230,030

Keywords: norbert bm web development, visual studio code, vs code, vscode, visual studio code tutorial, visual studio code extensions, microsoft visual studio, visual studio 2019, visual studio, visual studio code 2021, learn vscode, setup visual studio code, vs code extensions for web development, top visual studio code extensions, best visual studio code extensions, top 10 visual studio code extensions, best vscode extensions, vscode extensions, top 10 vscode extensions

Id: fWzp5lZ5CEA

Length: 8min 51sec (531 seconds)

Published: Tue Apr 13 2021