Visual Studio Code Web Development Setup and Extensions

Key Takeaways

hey what's going on guys and welcome to a new field storage they but I'll talk about the my set up behind the scenes of the code editor and what I'm using like tools and extensions to develop or for web development so for 2018 or for any here out there but this like my personal choosen of extensions in Visual Studio code like the code editor I'm using for web development so let me just jump you through that I have here we just did our code the code editor I'm using is video studio code if you think this like a bit confusing it's from Microsoft of course and this to product is Visual Studio as you can see down here and this Visual Studio code is they're completely different things Visual Studio code is an open source tank and it's like cross-platform available for the three platforms out there so it's official website like Visual Studio on how to type inaudible in here but with your studio code so visuals video just search for that studio code there's on a visual website for that from Microsoft as I've said it's open source very very flexible Cal and so so if you have any other could in theory you're using for the time being you can move on into this one as you can see it very very nice and it's cross platform available for three pastors Mac OS X Windows and Linux so you can use it to right out of the box when your platform of that I really advise you to download this and like just finish or follow the video to see the extension so I'm gonna talk you about the extensions I'm using in here for achieving better performance and like also making better applications better web development experience all of the kind of things I'm using this extension so let me just walk you through and talk about what are those things and why I'm very useful for me and why I use them on my daily basis and why I just like Visual Studio code I'm not choosing awesome or sublime tanks why have choosing this one specifically because first thing is having like a lot of extensions on those so there's a large library of extensions open source of extensions so you can just tell we're going to use them out-of-the-box and also the community is working and if you have a problem out there you can just type in Google search for your problem and boom gonna find a lot of solutions out there from stock overflow stock exchange and a lot a lot of other things and one thing or the thing is is just like this is an open source and from Microsoft so Microsoft sisters offering a lot of tools for like developers out there so this is one of this and it's very reliable also for the performance it just performing very very well and you can use it for a platform so when you have Linux and Windows you can just use it on both of your platforms without changing from one editor to the other so this is the major things that I'm using on talking about anyway let's just jump right into the extension on here let me talk about so the first thing is my portal also close tags so what does this actually mean as you might have noticed in here I have the open up it and CSS J's and an html5 subject for demonstration purposes so for this quote auto close tag when you type it tag in here and you just close it it just gonna complete the the end tag or the close tag for it from the HTML array it's just very simple thing but it's very useful when you type the code you wanna type the code bit of a path so yeah it's gonna be very quick solution for you the other one is beautify and it's fun it's just very nice from its name you can even add functionality just please find your code and format its and indents your code or if you don't know what I mean by that so let me just say I've put it up in here and something like it's not indented correctly it's not formalized don't wanna put an h1 in here so as you can see it's not intense correctly in here so if you want you can in get its money in fun with beautifying it just can do all these kind of things automatically on stage so when you click control save or go into file and save as you can see it just gonna formats as you also want to click out there and you can't gonna look pretty much very very nice in here so without manual doing or something just gonna be doing it automatically just supports also JavaScript and CSS so right out of the box is gonna support whatever you need out there so yeah you got a point actually that's why this fire is used to be here and I really could recommend as you can see there's one point six million downloads so me up you can use that also the other one is bootstrap three-step sets also I know bootstrap for is out but you can use three I don't know about which drop 4000 extension yet but you can search the the the market order to find the extension for the fourth version of bootstrap but the third one I've used this one's gonna give you a lot of class until my system launch suggestions when you type in you know maybe when you put a div and you try to put the class in here and try to put a button and stop it just gonna give you that I'm not spinning or something believe me this is just working very fine it if you use bootstrap a lot so this is gonna be very helpful for you and Bauer don't need this bar but if you use Bower this gonna also an extension for you so this not like that necessary pop give us points let's also see in C++ they're not for web development but if you are a desktop developer as well I really advise you to go ahead and download that both of these this also the other ones is called color Mpho and color picker so this like for the CSS and some designers they just really really gonna come in handy here so let's say you have an h1 in here and you want to just design your things so let me just put a background color and this for this snippets as you can see here for inter license and gives you the template code or code completion so for this extension I believe it is HTML just as per to fire or its included with the we just yeah it's included with Visio steal card as you can see here so right when downloading the Visual Studio code it just gonna work for you right out of the box so let me just choose a color and this can see it call selections as well but let me just try to put a red thing so you put it you guess the I don't know little box so many more st gets the full information and this comes from the color in for new so you're already get the four information of the call and you can just get one how to manage that from the color picker and you can just pick between colors in here between transparency and all its kind of stuff so this kind of comes in handy a lot when you're designing your things and try to pick the right color for your design so you want to punch out a point actually this is for the color Pickers this allows other extensions you might need to use for the empty intense so when you have like an empty indented and you save the font is gonna just as you can see automatically save the file what's much gonna go and disappear so this what she is doing empty indents for the GLS X this is like for the GL assault if you're familiar with LPG oh so this extension is for you other than not not for web development actually anyway so let's just jump into highlights watching tag so this actually when you like a selected tag it gives you the highlights of status can see between like your curly braces so it shows you which tag belongs to which so this is the parent or this like the start tag and the enttec or they closing in the start tag so it just shows you which tag belongs to the owner so this is gonna help you a lot when you have like a complicated code inside another complicated code and it's almost kind of saying so when you have that it just helps you a lot debug your code and find which tags belongs to each other this kind of thing so yeah this highlights touch much in tax I mean whenever you choose its own it gives you the parent or the closing and tag it was kind of thing so yeah for you for the other one we have the HTML boiler panels and this HTML portal palette so if you are like the person of who makes HTML a lot and just trying or very very bored of just HTML 5 and just do it HTML over over time each time you want to create a new file this one provides you with a ball or pad which means whenever you just put an HTML you get this like the html5 boilerplate and you get the intimacies when like that it gets an HTML document ready for you right out of the box so this is like a very very nice thing you know I've used this a lot this for a couple last month but thank you I believe this is just gonna be very very handy for you so yeah moving on to the other one is the indent remember so this nun the quietly like that necessary but it really really helps me I find it really really nice in the last couple of months or developments and also for Python because it's all based on in detention so if you are a Python developer or you want to get into Python I really advise you to go to indent where boss can see this one is remember this like indentation remember or colored indentation this all happened from this one so whenever you do an indentation you get a color thing so it shows you which in detention you are in in how much space is on its kind of colors so if this really matters for you you can use it enemy using for a couple of months as I told you is really nice jump into the GS CSS and HTML format so this also one is just formats of your code whatever you type things ask the imputes fighting so it does the same thing but the supports a bit larger thing so you can just check out the documentation for this as you can see this kind of for the format so you can use snippets commands kind of thing but it does the same as the other one there's also there about five snippets in there were played snippets so if you are a loyal fan of like you do a lot of they're both there's gonna help you a lot for providing me with snippets whenever you type the class whenever you type the helper functions so we're just gonna give you into my system adds and gives you the list of functions available or list of variables available or methods or the kind of things so yeah as I told you this is gonna help you a lot there's also a Python in here if you if you are trying to get the to Python this is also very necessary and for the theme as you can see but still I'm using in here for the CSS for the JavaScript I need anything the whole thing I'm using in here is from the material thing this couple of themes are very nice like Dracula theme or the flats bike on team all kind of things but I really like my job you'll see because it comes really really in nice colors can see the blue and the magenta line here and the overall like blue thing all of them works just fine so the material theme is for seemingly coming here and for opening browser so we just click ctrl shift P and just open your default browser you can just set the default browser on the settings of this extension and we click that it just gonna open up the HTML file and default browser very very quickly without just going in ahead and find a new html5 or HTML file and just open it manually you can do it using this extension so also the other one is path until Isis so path until Isis it gives you whatever your directory is when you are searching for that refugees gives you into vices that then let me just say let me go ahead and here let me create another directory my name is my dear and mine or this supplier should not a day or two okay so let me just create a directory again my dear so whenever I try to go to this directory let me put it that on the string forward slash as you'll see I get invitation thing or it gets into license so opto CSS my dear and if there's another world everything is not like they're cheek and it gives you a advices about that it just very very helpful if you have a lot of complicated like nasty children leaders of all the directories and stuff like this also this kind of comes in handy a lot for the PHP you might use the phpdoc blogger beach before matter and the PHP until life things not meant alliances but until elephants for the PHP if you are a fan of PHP or we use PHP alas also this comes in handy for preachers also over code formatter I use you might have noticed I use a lot of code formats in here but yeah this really really nice ones for prettier and beautifying all these kind of things helps you prettify or your format your code a bit more professionally in here so you get this as one the same and yeah I believe this time so yeah I have the last one here is to do highlighter so for the to do of my lighter is just gonna highlight whenever you put a to do so under Commons so you don't forget what you to do so you can just see them whenever you browse your code again or you just check out your code as you can see when I put that I get this highlight matching even though this comments not available or not verbal in the HTML but yeah you can get the point so to do and it gives you that yellow color so whenever you just jump through or browse through your code you gonna notice that there is it to do and try to fix it and all this kind of stuff just notifying you that there is it to do and you must do it so it's very nice thing comes in handy and sublime text key map it's gonna see this key map Lurky not be new if you have a lot of misty code and you just try to just scroll in between lines and find other scan stuff you can just check out or see from this my opinion try to see whatever you need to go and just browse from this just comes in handy a lot if you have or work with an SDK and yeah velocity of dark feel also for the dark theme was consumed here and also videos to do icons for the icons in here whenever you put Java scripts you see an icon collide coming here for JavaScript and HTML account CSS a lot of other things supported in here JSON nodejs a lot of all of the lives from this cool one from video studio - I counts so you guys did pretty much it guys those were my setup for widgets little code and yeah if you like this makes to push a little like button subscribe to five why not and I will catch you in the next one