Intro to the Dev Environment

Learning Objectives

Students will be able to:

Be more productive by using the keyboard vs. the mouse
Use the Terminal Command Line Interface (CLI) to navigate and manipulate the filesystem
Use the VS Code text editor to open and edit files

Using the Terminal
Command Line Interface

What is Terminal?

Terminal is the developers' choice for entering commands and navigating the filesystem
Terminal is also known as a shell. The default shell in Mac OS X is Bash. You will find the terms terminal and bash often used interchangeably
Go ahead and open Terminal (remember - use Spotlight!)

Command Line Basics

Here are the basic command tasks we'll try out:

Change directories (folders)
List a directory's contents
Create a directory
Create a file
Move files and directories
Copy files and directories
Rename files and directories
Delete files & directories
Command history & clearing the window

Change Directories

We use the cd command to change directories
Let's change to the home directory of the logged in user:
```
$ cd ~
```
Here are a few common shortcut characters used when navigating the filesystem:
- ~ The logged in user's home directory
- / The root (top-level) directory on the hard drive
- . The current directory
- .. The parent directory of the current directory
The pwd command "prints" the current (working) directory

List a Directory's Contents

Use the ls command to display a concise list
ls does not display hidden files by default, adding the -a option will show them
tree is a nice utility for displaying a graphical representation of a directory and its nested directories.
Install it by typing brew install tree

Create a Directory

Use the mkdir command to create directories
Let's create a drawers directory inside of the home directory:
```
$ mkdir ~/drawers
```
Note that you don't have to specify the full path if we are already in the home directory

Using Tab Auto-Completion

Change to the home directory
Now let's change to our newly created drawers directory, however, only type cd d,
then press tab which will auto-complete directory name(s)
You can cycle between matching directory names by continuing to press tab

Creating Files

We use the touch command to create empty files
Let's move to the drawers directory and create a directory named socks. Here is how we can create the directory and change to it using a single command:
```
$ mkdir socks && cd socks
```
Now let's create a dress.socks file:
```
$ touch dress.socks
```

Practice Creating Directories and Files

Create this directory: ~/drawers/pjs
Create two files in the new pjs folder named warm.pjs and favorite.socks

Moving Files

Okay, so we have a messy drawers/pjs, let's move our favorite.socks file out of the pjs folder and into the drawers/socks folder where it belongs!
Here's how we can do the move regardless of which directory we're currently in by using absolute paths:
```
$ mv ~/drawers/pjs/favorite.socks ~/drawers/socks/
```
Be sure to use tab-completion!

Note that you have the option to use absolute and/or relative paths.

Moving Directories

Moving directories is just as easy using the same mv command
Try it out:
1. Create a ~/shorts directory
2. Move the newly created shorts directory into the drawers directory

Renaming Files

Guess what - there's no dedicated bash command to rename files and directories!
Don't panic! The mv command is very flexible!
Here's how we can rename the warm.pjs file to summer.pjs from anywhere:
```
$ mv ~/drawers/pjs/warm.pjs ~/drawers/pjs/summer.pjs
```
Of course, you can actually move and rename simultaneously!

Deleting Files

We use the rm command to delete both files and directories
Let's first use it to delete the dress.socks file. Here's one way:
```
$ cd ~/drawers/socks && rm dress.socks
```
Using the * wildcard character, it's possible to delete and move multiple files. For example, typing *.socks would match all files with an extension of .socks...

Deleting Directories

Deleting directories is almost the same as deleting files except you must use the -r option, which runs the rm command "recursively" to delete a directory and it's contents.
To delete the pjs folder we could use this command:
```
$ rm -r ~/drawers/pjs
```

Moving Multiple Files

To demonstrate moving multiple files, re-create the dress.socks file we just deleted from the socks directory
Now let's move all of the .socks files out of the socks folder into our home folder. The following command assumes we're inside the socks folder:
```
$ mv *.socks ~
```
Now, without changing directories, return the socks files back to where they belong

Copying Files & Directories

Use the cp command to copy files and directories
Here's how we can copy all .js files:
```
$ cp *.js ~/dest-folder
```
And entire directories by adding the -R option:
```
$ cp -R ./sample-code ~/dest-folder
```

Command History & Clearing the Window

Pressing the up and down arrows in Terminal will cycle through previously entered commands. This can be a huge time saver!
If you'd like to clear the Terminal window, simply press cmd+k

Using VS Code to Open and Edit Files

What is VS Code?

VS Code is a popular open-source text-editor maintained by Microsoft
It's very customizable and capable
VS Code's functionality can be extended using extensions, however, most useful features are built-in
To try it out, let's use VS Code to open and edit a file...

Add VS Code to `$PATH`

We want to be able to type in code . in Terminal and have VS Code open the current directory for editing
First, open VS Code's Command Palette by pressing ⇧⌘P
Next, type "shell command" and select the Shell Command: Install 'code' command in PATH command
Restart Terminal for the new $PATH to take effect

For the above to work, VS Code must be installed in the Applications folder

Going Forward

Today, we have only scratched the surface of tools such as Terminal and VS Code
Rest assured that throughout your time in SEIR, we will help you to get to know these tools much better!