Tutorials

Lab1: Tutorials Part 1 – CS181U Spring 2020

We will be using several programming environments and software packages in this class that are likely to be unfamiliar to you. This first lab is a “warmup” in which you will be asked to work through tutorials for the Unix shell (command line) and for visual studio code (vscode), the editor that you will use throughout this course.

There is nothing to submit for this lab, but you should use the lab session to complete as much of the tutorials as you can.

Assumptions

In developing the labs for this course, and this lab in particular, I have made certain assumptions. If these are incorrect, now is a good time to raise the issue so that we, as a class, can discuss them; and I can make adjustments to both the lectures and labs going forward. While I have planned a sequence of labs that I would like to do, I am prepared to adapt the course to the skills and experience of the students and also to your interests.

  1. Most of you have limited or no experience using the Unix (Bash) shell in a terminal window (aka “working at the command line”).
  2. Most of you have not used vscode as a work environment
  3. Some of you have experience using git
  4. Most of you have never programmed in C

I assume that all of you have had at least two CS classes – Introduction to Programming and Data Structures.

Goals for this Lab

The specific goals for this lab are to (begin to) address issues 1 and 2. As part of the next lab you will begin to work with git, and in subsequent lectures and labs I will initiate you in the mysteries of C programming. You will not be writing long or complex programs from scratch in C.

1. The Terminal

On Macs, the terminal window can be opened from the Applications menu in the finder as “/Applications/Utilities/Terminal”. On my personal machine, opening a terminal produces the following window:

The initial message and “prompt” depend upon your environment settings. In this case, my prompt is kinsella:~ geobrown$. In the following, I will use $ to indicate the prompt.

Within the terminal window you can try a few basic commands and you should open a window and follow along !

In the Unix world (as opposed to windows), the locations of files and directories are defined through forward-slash (‘/’)separated names where the root directory is simply ‘/’. When working in a terminal window, all commands that you issue are relative to the “working directory” which can change as you execute commands. In fact, it is easy to get lost !. You can always find the path of the current working directory by executing pwd.

$ pwd

Every user has a “home directory”. You can find out what this is by executing

$ echo $HOME

You can list the files in the current directory

$ ls

To list with the metadata (owner, creation time, permissions)

$ ls -l

To change to another directory (for example, your desktop)

$ cd  ~/Desktop

The syntax ~/ is a shortcut to your home directory, so ~/Desktop is the Desktop directory in your home directory. To return to your home directory, execute either

$ cd ~/

or

$ cd $HOME

You can find out how to use many terminal commands through the man pages. For example, the command to copy files is cp

$ man cp
CP(1)                     BSD General Commands Manual                    CP(1)

NAME
     cp -- copy files

SYNOPSIS
     cp [-R [-H | -L | -P]] [-fi | -n] [-apvX] source_file target_file
     cp [-R [-H | -L | -P]] [-fi | -n] [-apvX] source_file ... target_directory

DESCRIPTION
     In the first synopsis form, the cp utility copies the contents of the source_file to
     the target_file.  In the second synopsis form, the contents of each named source_file
     is copied to the destination target_directory.  The names of the files themselves are
     not changed.  If cp detects an attempt to copy a file to itself, the copy will fail.

     The following options are available:

     -a    Same as -pPR options. Preserves structure and attributes of files but not
           directory structure.
    ...

1.1 Exercise

There are many, many built-in commands that can be used at the command line as well as ways to create new commands by combining existing ones or creating scripts. At best you can get a feel for what is possible in a single session. The following is a good (although perhaps dated) set of tutorials:

http://www.ee.surrey.ac.uk/Teaching/Unix/

which has been slightly modified for OS X as:

https://faculty1.coloradocollege.edu/~sburns/UnixTutorial/index.html

After you’ve learned a small of set of commands, you’ll figure out how to find useful commands when you need them.

2. Visual Studio Code

Visual studio code (vscode for short) is really the “swiss army knife” of code development platforms. It is available for free on all the major platforms (Windows, Linux, OS X) and has a huge number of extensions that greatly simplify the process of creating and debugging code in any programming language. As a long-long time emacs user, I was personally reluctant to use an IDE, but after teaching with it several semesters, I’m convinced that it is worth the investment and that you will find it a valuable tool for all of your classes going forward.

