Assignments > Lab 1: Code Editors

Due on Thu, 08/24 @ 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. VS Code Exercises
2. Command Line Exercises
3. OS Environment Exercises
4. Vim / Emacs Exercises

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

1. VS Code Exercises

1.1. Installation

Please install VS Code. When you’re done, 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)
• Remote - SSH (by Microsoft)

To install VS Code Extensions:

• Open the extensions window by either clicking the extensions icon (looks like 4 squares on the gray, left-hand bar) or use the keyboard shortcut (Shift+Cmd+X or Shift+Ctrl+X).
• Search for the extension name using the search textbox.

1.2. Configuration Tasks

Configuring Prettier

Configure “Format on Save” using Prettier by modifying settings.json file (CTRL+, or CMD+,).

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

1
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:

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

Configuring SSH

1. If you haven’t already, register for a CSCI account here: https://canton.cs.unca.edu/register. This will allow you to set (or reset) your password. Your username is the same as your email address (without the @unca.edu).
2. Verify that you can ssh into arden as follows:
   • Open the command line / terminal
   • Type: ssh your_username@arden.cs.unca.edu
   • Enter your password when prompted
   • type ls -la at the command prompt (this should be your home directory)
3. Make a remote connection via VS code:
   • Click the green icon in the lower left-hand corner of VS Code
   • Click “connect to host”
   • Enter your credentials (your_username@arden.cs.unca.edu)
   • Enter your password when prompted
   • Open your home directory
4. Make the simplest homepage imaginable:
   • Create a file called index.html inside of your public_html folder.
   • Edit the file (e.g., add “hello world”)
   • Save it
   • Look at it on http://cs.unca.edu/~your_username (e.g., http://cs.unca.edu/~svanwart)
     • Note that the SSL certificate needs to be updated…will send a message to Dr. Bogert :)

2. Complete the Command Line Exercises

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

2.1. Navigation

1. Figure out which directory you’re in (use pwd)
2. Navigate to the folder where you usually 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

2.2. Create

1. Create a directory called csci338 (use mkdir)
2. Navigate into csci338
3. Create a new file called index.html (use touch)
4. Create another new file called style.css (use touch)
5. Copy the Google homepage locally as follows: curl https://www.google.com > google-home.html

2.3. 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 Desktop (use ls ~/Desktop)
3. List all of the files and folders on your Desktop including hidden files (use ls ~/Desktop -la)
4. List all of the files and folders in your Desktop recursively, Try:
   • tree ~/Desktop -La 1
   • tree ~/Desktop -La 2
   • tree ~/Desktop

2.4. 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

2.5. 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 >?

2.6. 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 ../.)

2.7. Search

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 on your Desktop or any descendents (try: grep "goodbye" ~/Desktop -ri)

2.8. 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:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
# 1. Create a new directory called "src"
mkdir src

# 2. Navigate into it:
cd src

# 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="style.css" />
    <title>Hello World</title>
</head>

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

</html>
''' > index.html

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

# 5. Navigate to original directory:
cd ..

# # 6. Open the index.html file in a web browser:
# open src/index.html

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 .

3. OS Environment Exercises

Semmy will walk you through some .dot file configuration tasks. Here is a sample dotfile repo. Afterwards, try making a few adjustments to your .zshrc file on your own. Some suggestions:

• Create an alias to your csci338 directory in your .zshrc file so that when you type: 338 on the command line, it automatically puts you into the csci338 directory.
• Extend the size of your history file
• Add a new executable to your system path (e.g., node)

4. Vim / Emacs Exercises

Using either vim or emacs:

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

What do I turn in?

Nothing to turn in this week! Your lab grade will be based on participation. Some thoughts on how you should be thinking about this lab:

• Make sure you know some basic shell commands, and specifically how to navigate, search, create, delete, copy, read, and move files.
• Make sure you can ssh into another server.
• Make sure your VS code editor is set up.
• Make sure you know how to open, edit, save, and exit either vim or emacs.