Assignments > Lab 1: Code Editors

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
6. Java Readiness Check

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

When a step has Mac and Windows labels, use the line for your OS and skip the other. Shared steps have no OS label.

• Windows every terminal step in this lab is in WSL, not PowerShell. Your home folder is ~ (something like /home/yourname). That is not the same as C:\Users\....
• Mac use the Terminal app. Your home folder is also ~.

1. Set-Up

1. Install VS Code if it isn’t already installed on your machine.
2. Windows follow these instructions to install WSL and a Linux distribution (Windows Subsystem for Linux). Read / watch them carefully — if you skip steps, you will likely have to rebuild your Linux distro. When you’re done, open a WSL terminal and type pwd. You should see a path like /home/yourname.
3. Create a directory called csci338 in your home folder (cd then mkdir csci338).
   • Mac you can put csci338 somewhere else if you want, but not in Downloads.

2. VS Code Exercises

2.1. Install VS Code Extensions

Please install the following VS Code Extensions:

• Live Server (by Ritwick Dey)
• Prettier (by Prettier; should have the blue “verified” badge)
• Prettier ESLint (by Rebecca Vest)

To install VS Code Extensions:

• From within VS Code, open the extensions window by clicking the extensions icon (looks like 4 squares on the left-hand bar).
• Search for the extension name using the search textbox.
• When you find the extension, install it.

2.2. Configuration Tasks

Configuring Prettier

Configure “Format on Save” using Prettier by modifying the settings.json file (a configuration file used to customize your VS Code Editor). To find settings.json, type Mac Shift + CMD + P or Windows Shift + CTRL + P 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 the 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;
}

Optional: turn off editor AI

VS Code often pops up Copilot, Codex, Claude, and similar tools. That is noisy, and it is not allowed during Programming Readiness Verification.

If you want them off in every folder, follow Turn Off Editor AI. Download toggle-editor-ai.py, then:

python3 toggle-editor-ai.py off

Then Command Palette → Developer: Reload Window. Run the same script with on when you want AI back.

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

• Mac open the Terminal app
• Windows open WSL

3.2. Navigation

1. Figure out which directory you’re in (pwd).
   • Windows explorer.exe . from WSL opens File Explorer at your current WSL folder.
2. Navigate to the folder where you plan to save your coursework (cd). Pro-tips:
   • If any of your folder names have spaces, 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 directory you made in Part 1.
2. Create a directory called lab01 within csci338 (mkdir).
3. Navigate into the lab01 directory you just made.
4. Create a new file called index.html (touch).
5. Create another new file called style.css (touch).
6. Copy the Google homepage locally: curl https://www.google.com > google-home.html

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

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

3.4. List

1. Verify that the new files exist in your current directory (ls).

2. List all of the files and folders in your home (ls ~).

3. List all of the files and folders in your home directory including hidden files (ls -la ~).

4. List files recursively with tree. If tree is not installed:

   • Windows sudo apt-get update then sudo apt-get install tree
   • Mac brew install tree

   Then try:

   • tree ~ -La 1
   • tree ~ -La 2

   tree ~ with no -L can print a huge list; skip it if it is slow.

3.5. Read

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

3.6. Write

1. Append the sentence “Hello World” to index.html: echo "Hello World" >> index.html
2. Do it again.
3. Read the contents of index.html (cat). You should see “Hello World” twice.
4. Now replace the contents of index.html with “Goodbye”: echo "Goodbye" > index.html
5. Read the contents of index.html (cat). You should see only “Goodbye”.
6. You can also use >> and > to write to a new file: echo 'Yo yo' > new.txt
7. Read new.txt (cat).
8. Now remove it (rm new.txt).
9. Notice the difference: >> appends; > overwrites.

3.7. Move & Copy

From lab01, practice on files you just create:

1. touch notes.txt
2. mkdir practice_folder
3. touch practice_folder/inside.txt
4. Copy a file: cp notes.txt notes-copy.txt
5. Rename a file: mv notes-copy.txt notes-renamed.txt
6. Copy a directory and all subdirectories: cp -r practice_folder practice_folder_copy
7. Move a file into a folder: mv notes-renamed.txt practice_folder/

