Comp 110 Software Setup

Required Software Tools

Select the kind of laptop you have from the two options below and follow those instructions first for installing the required software for COMP110.

Windows

Apple Mac OSX

COMP110 Project Setup

Please complete these instructions once you have the required tools above installed:

1. Open Visual Studio Code (Later referred to as VSCode)

2. Under the "Start" Heading, select "Clone Git repository..."

3. Copy and paste the following URL into the bar that pops up: https://github.com/comp110/comp110-17f.git

4. Press Enter Twice. Select "Open Repository" once the option arises.

5. Open the "View" menu and select "Integrated Terminal". Type the following command then press enter and wait for the install to complete:

npm install

We'll learn more about what npm is later in the semester! (You will likely see some warnings, this is expected and you can safely ignore them.)

6. Open the "View" menu and select "Extensions". Search for the extension named "TSLint". Select it and press the install button for it. Then press the Reload button.

COMP110 Hello, World App

Phew! Ready to write some code? After you've completed the above, try the following:

1. Still have the terminal showing from step 5 above? Great! In it, type the following and press enter: 

npm start

This may take a few seconds but should eventually lead to your web browser opening to your project's runtime work space. Let's add a playground folder where you can start adding mini-apps of your own.

2. In VSCode, select the "View" menu and choose "Explorer". You'll notice a folder named "src". This is an old convention that stands for "Source Code" and is where your project code lives.

3. Try right-clicking (or two-finger clicking on Mac laptops) on the "src" folder. Select the "New Folder" option and give it the name "playground".

4. In the web browser, refresh the page with your work space in it. You should see the Playground option appear. Click the Playground and you'll see a message about there being no "app" files in this folder. Let's setup our first app!

5. In VSCode, right click on the playground folder you just created and select "New File". Name it "hello-app.ts".

6. In the web browser, refresh the Playground page. You should see the "Hello" app appear. Click it! You should be greeted with a plain-white background. We're ready to write some code!

7. In VSCode, in the hello-app.ts file you just created, enter the following code. You will type this in the code editor which is above the console.:

import "introcs";
print("hello, world");

Save this file either by going to the "File" menu and selecting "Save", or, preferably because you're going to be doing this a lot this semester, just pressing the shortcut Control+s (Windows) or Command+s (Mac).

8. In the web browser, after saving the file above, you should see the words "hello, world" appear. Congratulations, you've written your first TypeScript program!

9. To shut down the Workspace when you are done tinkering, and this is a good stopping point if it is your first time programming, in your web browser press the grayed out "Close" button in the top right corner of the page. Great work! You're ready for COMP110!