Scribd
Upload
19 views

Installing VS Code Mac OS

The document provides instructions for installing Visual Studio Code on Mac OS. It details downloading and unzipping the VS Code app, adding it to the Applications folder, creating a desktop shortcut, and setting up a workspace folder. It also covers installing the 'open in browser' extension and using it to preview a simple HTML file in the browser.

Uploaded by

2230023
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

Installing VS Code Mac OS

The document provides instructions for installing Visual Studio Code on Mac OS. It details downloading and unzipping the VS Code app, adding it to the Applications folder, creating a desktop shortcut, and setting up a workspace folder. It also covers installing the 'open in browser' extension and using it to preview a simple HTML file in the browser.

Uploaded by

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

Installing VS Code

Instructions for the Mac 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 the 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. Visit https://code.visualstudio.com/download
2. Click on the Mac download link. This will take you to a documentation page and also
initiate the download of a .zip file. (for example: VSCode-darwin-stable.zip ) Download
the zip file and find it in your downloads folder.
3. Unzip the file. You do this by double clicking the zipped file. The file Visual Studio
Code.app will automatically be decompressed by Archive Utility into the same
download folder the .zip file is in.
4. Open up the Mac OS Finder. Copy Visual Studio Code.app from its current location to
the Applications folder used by the Mac OS. When you are done, your Applications
folder will look something like this:

5. It will be very convenient to have an alias to VS Code on your desktop. To create one,
click on Visual Studio Code.app and choose File>Make Alias from the Mac OS Finder

1
menu. The “Make Alias” command will create an icon that looks like this:

Click and drag the alias icon on to your desktop.


6. While you are still on your desktop, create a new empty folder there and call it
mis2402workspace for use later on. Notice that mis2402workspace is all one word, no
spaces, no punctuation, and typed with all lower-case letters.
7. Double click on the Visual Studio Code alias. The first time VS Code starts, you may see
a notification like this one.

This is OK. Click Open to continue.

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

2
9. Click “Boost your Productivity” and then choose “Install Git” and “Mark Done”

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

3
Set up your workspace

1. Now, in VS Code, click File > Open Workspace and choose the folder named
mis2402workspace that you previously created on your desktop. Click the Open
button. Then … careful this part is not intuitive! … click the Cancel button.
2. Now click File > Save Workspace As… You should see a dialog box that looks like this:

3. Be sure that the “Where” like reads mis2402workspace as it does in the above picture.
Change the word “Untitled” (highlighted in blue) to be mis2402workspace. Like this:

4. Now click save.


5. Now click File > Open and choose the mis2402workspace folder. Click Open.
6. Now you have VS Code window that looks like this:

4
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 customer 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. The name of the extension is: open in browser (clever name!)

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 “open in browser”

5
4. You want the “open in browser” extension from TechER. Click the blue Install button
next to the “open in browser” Icon.
5. 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

6
7. Now, right click on the index.html file and choose, “Open in default 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