CSCI 338: Fall 2025

Software Engineering

CSCI 338: Fall 2025

Assignments > Lab 1: Code Editors

Due on Wed, 08/27 @ 11:59PM. 6 Points.

Introduction

Welcome to your first CSCI 338 lab! The goal of today’s lab is to get you a little more comfortable doing “configuration things,” including working on the command line, configuring your command line environment, and working with command line code editors. You will complete the following tasks:

  1. Set-Up
  2. VS Code Exercises
  3. Command Line Exercises
  4. OS Environment Exercises
  5. Vim / Emacs Exercises

I have curated a list of useful resources on the course resources page. Please see the “Command Line” and “Code Editors” sections:

Part 1. Set-Up

  1. Install VS Code if it isn’t already installed on your machine.
  2. If you are a Windows user, follow these instructions to install WSL and a Linux distribution (Windows Subsystem for Linux). Once you’re done, verify your installation by opening a WSL terminal and typing pwd.
    • Note: please read / watch the instructions for WSL carefully. If you skip steps, you will likely have to rebuild / reinstall your Linux distro, so going slower will save you time in the long run.
  3. Create a directory called csci338
    • If you are a windows user, you will create that directory within your home directory within your WSL instance. (e.g., /Users/your_username). Important: Your WSL home directory is in a totally different place than your home directory on your host machine. To find it:
      • Activate WSL on your command line
      • Navigate to your Linux home directory by typing cd (which will automatically take you to your home directory on Linux), and
      • Type pwd to see where your home directory is. You will create your csci338 directory here.
    • If you are a Mac user, you can create your csci338 directory anywhere except for in your Downloads directory.

Part 2. VS Code Exercises

2.1. Install VS Code and Extensions

Please install the following VS Code Extensions:

To install VS Code Extensions:

2.2. Configuration Tasks

Configuring Prettier

Configure “Format on Save” using Prettier by modifying settings.json file (a configuration file used to customize your VS Code Editor). To find settings.json, type Shift + CMD + P (MacOS) or Shift + CTRL + P (Windows) and then type settings.json in the search textbox that appears. Then, add the following code to settings.json within the curly braces. Note that in JSON, each key-value pair must be separated by a comma or else there will be syntax errors:

"editor.formatOnSave": true,
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

You can read more about configuring “Format on Save” using Prettier here.

When you’re done, test that the “format on save” functionality works by creating a test.js JavaScript file with following code:

function foo(a, b) {const c=a+b; const d = c**2; return c+d;}

When you save the file, it should be autoformatted as follows:

function foo(a, b) {
    const c = a + b;
    const d = c ** 2;
    return c + d;
}

Before Moving On, Verify that VS Code autoformats when you save.

Part 3. Complete the Command Line Exercises

Please complete the following command line exercises with the help of the Command Line Reference that has been compiled for you. Feel free to collaborate with your classmates!

3.1 Open a Terminal

3.2. Navigation

  1. Figure out which directory you’re in (use pwd)
    • Windows users: if you type explorer.exe from within WSL, it should open a Windows Explorer window to show you where your WSL files are located.
  2. Navigate to the folder where you plan to save your coursework (use cd).
    Pro-tips:
    • If any of your folder names have spaces, you’ll have to surround the path with quotes
    • Use the tab key to autocomplete the path
    • Use the up and down keys to revive old commands
    • Use the history command to see the commands you’ve issued in the past

3.3. Create

  1. Navigate to the csci338 you made in Part 1 on the Terminal.
  2. Create a directory called lab01 within csci338 (use mkdir)
  3. Navigate into the lab01 directory you just made.
  4. Create a new file called index.html (use touch)
  5. Create another new file called style.css (use touch)
  6. Copy the Google homepage locally as follows: curl https://www.google.com > google-home.html

If you did everything correctly, you should have a directory structure that looks like this:

csci338
    ├── google-home.html
    ├── index.html
    └── style.css

3.4. List

  1. Verify that the two new files exist in your current directory (use ls)
  2. List all of the files and folders in your home (use ls ~)
  3. List all of the files and folders on your home directory including hidden files (use ls -la)
  4. List all of the files and folders in your home recursively, Try:
    • tree ~ -La 1
    • tree ~ -La 2
    • tree ~

    If tree is not installed, see if you can figure out how to install it. On WSL:

     sudo apt-get update
 sudo apt-get install tree

    On Mac:

     brew install tree