3.8. Search

Use grep to search files for strings / text.

1. Find the word “Goodbye” in your current directory or any descendants: grep "Goodbye" ./ -r
2. Same search, case insensitive: grep "goodbye" ./ -ri
3. Same search anywhere in your home directory: 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.

• Create a script called start-web-prj.sh
• Add the following lines of code to the script:

#!/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 ..

When you’re done, execute the script from lab01:

bash ./start-web-prj.sh

When it asks for a folder name, type my_new_folder and press Enter.

Take a look at what was created: tree .

Now open the HTML file in a browser:

• Mac open my_new_folder/index.html
• Windows wslview my_new_folder/index.html
• Linux: xdg-open my_new_folder/index.html

And finally, open the current folder in VS Code:

code .

• Mac if that didn’t work, see this Stack Overflow post (Command Palette → Shell Command: Install ‘code’ command in PATH).

csci338
└── lab01
    ├── google-home.html
    ├── index.html
    ├── my_new_folder
    │   ├── index.html
    │   └── styles.css
    ├── start-web-prj.sh
    └── style.css

4. OS Environment Exercises

In Linux-style operating systems, you can create shortcuts, aliases, and customizations by editing your shell config file. We’ll make an alias so that typing 338 takes you to your csci338 directory.

1. Print the path you want the alias to open (cd ~/csci338 then pwd) and copy it.
2. See which shell you use: echo $SHELL
   • zsh (usual on Mac): you will edit ~/.zshrc
   • bash (usual on WSL): you will edit ~/.bashrc
3. Open that file and add one line at the bottom, using your path from step 1:

alias 338='cd /paste/your/path/here'

1. Save the file, then reload it: source ~/.zshrc or source ~/.bashrc (whichever you edited).
2. Test: cd ~ then 338 then pwd. You should be in csci338.

More about these files: The Significance of .bashrc or .zshrc.

5. Vim / Emacs Exercises

Using either vim or emacs, open a file from the command line, edit it, save it, and exit.

Vim (from lab01):

vim notes.txt

1. Press i (insert mode)
2. Type a short sentence
3. Press Esc
4. Type :wq and press Enter (write and quit)

Then cat notes.txt to confirm your sentence is there.

6. Configure Java in VS Code

We will be practicing programming in this class in multiple languages, including in Java. In this section, you’re going to ensure that you can compile your Java code from the command line.

1. From the command line, check for the Java compiler: javac --version
2. If javac is not installed, expand the instructions for your OS below, follow them, then reopen your terminal and re-run javac --version to confirm.

sudo apt update
sudo apt install default-jdk

/usr/libexec/java_home -V

Once you’ve verified that the Java runtime environment has been installed and configured (javac --version gives you a message and not an error) create a ReadinessCheck.java file inside of your lab01 folder, and paste in the following code:

public class ReadinessCheck {
    public static void main(String[] args) {
        System.out.println("Java is ready");
    }
}

Then, compile and run this file (be sure to run these commands from the same directory your file’s in):

# compile your Java program:
javac ReadinessCheck.java

# run the resulting bytecode (*.class file) via the JVM runtime:
java ReadinessCheck

What do I turn in?

Under Lab 1 on Moodle, paste the command line history from today’s lab (history). If the dump is huge, the last ~80–100 lines that include this lab is enough.

What to study / have done after completing this lab…

1. If you are a Windows user, make sure your WSL is installed and configured
2. Make sure your VS Code editor is set up. If Copilot or other AI tools keep popping up, turn them off.
3. Make sure you know some basic shell commands, and specifically how to navigate, search, create, delete, copy, read, and move files.
4. Practice your shell commands by taking the quiz at the bottom of this page and reviewing these sample command line quiz questions.
5. Make sure you know how to open, edit, save, and exit either vim or emacs.