teaching machines

Visual Studio Code Setup

July 17, 2021 by . Filed under public, slai-2021.

This post is part of a course on geometric modeling at the Summer Liberal Arts Institute for Computer Science held at Carleton College in 2021.

There are benefits to working on your local machine. You aren’t impacted by a slow network connection or service hiccups. There are also costs. You are on your own for troubleshooting your machine; your instructor is not going to help with your individual setup. Sharing your project with your instructor is a bit more work. If you willing to accept these costs and use your own computer, follow these instructions to install Visual Studio Code.

  1. Use the file explorer for your operating system to create a new folder that will hold all your code for this course. Name it meaningfully.
  2. Download and install Visual Studio Code. This is not the same program as Visual Studio.
  3. Open Visual Studio Code.
  4. Click File / Open and navigate to the empty course folder your made.
  5. Right-click in the Explorer panel and select New File.
  6. Name the file index.html.
  7. Paste in the following HTML: 
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SLAI 2021: Geometric Modeling</title>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/TrackballControls.js"></script>
  </head>
  <body>
    &#x1F968;
  </body>
</html>
  8. Save the file. You will see the circle in the tab change to an x. The circle means you have unsaved changes. Remember that later when your edits don’t show up in the browser.
  9. Install a plugin so that you can serve out your files to a web browser. Click View / Extensions and search for ritwickdey.liveserver. Select the one match and install it.
  10. Serve out your index.html. Return to the Explorer by way of View / Explorer. Right-click on the file and select Open with Live Server. A page with a pretzel in it should open in your web browser.
  11. Install a plugin so that you can share your project with your instructor. Click View / Extensions and search for ms-vsliveshare.vsliveshare. When you encounter a bug or you want to show off your work with your instructor, click View / Command Palette and enter Live Share: Start Collaboration Session. Paste the link into the chat with your instructor.