Running Commands in the Integrated Terminal

Introduction

In our last lesson, you successfully installed Node.js and npm, completing the foundational setup of your development environment. You've already had a brief interaction with the command line by running node -v and npm -v to verify the installation. Today, we're going to build on that experience and learn how to use the integrated terminal as a primary tool for navigating and managing your projects.

This lesson addresses the learning outcome: Use the integrated terminal within your code editor to run basic command-line operations. While you're likely accustomed to managing files and folders through a graphical user interface (GUI) like Windows Explorer or macOS Finder, software developers rely heavily on the command line for its speed, power, and scriptability. Mastering a few basic commands is a crucial step toward an efficient, professional workflow.

By the end of this session, you'll be able to create directories, navigate the file system, and manage files—all from within your code editor. This will set the stage perfectly for our next lesson, where we'll start writing our first program.

The Integrated Terminal: Your Command Center

Your code editor, whether VS Code or Cursor, includes a fully-featured integrated terminal. This is a command-line interface (CLI) built directly into the editor, allowing you to run commands without switching windows. The commands you type are interpreted by a program called a shell. Common shells include Bash and Zsh on macOS/Linux, and PowerShell or Command Prompt on Windows.

Let's begin by opening the terminal.

1. In your code editor, go to the top menu and select View > Terminal.
2. Alternatively, use the keyboard shortcut: Ctrl+` (the backtick key, often found below the Esc key).

For a quick visual overview of the terminal interface in VS Code, the following video is helpful.

Core Navigation Commands

The first and most common use for the terminal is navigating your computer's file system. Let's practice the three most fundamental commands: pwd, ls, and cd.

This comprehensive video from Traversy Media covers these commands and more. We'll watch it in segments as we introduce each concept.

Now, let's learn the commands for navigation.

1. pwd (Print Working Directory): This command tells you where you are. It's like the "You are here" marker on a map. Type pwd and press Enter. It will print the full path to your current folder.

2. ls (List): This command lists the contents (files and folders) of your current directory. Type ls and press Enter.

3. cd (Change Directory): This is how you move around. To move into a directory you see in the ls output, you type cd <directory_name>. To move back up to the parent directory, you use cd ...

The following clip demonstrates these exact commands.

File and Directory Management

Now that you can navigate, let's create a dedicated space for our projects.

1. mkdir (Make Directory): This command creates a new folder. Let's make a folder for your first project.

   mkdir my-first-app
   

2. Now, navigate into your new directory:

   cd my-first-app
   

   You can confirm you're in the right place by running pwd.

3. touch (Create File): This command creates a new, empty file. Let's create the JavaScript file we'll use in the next lesson.

   touch index.js
   

   Note: On some Windows configurations (like standard Command Prompt), touch may not be available. A universal alternative is echo. > index.js.

4. rm (Remove): This command deletes files and directories. Use this with caution! Deletions via the command line are often permanent and don't go to a Recycle Bin.

   • To remove a file: rm index.js
   • To remove an empty directory, you'd first navigate out of it (cd ..) and then run rmdir my-first-app.
   • To remove a directory and everything inside it, you use rm -r my-first-app. The -r flag stands for "recursive".

Let's watch a demonstration of these file and directory commands.

For a more detailed, text-based explanation of navigation and file management, the following article is an excellent resource.

Essential Quality-of-Life Tips

A few simple tricks can make your terminal experience much faster and cleaner.

• Tab Autocompletion: When typing a command or file/directory name, press the Tab key. The shell will attempt to complete it for you. If there are multiple possibilities, it will often show you a list. This is perhaps the single most important habit for efficient terminal use.
• Command History: Use the Up Arrow and Down Arrow keys to cycle through your previously executed commands.
• Clear the Screen: If your terminal gets cluttered, type clear or use the shortcut Ctrl+L to get a fresh screen.
• Stop a Command: Some commands run continuously (like a development server). To stop them, press Ctrl+C.

These essential shortcuts are covered well in this short video clip.

Conclusion

You've taken a significant step today. By learning to navigate your file system and manage files from the command line, you're adopting a core practice of modern software development.

Here are the key takeaways and commands from this lesson:

• The integrated terminal allows you to run commands directly within your code editor.
• Navigation: pwd (where am I?), ls (what's here?), and cd (let's go somewhere).
• File Management: mkdir (create a directory), touch (create a file), and rm (remove a file or directory).
• Efficiency: Use Tab Autocompletion constantly, navigate your command history with the arrow keys, and use Ctrl+C to stop processes.

You've now created a project directory named my-first-app and an empty file within it called index.js.

In our next lesson, we will bring our AI assistant into the picture. We'll open that index.js file and use GitHub Copilot to help us write and understand our very first "Hello, World" program in JavaScript.