VS Code extensions are not limited to just additional themes and
programming languages.
They can also add new features to either integrate tasks you might
normally perform outside your code editor,
or add entirely new functionality you just wouldn't have otherwise.
The best way to browse what's available is to click the "Filter"
button I showed you earlier just to the right of the
extension search box.
On the pop-up menu, click "Category."
I've already shown you the options here for themes and programming
languages, but there are lots of other
categories to explore that may include functionality you would
find helpful for the types of applications you work on.
I can't show you every extension or even every category of
extension in this course, but I will quickly demonstrate one
for you just to give you a sense of what's possible.
The demo project I'm using in the course is a basic static website.
It would be nice if I could run that on a local web server and
immediately see my changes in a browser.
I'll go to the extension search box and type the word "server."
That brings up lots of options, but I want to try out the first
result in the list named Live Server.
After clicking on it, I can see that it launches a local
development server with a live reload feature.
I'm pretty sure this is what I want,
but there's lots of additional information about it here.
I could read through if I wanted to learn more.
I'll click the "Install" button at the top to install it.
That only takes a couple of seconds. Before I run it,
I want to point out that many extensions come with
their own settings
you can adjust just like you would the settings built into VS Code.
Now that I've installed Live Server,
the install button next to it in my search results has changed
to a little gear icon.
I can click on that and then choose "Extension Settings" to
view the available options.
I'm going to turn off the option that shows informational
pop-up messages.
I also want to control the port the development server runs on.
I'll scroll down a little further to find that setting.
Notice that this setting says I can only change it by directly
editing the settings.json file.
I'll click the link here to open it.
That adds the setting to the file for me.
All I have to do is specify the port number I want to use.
I'll have it use Port 3000.
I'm now ready to try it out.
I've used this extension before, and know that there are several
different ways you can start the server.
My preferred method is to launch it from the page I'm editing.
To demonstrate that, I'll go back to my file explorer
and open the index.htm file.
There's a Go Live button on the status bar
I could click to start the server.
However, I'm going to right-click inside this file and then choose
"Open with Live Server" from the pop-up menu.
That launches the server and opens the page in my browser.
You can see in the address bar that it's running on Port 3000.
Let's now try out the live reload feature.
I don't have a lot of screen real estate here,
but I'm going to dock my browser on the left side of the screen.
I'll then dock VS Code on the right side.
Closing the file explorer will give me a little more room.
I'll now change some text in my editor and watch it update
automatically in the browser.
Let's imagine I want to change this heading that says "Tour
Spotlight" to say "Monthly Spotlight" instead.
The text for that heading is here on Line 71 inside VS Code.
I'll just change the word "Tour" to monthly.
Almost immediately, my browser automatically refreshes
and the new text appears.
This is just one very helpful extension,
but I hope seeing it in action will encourage you to browse other
extensions to see how you might be able to make your own development
more efficient and productive.
Up next, we're going to transition into actually writing and editing
code and explore some features VS Code offers to help you with that.