Visual Studio Code Web Dev Setup In 6 Minutes – (2019)
Articles,  Blog

Visual Studio Code Web Dev Setup In 6 Minutes – (2019)


in this video we’ll go over the basic
setup and configuration of visual studio code. What’s up YouTube? This video is
intended for beginners. I’m assuming you have zero knowledge of code writing. So
if you’re just getting started you’re in the right place. Hit that subscribe
button and let’s get started. The first step to writing code is picking a code
writing application. There’s a ton of them out there like notepad++,
sublime text, Atom, and my favorite Visual Studio code, not to be confused with
Visual Studio, VS Code is a free open source application. It has great support
from the community and tons of extensions. The other ones out there are
fine, there’s nothing wrong with them, this is just my preference. In this
tutorial we’ll go through how to set up VS Code for web development. I’ll walk
you step-by-step through the installation and configuration and we’ll
look at some extensions that will make your life easier. So the first step is to
install VS Code. Go to code.visualstudio.com/download This is a
cross-platform application so it works on Windows, Linux, and MacOS. Go ahead and
download the appropriate version and begin the installation. I’m gonna speed
this up for time. When you get to the section “Select Additional Tasks” I would
recommend checking everything. This just fully integrates VS Code into
your operating system. You may or may not see these options if you’re on Linux or
MacOS. Once the installation is complete this is what you’ll see. As you can see
VS Code can be used for many different programming languages. For now we’re
going to focus on basic web development which includes HTML, CSS, and JavaScript. So we’re going to set it up for that. Let’s have a quick tour. On the left side
we have the sidebar and at the top is the explorer. This is where you’ll find
all of your project files and directories once you have opened a
project folder. Next is search. It’s pretty self-explanatory but this will
allow you to search within your project files and there’s a Find and Replace
functionality. Next is source control. Here you can integrate GIT. But that’s
beyond the scope of this tutorial so we’ll cover GIT in its own video later.
And next is debug. Again this is beyond the scope of this tutorial but VS Code
has great debugging capabilities. And next we have extensions. We’ll talk more
about extensions in a minute. At the bottom there’s the manage cog and in
this menu are settings, keyboard shortcuts, themes, and at the top we see
command palette. Command palette is a really cool
feature. You can also get to it by pressing ctrl or command shift P. And
here you can search for just about anything. So if you want to open a file
or change the theme or check out the keyboard shortcuts. And you don’t have to
complete a word you can even type words together and it figures out what you’re
looking for. It’s really cool. It saves a lot of time. So let’s check out the
keyboard shortcuts. There are a ton of shortcuts and you can customize them. Now
I would encourage you to learn as many as you can as you go. The more shortcuts
you know and the less you use the mouse the quicker and more efficient you’ll be
when writing code. Now let’s look at some settings. There are only three settings
that I would recommend you change right off the bat. Now these are just my
personal preference so you can set these however you like. First I like to
increase the font size a bit. I have a big screen but I don’t want to strain my
eyes. The code needs to be easily read. So for the purposes of this video I’ll
change mine to 22. Next is tab size. I prefer 2 space tabs instead of 4. When
writing a lot of code with multiple levels, 4 spaces tends to move the code
too far to the right for my liking. Lastly I’ll search for “word wrap”. I like
to turn this on. This will prevent long lines of code from going off the right
side of the page. Next let’s look at themes. There are a few built-in themes
and I’ll preview each one for you quickly. Some of these are just
ridiculous in my opinion. There are a ton of additional themes that you can search
through and download. A popular one is called material dark. But I actually
prefer the default dark theme so I’ll stick to that one.
Let’s move on to extensions. So in the sidebar go to extensions and the first
one that I would recommend is called “live server”. This one is really popular
with over four-and-a-half million downloads. What this extension does is it
sets up a local web server so that you can see the changes made in real time
without having to reload. It’s a must-have for web development. The next
extension is bootstrap 4 and font awesome snippets. Bootstrap is a CSS
framework. Basically think of it as a template. This extension will help you to
build websites based on bootstrap and I’ll have a dedicated video for
bootstrap later. The next extension is JavaScript es6 snippets. JavaScript is a
programming language that spans front-end and back-end development. In
web development JavaScript is key. You’ll be writing a lot of it so these snippets
will be helpful. Now let’s look at some basic functionality of VS Code. I’m going
to go to the explorer and open a folder. I’ve created a project folder for the
purposes of this video. Now that we have our project folder open I’m going to add
our first file and name it index.html. VS Code has something called Emmet. Think of
Emmet as shorthand. With it you can easily write a lot of code quickly. Here
I’ll demonstrate creating an HTML page. You can do this by pressing exclamation(!)
and you’ll see that Emmet has popped up as a suggestion. Now hit enter. There you
have it. A basic blank HTML web page ready to go. Easy. Now again, I know you’re
just beginning and you probably have no clue what all of this is but I’m just
demonstrating the capabilities of VS Code. You don’t have to know what any of
this means. We’ll get into the actual code in the next video. Other things we
can do is type div then hit enter and this creates a div tag for us. I can
quickly create a list by typing ul, enter then li * 4, enter. I could just type
.classname and that will create a div with the class of classname.
I can type input#foo.bar and that will create a text input with the ID of
foo and the class of bar. And if you just type input you’ll see suggestions for
creating an input button, checkbox, date, email, and so on.
Now these suggestions that you’re seeing pop up are called IntelliSense. This is a
built-in feature of VS Code that suggests options and helps you to
complete your code. To show you more of IntelliSense I will manually create an
input and define the type. When I create the parentheses IntelliSense gives me
all of the valid input types to choose from. Another feature is “auto close tags”.
So if I type left angle bracket div right angle bracket it will
automatically create my closing tag. So that’s the basics of VS Code. We’ll go
more in depth in upcoming videos. If you liked the video a thumbs up is
appreciated and if you want to be notified of new videos hit subscribe and
the bell. Thanks for watching!

7 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *