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. 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 through 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 editors 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 in 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 and quickly notice at the bottom right
hand corner it says plain text. But once I start
typing console dot log, open parentheses, immediately it notices its JavaScript and
at this point once I start writing anything else, Intellisense
is going to kick in. I write CON 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 jsSample.js
and hit save and you know you need to
save whenever it's a change made because if I hit
the spacebar 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, autosave 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+n and I will save it as pythonSample.py
So, Visual Studio Code at the bottom right hand
corner notices that it's Python, but if I start actually
writing code, you'll notice that I don't have that Intellisense,
and in fact I could write almost anything here, and
it's not giving me any type of warning. So for
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 is
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, and 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 could 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 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 we explored 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.