This lesson's going to provide a quick overview of visual studio code, so this is the suggested editor
to write code.
It's an open source editor, it's free and it runs across Mark Windows and Linux machines.
So, first off, go over to the website code, dot visual studio dot com and go to the main page where
you have a download option.
You can select the download option that's going to suit your system.
So right now I am on a Mac, so I would be downloading the stable Mac version and doing the install
on my computer.
So run through the install of the application and they do have really good documentation on their website.
So let's go ahead and open the download file.
Now you should see a welcome screen whenever you first start up the application and the font is going
to be rather small.
So I'm actually going to increase the font size.
So I'm on a mark.
I'm using just command plus and that's going to increase the size of the font.
So you don't necessarily need to increase it on your system.
I'm doing it because I'm recording the video, so it's a lot easier to read.
So this welcome screen, you can uncheck it.
Otherwise it will always show up whenever you open the application and you can also trigger the welcome
screen.
So if you do happen to close it and you want to go back to that welcome screen, you can go under the
top tabs under help.
Welcome.
And that's going to pop that screen back up.
So they do have some basic starting commands.
Here's where you can start by creating a new file.
You can open a file or you can run a command in the command palette and view all of the commands that
are available within the Visual Studio code.
There's also recent content.
So once you've been working on some content, you're going to see it listed within the reasons.
There's also release notes and how to get started with Visual Studio Code.
So what this will do is this is going to give you some basics to get started.
So let's go through those where you can select the theme that you want to use.
There's three default themes.
There's the light, there's the dark.
There's the high contrast.
And there's an option to load even more themes so you can select Seemore themes.
And this gives you the full listing of all the themes that are currently installed on the systems.
You might have more.
It depends on what the default is.
You can also install additional color themes.
So selecting the install additional color themes will give you a full listing on the left hand side
of all of the different themes that are available in the marketplace.
So let's say you do want to install one of these themes.
You like it, you want to do the install, are going to do the one candy dark.
Just do a quick install of it.
It does have some information, but how many downloads, how many leaks, how many stars it's received.
So go ahead and click the install and that will install that particular theme so you can set the theme
color as well.
You can disable you could uninstall it at any time.
If you want to minimize the themes window, you can always go that way and minimize the themes window.
So now it's changed the theme.
You can always go and open up the.
Options once again, so for the command palette that's under review command palette, there's also a
shortcut for that, and that's one of the best ways to access the visual studio options.
And what you can do with Visual Studio fairly quickly shortcut for the markers, command shift peak
and for a Windows machine, it's shift control.
So that's going to open up the command palette.
And this is the command palette where we've got all of the commands that are available.
So what you can do is you can select by theme so you can generate that.
You can generate color theme from current settings.
You can select a color theme.
So going back to the select color theme, this will once again give you the option to switch back to
the other themes that were available.
And again, if you want to load more themes, you once again have an option to load even more themes.
So I'm going to go back to that high contrast.
And whenever you're done with one of the themes or the extensions or one of the windows, there's the
tabs at the top that you can use to close them down.
So the next option that we want it to look at is when we go here, we can select the different languages.
And this is one of the most important parts, because this allows you to write the code smarter, allows
you to visual studio to understand the syntax and helps do the code completion debugging so you can
select the various language extensions.
So these are some of the common language extensions that you might want to use.
If you select browse the language extensions, it'll give you all of the different language extensions.
So depending on what programming language is that you're using, you can install the various extensions.
And this is going to look very similar to how you did the install for the color theme that you've got
the windows that are popping up that are showing you information about the add on that you're adding
on some brief on how to use it.
And also you have an option to uninstall it if you want as well.
So closing that and now going back to the shortcuts.
So shortcuts as well.
If you're coding, it does save you some time.
So if you get familiar with the shortcuts of your editor or if you do have an editor that you are familiar
with, it's shortcuts and you want to use the same shortcuts within Visual Studio Code, you're able
to do that as well.
So you can open that up again within the command palettes and it's got all of the shortcuts.
So one of the ones we just saw is we can open up the command palette with a shortcut.
There's also if you want to get the keyboard shortcuts reference, that's all available there, too.
So you click it, it'll bring you to the Web page, which will give you the option to download the PDF
with all of the shortcut cuts that are available for your system.
So detected that I'm on a Mac and it brought me into the shortcut list for this computer.
We can open up our code and we can see the code.
So this is an option that we can use when we're exploring so we can start and check out a project getting
started.
You can also walk through this, click these links.
You can go to the command post as well.
And this gives you more information about what's available.
One of the nice other features that is available within the Visual Studio Code is the built in terminal.
So this is a convenient way to run and get special access so you can show the terminal pallet, which
is the terminal down here below.
You also have an option in the top menu to create a new terminal.
You can split a terminal and there's some configuration and ability to run some tasks.
So what this will do is this will open up the terminal to wherever your folders are.
So by default right now, it's just going to open up to the root of my system because I don't have any
folders set up or I don't have any files set up.
But if we do have files that we open up the terminal, then that's going to open up within that directory.
So let's go back.
We can close the terminal.
So there's you can minimize the terminal as well.
You can create a new terminal.
You can set the different names, icons and colors for the terminal so that if you want to be able to
distinguish particular terminal and one from the other, you're able to do that.
There's also debug console and output and a problems area.
So if there's any problems within the source code, it'll be outlined here.
So one of the other really nice things about the Visual Studio code is there is a lot of different extensions
that you can make use of.
So in order to select the extensions, you can go from the getting started, the browse, the recommended
extensions.
So this gives you some default extensions and in order to install them, you just simply click.
Install button, there's also s lente, so these are very useful application and extensions that you
can use within your coding for even more so once you've gone through and you've set up your visual studio
code.
So what you can do now is you can start creating some files.
There's also some more options with them to get started so you can tweak your different settings.
And this is all available within the settings window where you can set your autosave, you can set the
font size in a number of other visual settings that you can use in order to really customize the way
that your editor is behaving.
So let's close there, get started.
And what we'll do is we're going to create a brand new file.
There's a number of different ways to create a file you can select and you can just do the shortcut
keys or you can go over to the top menu bar, select under file and you've got an option for a new file.
You also have several other options where you can open up a new window, you can open an existing file,
you could open existing workspace.
You can see your recent files.
You can add to the current workspace folders, adding this existing folder where you can serve as a
workspace.
So you can also use workspaces in order to separate out the different files and the different projects
that you're working on in order to create separation so that once you have all of the content contained
within the single workspace, it's a lot easier to manage.
So you've also got the typical save options.
You've got the autosave that you can turn on and off here.
You can revert, you can close the editor and close the windows.
What I'm going to do is I'm going to create a brand new file.
So what gets created is just a blank file.
So there's no extension on this.
There's no language.
The language down at the bottom, in the bar at the bottom is just going to see that it's plain text.
So it's not detecting that this is any particular type of file.
So we're going to create a simple HTML file.
And so we have an option to type in code and notice that it's not opening, it's not doing an auto,
it's not making any suggestion for any of the syntax.
And you will see once you actually see it as a file type, then it will pick up the different coding
that and it also help you with the code staling.
So you're going to see the different colors of that staling.
So one of the best things to do is before you even start working on a file is to save it to the file
extension that you want to be using.
You can use the keyboard shortcuts or you can go up to file and do the save us and save the file.
So I've got a folder called Khoder and this is where I'm going to create the file.
So just creating that index, each HTML file and once it detects that this is an HTML file, it'll give
me the path to where the file is located.
Also tell me the different file type and also down here below we're going to see the file type.
So what's happening now is that we've got the adjuster now.
So when I start typing some of the code and it's got auto closing of the brackets and you can customize
all of this within the settings, it's also got the full tree where we've got the DOM tree of the HTML,
the head and the title.
So what is nested within each other?
So what is what are the children that are nested within the parents?
And it's got the whole tree structure in the whole hierarchy being presented there.
And now that it did detect that it's an HTML file, it's making a little bit easier to run.
So there are some really good extensions that we can make use of and we can also customize the windows.
So there's a minified screen of the text here.
There's the breadcrumbs up here.
There's a few bars at the left and at the bottom.
So you can customize this.
If you go to view, you can get rid of the mini map, which is the first one that we showed you in the
top right hand corner.
You can also get rid of the breadcrumbs.
So it's that breadcrumb of hierarchy's.
And also when you're in the TEMEL the hierarchy for that, there's also under appearance.
You can show the sidebar, which is the sidebar where we were just selecting the extensions and also
the themes.
Again, under appearance.
You can hide that sidebar.
You can show the status bar and the status bar is the one that was right there at the bottom.
And you can hide that status bar.
So I'm going to go ahead and keep the status bar.
And depending on how much space you need for your screen, you can also hide the activity bar.
So let's go ahead and create one more file.
So save this file.
And I just did the shortcut to create a brand new file.
I'm going to save this file as test G.S. and within test G.S..
Well, output.
Hello world.
Now, I already do have node installed.
On my system, so this is just to demonstrate how to use the terminal within Visual Studio Code so you
can go up to the terminal option and select new terminal that's going to open up the terminal window.
So let's go back under review and I'm going to add the breadcrumbs back in.
So this is going to be the folder that we're sitting in.
So let's navigate into the folder.
So the typing in Khoder itself out, I can see the two files that I have.
So I have tested and indexed each HTML.
So I do have node installed in in order to run a JavaScript file, I can type in node within the terminal
and thus can execute the code that's available within the constraints file and that's directly with
the editor.
So I didn't have to leave.
So those that I didn't have to leave to another application as a terminal is really conveniently here
directly with an editor.
There's also the output area.
There's the debug, which helps you debug some of the application processes.
There's also problems such as detecting any problems with the code.
It'll let you know if we do have some issues with the code, it'll right away it'll tell me within test
just terminated string literal something that I didn't end the string, so detected the problem right
away.
And we can see that you can also do it for the debugging.
So let's say we had several different worlds that were running, that were opening it to the console
and you can set these points.
So these are the red dots here to the left of the code segment.
So let's go back to the terminal and I'll just clear that and we'll run the node test.
So it runs through all of the different syntax there.
If we go through the console and if go to the type of menu where we go, run, start debugging.
So selecting the environment, I'm going to use no gas to do the debugging.
So we see that it stops at the first breakpoint and it gives us information about the application.
So the variables that are being used with an application, the file path to the applications of the
directory.
So it's got all of the node content that's being put within the debug console.
We've got we've got the first line of code.
I paused on the breakpoint.
So where the stock is currently at so we can continue to the next breakpoint and then continue again
to the last point.
And we also have an option to run into.
But we can do the JavaScript terminal.
We can debug that.
You are.
So we've got all the different points that are set.
Those are some of the debugging that you can do within the Visual Studio code.
Let's also go back to index and in order to run the index file so you can simply drag and drop it within
the browser.
So that will open up the file to whatever that file location is.
You also have an option to install extensions such as a live server.
So that will give you the ability to run this file within localhost and that local machine that gets
set up directly from the Visual Studio code from the Web editor.
So let's go ahead.
We're going to add an extension so under a code in the type menu and then two preferences and then extensions,
or you could use a shortcut to open up the extensions window.
We've got a number of different extensions here.
So right now, it's just searching for the recommended ones.
The one that we are going to be looking for is called Live Server, and this gives you the option to
install a server so already have it installed.
So I'm going to uninstall it and reload the application, go back to life server and then just do an
install of the server.
So now that my server is set up and it's running and there's some more information about different extensions
that are available within the window, and once you're done with the window, you can always close it
out and still have the terminal open.
Let's go out and we're going to close the server so now we can run the live server.
So let's minimize the sidebar and we can run the server.
So we need to have each HTML file and we actually need to have a folder so we can run the server off
of the folder.
So if we do click the quarter, that's the folder that we want as the root of our live server.
And what you need to do is actually you need to open up the folder in order to run it within, get the
server option for all of the files are contained within there or you can add it into a workspace.
So under file you can select to open and open the folder or open the workspace.
So right now what I'll do is I'll open up the folder, go into the folder on my system, just clicking
open.
So that's going to open it up.
It's going to give us this option that we trust the authors of this file.
And I'm just going to say, yes, that we do trust you see that two files that we're working on.
So the index and the JavaScript file.
So they're both there on the left hand side within the file listing and now within index.
Whenever we go to index, whenever we're starting out with the folder explorer, now we've got the option
to go live here at the bottom right hand side within the bar so we can click that.
And that will open up the file within the local machine, within the local machine.
So you do have an option to configure this within the server.
Add on, you can close it.
You can not show the message also anywhere on the HTML file because now it's attached to the folder
so it knows what the root folder is for the server.
You can right click on a Windows machine.
I'm just going to close this window, this message.
Or you could do a control click on a Mac and you've got another option there to open the server and
you can stop the life server as well.
So that gives you those options in order to have the life server up and running.
And this is a great way to edit your files and your applications and if you ever do, close your live.
Server, browser window, you can simply go to the localhost and using the port with the colon between
them, so localhost with the port five thousand five hundred, or you can use the one two seven zero
zero dot one.
And it's going to refer you to the same location, which is going to be where the server is running
the files from that folder.
And so this is a great way to develop because now whenever you make any changes within each HTML file,
it's automatically going to get shown within the display area of the browser.
So that's whenever you've got the file open and you update the content within the editor.
And right now I just have a split screen where I've got the editor on the left hand side, the browser
Minified on the right hand side.
So there's a lot of features and we've just really just touched the surface of all of the features that
are available within Visual Studio Code.
So now it's up to you.
You can go over to the website if you want to know more.
There is a whole bunch of documentation.
There's the getting started.
There's a set of videos, settings, user information, user guide setting up for the different languages
and lots of rich documentation.
There's also a lot of so there's a well supported application.