vscode should already be installed on the laboratory machines. You can check by executing

$ code --version

which should print something like

1.39.1
88f15d17dca836346e787762685a40bb5cce75a8
x64

In this case, 1.39.1 was the version installed on my machine when I executed the command.

You may need to “install” code in your PATH.

  • Start Visual Studio Code from the Applications directory

  • Open the Command Palette (F1 or ⇧+⌘+P on Mac) and type shell command to find the Shell Command: Install ‘code’ command in PATH command.

  • Open a new Terminal window for the remainder of your work (your current terminal will not “know” the correct path)

You should create a new directory ~/vscode-tutorial and “cd” to it. Within that directory execute

$ code .

to start the program which will open a window that looks (something) like – you won’t have any files listed under “recent”.

Under “Learn” (lower right) click on the “Interface Overview” which will provide an annotated overlay of the window

The important parts of the interface are pointed out on the arrows. On the left side of the screen are five “modes” that can be activated in a side panel:

The only modes that we will use in the short term are File explorer, Source code management, and Manage extensions. There are key-bindings to enable/disable each of these – but don’t worry about learning them unless you like memorization.

On OS X there is also a conventional menu at the top of the screen which provides many of the basic functions in a more conventional Mac interface.

One feature that is especially useful is the integrated terminal. Although the overlay suggests this can be accessed from the vscode window, on the Mac it’s easier just to use the Terminal menu to create a terminal.

  • Try opening a terminal window in vscode and executing a few commands (e.g. pwd, ls).
  • Once you’ve played with it a bit, close the terminal window X in the top right corner.

The following video goes over this material.

Of course, you can skip the download steps !

2.1 Files and Folders

Our primary use of vscode will be to create and edit files. For many file formats, the editor will assist you by highlighting syntax and offering auto-completion. In more sophisticated uses, the tools provide the ability to find and go to code across multiple files. For now, we’ll just consider the simple case.

On the Mac there are two ways to create a new file – through the File menu or there the File explorer. We’ll try both.

  • From the file menu, create a new file (⌘N) – this will create a new file named Untitled-1. If you save the file from the file menu (or ⌘S), you will get a chance to rename the file – call it test1.md (vscode will treat this as a markdown format file)
  • From the file explorer (if it’s not open, click on the file explorer – the top – icon on the left). If you “hover” the mouse over the directory name in the explorer window, there will appear a set of icons – the left most creates a file. Click on this – a pop-up will provide a place to name the new file. call it test2.md

You can create directories from either the File menu or the file explore in an analogous fashion.

Now that you’ve created an empty file, its time to put something in it ! In the editor window, type the following

# A Markdown Header

1. A list element
2. Another list element

```python
def fun():
   pass
```

Try cutting/pasting this into one of your test files. The provided text is in markdown format – a very nice text-base file format for documentation. vscode provides a built-in preview mode for this. In the upper right of your window are several icons. The left one of these opens a preview of your markdown.

Try it ! You should see something like

If you edit the markdown in test1.md, the preview will follow.

In the next lab you will do a markdown tutorial – you will likely find it a useful format for documentation because gitlab and github support the format directly. https://docs.gitlab.com/ee/user/markdown.html

If you have time, consider doing this brief markdown tutorial – it’ll be very useful in your career as a programmer

https://www.markdowntutorial.com/

2.2 Extensions

While we don’t need any extensions immediately, it’s worth seeing how they are installed. Select the extension icon on the left of your window (see above for the map). From the extensions marketplace, install the microsoft C/C++ extension.

You can find extensions for all the common programming languages. For example, if you are a python programmer, you might want to add a python extension.

2.3 Learning More

As discussed, vscode is a very sophisticated program. Our needs for this class are fairly pedestrian, but you might want to know more about what is possible. The following page provides a number of short videos providing basic introductions to vscode features:

https://code.visualstudio.com/docs/getstarted/introvideos