Scribd
Upload
0 views

Installing-VS-Code-Windows

This document provides step-by-step instructions for installing Visual Studio Code (VS Code) on Windows, including creating a workspace and adding necessary extensions for a course. It details the installation process, setting up a workspace folder, and installing the Live HTML Previewer extension. Finally, it guides users on creating and testing an HTML file within the VS Code environment.

Uploaded by

Jhenkar Cm0316
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

Installing-VS-Code-Windows

This document provides step-by-step instructions for installing Visual Studio Code (VS Code) on Windows, including creating a workspace and adding necessary extensions for a course. It details the installation process, setting up a workspace folder, and installing the Live HTML Previewer extension. Finally, it guides users on creating and testing an HTML file within the VS Code environment.

Uploaded by

Jhenkar Cm0316
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Installing VS Code

Instructions for the Window OS.

VS Code is a free text editor created by Microsoft. It is a lightweight version of their


commercial product, Visual Studio. It runs on Microsoft Windows, Mac OS, and Linux
platforms. It is a good editor for JavaScript, HTML and CSS. It also supports a large number of
extensions that allow the VS Code editor to be adapted to many purposes.

In this document, you will download and install VS Code, add to it the extensions used in
MIS2402, and perform a test to ensure that both your VS code installation is working properly.

Installation
1. Before you begin, open up Windows File Explorer by right clicking on the Windows icon
and choosing File Explorer. Create a new folder on drive c:. The new folder should be
named mis2402workspace and be found at c:\mis2402workspace
You will need this folder later on.
2. Visit https://code.visualstudio.com/download
3. Click on the Windows download link. This will take you to a documentation page and
also initiate the download of an .exe file. (for example: VSCodeSetup-x64-1.25.1.exe)
Download the exe file and find it in your downloads folder.
4. Run the exe. Step through the installation wizard as indicated below.

Click Next

1
Accept the license
agreement.

Use the default


installation folder. Click
Next.

Click Next

2
Creating a desktop shortcut is
recommended. You will use VS
Code a lot in this course, and
you want it to be easy to find.
Check the boxes as shown.
Click Next

Click Install.

Click Finish.

5. VS Code will start, and you will see a screen similar to the following:

3
6. Note that when VS Code starts, you may see a notice like this:

If you see this, click the JavaScript link and install support for JavaScript. When you do
this, you will be prompted to reload the window after JavaScript support is installed.
This is expected. Click OK to reload the window after JavaScript is installed.
You do not need to install support for any other language.
7. Note that when VS Code starts, you might see a notice like this:

You don’t really need Git for this course, but it is a good thing to have installed. Click
the Download Git link. The download page will open up when you do this. There you
will find a big download icon that looks like this:

4
Download and install the latest source release (whatever it is) and install it. You will
need to quit VS Code and reopen VS code when the Git installation is complete.

Congratulations. VS Code is installed! Keep going. You have more to do.

Set up your workspace

1. Now, in VS Code, click File > Add Folder to Workspace and choose the folder named
mis2402workspace that you previously created.

2. Make sure that you are in the mis2402workspace folder as shown above. Click Add
3. Now in VS Code click File > Save Workspace As…
4. Change the folder from C:\ to C:\mis2402workspace
5. Type mis2402workspace as the file name. Make sure the window appears as it does
below. Click Save.

5
6. Now you have VS Code window that looks like this:

6
Congratulations! You just set up a VS Code workspace! Now… you might ask yourself here, just
what is a workspace, anyway? Well… the answer is simple. A workspace is a space… for your
work. 

In a real work environment, you might set up separate workspaces, one for each project, or
perhaps one for each major customer or system that you are working with. In MIS2402, all our
course work is going to be done in one big workspace.

Technically speaking, the workspace is composed of two things - a folder (the folder you
created was mis2402workspace) and a configuration file that holds all your VS Code
preferences and settings that accompany that folder. (The file you made was named
mis2402workspace.code-workspace.) Those two things together make up the workspace. So,
don’t delete either one!

Add your extensions


As previously stated, one of the things that makes VS Code such a versatile editor is the number
of extensions that have been created for it. For MIS2402, we will want to add one of those
extensions: Live HTML Previewer.

1. You need have an internet connection to install an extension.

2. In VS Code, click on the extensions icon. It looks like this:

3. In the “Search Extensions in Marketplace” box, type “HTML Live Previewer”


4. Click the green Install button next to the HTML Live Previewer Icon. Wait a moment,
and click the blue Reload button when it appears.
5. You should now see HTML Live Previewer in the list of installed extensions. Like this:

7
6. Click the VS Code Explorer icon to go back to your workspace.
Congratulations. You installed a VS Code Extension.
Give it a try
Now let’s try out VS Code.
1. Click on the new folder icon in the MIS2402WORKSPACE.

2. Type in a folder name… let’s call it mytestfolder.


3. With mytestfolder selected, click on the new file icon.

4. Name the new file index.html (this might seem like an odd name to you, but rest
assured that this is a perfectly reasonable choice.)
5. Now, in the right-hand panel, type in some text. For example, you could type:
hello world

6. Click File and Save

8
7. Now, right click on the index.html file and choose, “Open in browser”

8. The text you wrote should now appear in a browser window.

That’s it! You can now edit an html file and preview it in a browser.
You can close out of VS Code now.

You might also like