5. Getting Started With Visual Studio Code

September 15, 2018


It’s time to upgrade your toolkit. Next posts will involve using multiple files at the same time, so it is time to learn your first powerful tool of development.

Please welcome Visual Studio Code, made by Microsoft. Available on all platforms.

Is notepad not good enough?


No, while it can be used, it doesn’t provide all of the features that makes you efficient. Imagine building a skyscraper with only a hammer, saw and a screwdriver. You need serious tools. It’s time to stop playin’.

Starting work with Visual Studio Code


It’s very simple. Download it, install it and run it. One thing worth mentioning is that during the installation process, make sure to select the following checkboxes:

The first one is, of course, optional. The 2nd and 3rd will allow you to very easily open any folder or file with the right mouse button click, it will look like so:

The 3rd will allow you to automatically open any code-related file with Visual Studio Code instantly. The 4th one, judging by the official documentation, will allow you to launch Visual Studio Code from the CLI, if you do not know what that is, don’t worry. It probably does other things aswell and it doesn’t hurt to add it to PATH, again, if you do not know what that means, don’t worry.

Running Visual Studio Code for the first time


If everything went successfuly then this is what you should see. Let’s break down the layout.

Outlined in green you see the sidebar, this is where you will organize your project, choose files for editing, and much, much more. Currently, the file editing part is the important one.

Outlined in red is the main work area, this is where you will write code. Don’t go too much into detail about what’s in the newest “1.27” update just yet, it will be really confusing for starters. The main thing you should focus on is that there are tabs at the very top, just like you would see in any web browser nowadays. 

Outlined in blue is the bottom bar, you will see information change here as you work on a project, nothing super important when you’re starting out, just so you know there won’t be any important buttons there for now.

So the sidebar and the main work area are the main places you will focus on.

Bring in the code


Let’s take a look what the check boxes we checked during the installation actually do for us. Close the currently open Visual Studio Code window for now. Go anywhere in your computer and create a new folder, name it whatever you want and open it. Then right click anywhere in the folder.

What you see is called the context menu, within it you see “Open with Code”, clicking this will automatically launch Visual Studio Code with this folder that you have just clicked the button in.

You can confirm this by looking in the side bar, you will see the name of the folder, just under the “Open Editors” sub-menu. Open Editors is the same as the tabs that are currently open in the main work area. You can close the “Welcome” tab, so you see the above screen.

Ready to upgrade your coding experience?


Now let’s create our web page again, this time through Visual Studio Code. In the sidebar, right-click and select “New File” as in the image below. 

Then just write “index.html”. The editor automatically sets the extension and after pressing “Enter” you should see this:

Now let’s go back to the previous post and take all of the code we wrote at the end of it. If you’re lazy, don’t worry, I got you, here is the code:

<html>

<div style="margin-left: 25%;">
<div>
<h1>My Blog</h1>
<p>My first blog template, learning how HTML layouts work!</p>
</div>

<div style="width: 40%; display: inline-block;">
<h2>About HTML Blog layout</h2>
<p>September 2, 2018 by Me</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus. Nunc sollicitudin sit amet enim quis tempus. Nunc vitae sapien aliquet, convallis est in, tempor mi. In in risus molestie, consequat sem id, dictum eros. Nullam vestibulum diam vitae libero aliquet, sit amet laoreet magna elementum.

Aliquam a aliquet nunc, a sagittis massa. Vivamus lacinia mattis libero, ut rhoncus lorem lacinia ac. Nullam ullamcorper maximus leo, ut volutpat felis rhoncus nec. Vestibulum gravida leo erat, sit amet tincidunt ante facilisis a. Sed consectetur tellus id tempus posuere. Aliquam sollicitudin quam non erat malesuada mollis. Suspendisse gravida mollis ex eget ornare. Quisque luctus, diam non condimentum vestibulum, ipsum nisi placerat sem, gravida rutrum lorem leo eget leo. Integer id nulla sem.
</p>
</div>

<div style="width: 20%; display: inline-block;">
<h3>About</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.</p>

<h3>Archives</h3>
<ul>
<li>September 2018</li>
<li>August 2018</li>
<li>July 2018</li>
<li>June 2018</li>
<li>May 2018</li>
</ul>
</div>
</div>

</html>

Paste it in, press CTRL + S to save and it should look like this:

What you immediately notice, is that the code get’s colored in different colors, this enhances readability by allowing you to instantly understand what is where.

Let’s do something epic


As you see, all of our code is aligned to the left side. It is readable, but could be much better. Select all of your code and press this combination: CTRL + K and immediately after that CTRL + F and you will see that the code get’s instantly formatted, placing all of the elements that are inside others in a much more recognizable position.

Take note about this set of buttons that are not immediately visible, but when you hover your mouse between the line number and the code itself, little [-] boxes appear.

These boxes, when clicked, will collapse the whole element and hide it’s child elements inside it. This allows you to efficiently control the structure of your elements and to make sure, that no closing tags are forgotten.

Much more manageable and much easier to cut & paste elements to restructure the whole thing. 

There you have it, save your web page and view it in the browser to make sure everything went well and I hope this gave you an insight on how to use this powerful, cross-platform tool brought to you by the wonderful people at Microsoft.


BasicsBlogDevelopmentGetting StartedHTMLKnowledgeLayoutLearnProgrammingStructureVisual Studio Code