Assignments > Lab 1: Code Editors

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.

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.

• Mac open the Terminal app
• Windows open WSL

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

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

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.

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.

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.

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/

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

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. Then, 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

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.