Learn Visual Studio Code in 7min (Official Beginner Tutorial)

this is visual studio code a lightweight but powerful code editor in the next few minutes i'm going to start from scratch so you can follow along and we're going to write and execute some code in javascript python and html and along the way explore the features of this code editor now once installed and launched the first thing that i want to do is show you how to open a folder to set your workspace which you can just do by going to this folder icon here and clicking open or you can use the shortcut and in my case that's command o now i know that i want my workspace to be in my documents folder under getting started so all i have to do is highlight that folder and click open on the left hand corner you'll see under explorer my folder name getting started and any files that i have under there which is currently none now that we've got a folder open let's take a quick look at the editor so you know the purpose of some of these buttons and sections on the far left is the activity bar and the first icon is for the explorer to see your folders and files below is a magnifying glass to search find and replace text and files across your whole workspace then there's source control to track changes in code with git and github next is run and debug to execute code and debug it using breakpoints the extension marketplace to add additional features to our code editor and then a couple of icons for your account and to manage settings but at the very top center we have our command palette which you can go to view and select it as your first option or use the shortcut the command palette is very important as it is the control center for all commands in visual studio code at the bottom of the screen is the status bar where on the left we'll see a number of errors or warnings and on the right the current line number and programming language right above that is a panel for output or debug information problem details and an integrated terminal so let's go ahead and create a new file i can go over here and select new file or hit command end and quickly notice at the bottom right hand corner it says plain text but once i start typing console dot log open parenthesis immediately it notices its javascript and at this point once i start writing anything else intellisense is going to kick in i write c-o-n and it's like oh you want to write confirm console it's trying to predict exactly what i want to write i hit the dot the letter l do you want to write log yeah it's reading my mind practically this is intellisense it's that smart completion all i'll write is rise and shine and on the next line ready for a new day and if i hit command s i will save my file as js sample dot js and hit save and you know you need to save whenever there's a change made because if i hit the space bar here you'll see that there's a dot that shows up which means i need to save and if i want to have to avoid having to save every single time i can go to file auto save and any little change that i make it immediately saves it and now to execute our code i hit f5 and as you can see below rise and shine ready for a new day now let's write something in python i'll create a new file command end and i will save it as python sample dot py so visual studio code at the bottom right hand corner notice that it's python but if i start actually writing code you'll notice that i don't have that intellisense in fact i could write almost anything here and it's not giving me any type of warning so for a language like python extra support is needed and that's where we could use an extension which is the first one recommended here so now it's installing and it will give us intellisense linting which is going to give us that squiggly line whenever there's like an error debugging and some more capabilities so now if i start writing i get that intellisense and i can finish writing my statement and if i put in some nonsense here it will give me a warning and now i can add some more code to execute it by hitting f5 python has entered the building or i could also execute it by hitting this run button here now how about demonstrating something with html so instead of creating a new file what i do want to demonstrate is that you can just bring in a file into the explorer section so if i go and choose explorer i already have some prepared html that i'm going to drag in from another folder and when i drop it a copy of this file will be created into my workspace under getting started and here is just some simple html now with html we can't execute it from the terminal but what we can do is use an extension that will open a browser preview right in visual studio code next to your html and css that extension is called live preview and we want the one specifically by microsoft which is the first one here so i'll install that head back to the explorer and now all i need to do is right click on my html file select show preview and there you have it within visual studio code now this version doesn't seem too attractive because there's no styling to it i do have another example i can go ahead and drop in and this includes some bootstrap styling and i'll do the same right click show preview this looks a little bit better i'll hit command minus so you can have a better view and what's great about this is you can make some changes and you'll see the results on the fly and that is great i'll increase my screen again hitting command plus the last thing that i want to show you is that vs code is extremely customizable not only with functionality features but also with the way that it looks by changing themes so for example if i were to go to the command palette which we mentioned earlier by hitting command shift p and i typed in theme i can choose color themes and start scrolling up and down through the different themes that are available and if you don't see what you like there's an option for browse additional color themes you can choose that and we'll search for a lot more that's available online and you could scroll through a bunch of these or if you already know the name of your theme you can just search by just typing it in like i know one that's called night owl i'll choose a first and see how everything looks with my new theme so i just showed you how easy it is to execute some code in python javascript and html using visual studio code and also explore some of its features like intellisense the extension marketplace and also how to customize it with themes but that barely scratches the surface so to learn more about visual studio code subscribe to the channel and also check out the links in the description for this video

Channel: Visual Studio Code

Views: 703,988

Keywords: vscode, visual studio code, vs code, tutorial, learntocode

Id: B-s71n0dHUk

Length: 7min 16sec (436 seconds)

Published: Fri Apr 29 2022