3.5. Read

  1. Read the contents of the google-home.html file you just created (use cat)
  2. Inspect the file using some of the other read commands (e.g., less, head, tail, open wc).
    • Pro-tip: For less, head, and tail, use the space bar to scroll down, and “q” to quit

3.6. Write

  1. Append the sentence “Hello World” to the contents of the index.html file (echo "Hello World" >> index.html).
  2. Do it again.
  3. Read the contents of index.html (use cat)
  4. Now replace the contents of index.html with “Goodbye” (echo "Goodbye" > index.html)
  5. Read the contents of index.html (use cat)
  6. You can also use the >> and > operators to direct the output of the terminal to a non-existant file: echo 'Yo yo' > new.txt
  7. Read ‘new.txt’ (use cat)
  8. Now remove it (rm new.txt)
  9. Make sure you understand the difference between >> and >?

3.7. Move & Copy

  1. Copy a directory and all subdirectories (try: cp -r my_folder copy_of_my_folder)
  2. Copy a file (try: cp foo.txt bar.txt)
  3. Rename a file (try: mv bar.txt bar1.txt)
  4. Move a file to a parent directory (try mv bar.txt ../.)

Use grep to search for files for strings / text…

  1. To find the word “Goodbye” in your current directory or any descendents (try: grep "Goodbye" ./ -r)
  2. To find the word “goodbye” – case insensitive – in your current directory or any descendents (try: grep "goodbye" ./ -ri)
  3. To find the word “goodbye” – case insensitive – anywhere in your home directory or its descendents (try: grep "goodbye" ~ -ri)

3.9. Make a bash script

You can also combine multiple commands into a bash script (use the .sh extension). Let’s make a bash script that sets up a basic web app in your current directory. Try the following:

#!/bin/bash

# Prompt the user for the folder name
read -p "Enter the folder name: " DIR_NAME

# 1. Create a new directory if it doesn't already exist
if [ -d "$DIR_NAME" ]; then
    echo "Directory '$DIR_NAME' already exists. Exiting."
    exit 1
else
    mkdir "$DIR_NAME"
    echo "Directory '$DIR_NAME' created."
fi

# 2. Navigate into it
cd "$DIR_NAME" || { echo "Failed to navigate into $DIR_NAME. Exiting."; exit 1; }

# 3. Create a new starter index.html file
echo '''
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css" />
    <title>Hello World</title>
</head>

<body>
    <h1>Hello World</h1>
    <p>Your starter file.</p>
</body>

</html>
''' > index.html
echo "index.html created."

# 4. Create a new starter styles.css file
echo '''
body * {
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
}
''' > styles.css

echo "styles.css created."

# 5. Navigate back to the original directory
cd ..

# 6. Optional: Open the index.html file in a web browser
#    Try one of these commands:

# wslview "$DIR_NAME/index.html"   # WSL
# open "$DIR_NAME/index.html"  # macOS

When you’re done, execute the script as follows:

bash ./start-web-prj.sh

Take a look at the new src folder (and nested files) that were created by typing: tree .

Now, open the HTML file you just made in a new browser by typing one of the following commands from the command line:

And finally, open the folder you just made in VS Code:

code .

If that didn’t work and you’re on a Mac, see this Stack Overflow post.

Before Moving On, Verify That…

  • You have practiced working with the following commands:
    • cat (read)
    • cd (change directories)
    • tree (list files and subdirectories)
    • touch (create new empty file)
    • ls (list files)
    • rm (delete a file)
    • mv (rename a file)
    • cp (copy a file)
    • history (view recent bash commands)
    • >> (append operator)
    • > (overwrite operator)
    • grep (search)
    • running a bash script: bash ./start-web-prj.sh
  • You can open VS Code from the command line
  • Your file structure looks like the file structure below:
csci338
└── lab01
    ├── google-home.html
    ├── index.html
    ├── my_new_folder
    │   ├── index.html
    │   └── style.css
    ├── start-web-prj.sh
    └── style.css

Part 4. OS Environment Exercises

In Linux-style operating systems, you can create shortcuts, aliases, and customizations by editing your .zshrc file in your home directory. From your command line, please navigate to your home directory and try making an alias to your csci338 directory:

Before moving on, verify that when you type 338 on the command line, it automatically jumps you to the csci338 directory

Part 5. Vim / Emacs Exercises

Using either vim or emacs:

  1. Open a file from the command line
  2. Edit it
  3. Save it
  4. Exit the editor

What do I turn in?

Under Lab 1, paste a dump of all of the relevant command line history commands that you used today (type history on the command line, copy it, and paste it into the Moodle).

What to study / have done after completing this lab…