[Terminal Power-Up] How to Use and Customize the VSCode Integrated Terminal

Hello! I'm a web creator who runs the websites "buyonjapan.com" and "copicode.com".

Just a few months ago, I was a complete beginner with absolutely no programming knowledge. I was especially terrified of the "black screen" you see hackers use in movies—the terminal. I thought, "It looks scary," "The commands seem difficult," and "This is a world I'll never be a part of."

However, as I continued to build websites with the help of AI, I realized that the terminal was an unavoidable path. And once I got comfortable with it, it became my greatest ally.

In this article, for web creator beginners who, like my past self, feel intimidated by the terminal, I will explain everything from the basics of the VSCode integrated terminal to customization methods that will dramatically change your development environment with just a copy-paste. I'll share my own stumbling experiences in an easy-to-understand way. My goal is for you to be able to operate the terminal with confidence by the time you finish reading this!

Chapter 1: Don't Be Scared! Your First Encounter with the VSCode Integrated Terminal

First, let's meet the object of our fear (?), the terminal. Don't worry, nothing will happen just by opening it!

3 Ways to Open the Terminal

There are three main ways to open the terminal in VSCode. Try opening it with the method that suits you best.

1. From the Menu Bar: Click Terminal > New Terminal from the menu at the top of the screen.
2. With a Shortcut Key: This is the coolest and most efficient way! I highly recommend memorizing it.
   • Common for Windows/Mac: Ctrl + @ (or Ctrl + Shift + `)
3. From the Status Bar at the Bottom: If you have panels like "Problems" open, you'll see "Terminal" in the list of tabs. Click it.

If you see that "black screen" appear in the bottom half of your window, you've succeeded!

(The image shows a customized version, but it should look simpler initially.)

What's a Prompt? - The Beginning of Your Conversation with the Terminal

When you open the terminal, you should see a string of text like C:\Users\YourName\Project> or YourName@MacBook-Air Project % with a blinking cursor next to it. This is called a prompt.

This is a message from the terminal saying, "You are currently in this location (current directory). Please enter your next command." From here, we will send various "commands" to the terminal to have the PC do work for us.

Chapter 2: Essential Commands for Web Developers You Must Learn

There are countless commands, but only a limited number are used daily in web development. Here, I'll introduce the essential commands that will get you through most situations, along with specific use cases.

1. Check Your Current Location: `pwd`

pwd stands for "Print Working Directory." It's a command to ask the PC, "Which folder am I in right now?" It's just like checking your current location when you're lost.

pwd

2. View Folder Contents: `ls`

ls stands for "List." It displays a list of all files and subfolders in your current folder (directory). It's frequently used in web development to check the file structure.

ls

*In the Windows Command Prompt, dir serves the same purpose, but by using Git Bash, which we'll discuss later, you can use ls on Windows too, making it convenient to operate with the same feel as a Mac user.

3. Change Folders: `cd`

cd stands for "Change Directory." It's one of the most important commands for moving to the folder you want to work in. You'll use it in scenarios like, "Move to the project folder to start work."

For example, to move into a folder named contact-form, you would type this:

cd contact-form

To go back to the parent folder, use ...

cd ..

4. Create a Folder: `mkdir`

mkdir stands for "Make Directory." It creates a new folder (directory). For example, you'd use it to create an images folder for your images or a css folder for your CSS files.

mkdir images

5. Install JavaScript Features: `npm install`

In modern web development, it's common to download and use convenient features (packages) from the internet. The system used for this is npm, and npm install is the command to request, "I want this feature (package)!"

For example, to install the famous "Swiper" library for implementing sliders, you would type this:

npm install swiper

This command was the reason I first thought, "The terminal is amazing...!" With just one line, you can use advanced features created by developers all over the world in your own project. It's like a magic spell.

Chapter 3: [Just Copy & Paste] Don't Be Scared! Let's Nurture the Terminal to Your Liking

Once you've learned the basic commands, it's time for customization. The default, sterile terminal isn't bad, but with a few tweaks, you can make it look dramatically cooler, boost your motivation, and, most importantly, significantly improve your work efficiency.

Here, I'll introduce practical customization methods that can be completed just by editing VSCode's settings file, settings.json, without using any difficult tools.

Step 1: Open the `settings.json` File

First, let's open the VSCode settings file, settings.json.

1. Press the shortcut keys Ctrl + Shift + P (or Command + Shift + P on Mac) to open the Command Palette.
2. In the search bar, type "settings json".
3. Select "Preferences: Open User Settings (JSON)" from the suggestions.

This will open the settings.json file, which contains all your VSCode settings. You can change the terminal settings by adding code here.

Step 2: [Recommended for Windows Users] Change the Shell to Git Bash

Mac users can skip this step as the default zsh is very powerful. For Windows users, I highly recommend changing the program the terminal uses (the shell) from the default PowerShell or Command Prompt to Git Bash.

Why Git Bash?

• You can use commands common on Mac and Linux (like ls, pwd, etc.) as is, making it easy to copy and paste commands from tech articles and tutorials online.
• It comes automatically when you install Git (a version control tool), so it's easy to set up.

If you don't have Git for Windows on your PC yet, please download and install it from the official website "git-scm.com". Once the installation is complete, add the following code to the settings.json file you just opened. (If there's already something inside the {}, add it separated by a comma ,).

{
    // Settings to use Git Bash as the default terminal on Windows
    "terminal.integrated.defaultProfile.windows": "Git Bash"
}

Restart VSCode or open a new terminal, and Git Bash should now launch.

Step 3: [Copy-Paste to Complete] Customizations to Dramatically Improve Appearance and Practicality

Thanks for waiting! It's finally time to customize the terminal's appearance. Copy and paste the entire code below into your settings.json file. I've added comments explaining what each line does, so feel free to create your own unique terminal by understanding the meaning, deleting unnecessary parts, or changing the values.

About the Recommended Font: The following settings specify the programming font Fira Code. This font displays combinations of certain symbols like => and != as a single, easy-to-read symbol (a ligature), which improves code readability. It's recommended to search for "Fira Code font" and install the font on your PC beforehand.

{
    // --- Terminal settings start here ---

    // Specifies the font family for the terminal. 'Fira Code' is recommended.
    // If multiple fonts are specified, the next font is used if the first is not available.
    "terminal.integrated.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace",

    // Specifies the font size for the terminal. Adjust to your preferred size.
    "terminal.integrated.fontSize": 14,

    // Enables font ligatures. Symbols like => and != will change to more readable symbols.
    "terminal.integrated.fontLigatures": true,

    // Specifies the line height for the terminal. Around 1.5 is easy to read.
    "terminal.integrated.lineHeight": 1.5,

    // Specifies the cursor style. 'line', 'block', or 'underline'.
    "terminal.integrated.cursorStyle": "line",

    // Makes the cursor blink.
    "terminal.integrated.cursorBlinking": true,

    // Behavior on right-click in the terminal. 'copyPaste' is convenient.
    "terminal.integrated.rightClickBehavior": "copyPaste",

    // Disables the terminal bell (alert sound).
    "terminal.integrated.enableBell": false,

    // Detailed color settings for the terminal that sync with VSCode's window color.
    "workbench.colorCustomizations": {
        // Terminal background color
        "terminal.background": "#1E1E1E",
        // Terminal foreground (text) color
        "terminal.foreground": "#D4D4D4",
        // Terminal black
        "terminal.ansiBlack": "#000000",
        // Terminal red
        "terminal.ansiRed": "#CD3131",
        // Terminal green
        "terminal.ansiGreen": "#0DBC79",
        // Terminal yellow
        "terminal.ansiYellow": "#E5E510",
        // Terminal blue
        "terminal.ansiBlue": "#2472C8",
        // Terminal magenta
        "terminal.ansiMagenta": "#BC3FBC",
        // Terminal cyan
        "terminal.ansiCyan": "#11A8CD",
        // Terminal white
        "terminal.ansiWhite": "#E5E5E5",
        // Terminal bright black (gray)
        "terminal.ansiBrightBlack": "#666666",
        // Terminal bright red
        "terminal.ansiBrightRed": "#F14C4C",
        // Terminal bright green
        "terminal.ansiBrightGreen": "#23D18B",
        // Terminal bright yellow
        "terminal.ansiBrightYellow": "#F5F543",
        // Terminal bright blue
        "terminal.ansiBrightBlue": "#3B8EEA",
        // Terminal bright magenta
        "terminal.ansiBrightMagenta": "#D670D6",
        // Terminal bright cyan
        "terminal.ansiBrightCyan": "#29B8DB",
        // Terminal bright white
        "terminal.ansiBrightWhite": "#E5E5E5"
    }

    // --- Terminal settings end here ---
}

The moment you paste this setting and save (Ctrl + S), your terminal's appearance should change. If it doesn't, try closing the terminal (click the trash can icon) and opening a new one.

Chapter 4: Where I Got Stuck! Troubleshooting for Beginners

When you start using the terminal, you will almost certainly encounter errors. But don't worry, you're not alone. Here, I'll share typical errors that I actually encountered and spent hours (sometimes a whole day!) solving, along with their solutions.

Case 1: "'npm' is not recognized as an internal or external command..."

This error might be the first and biggest wall for web development beginners. You try to run npm install and get this cold message... I almost gave up completely because of this.

Cause: The PATH is not set

99% of the time, the cause of this error is that the "PATH is not set." To put it very simply, the PATH is an "address book for the PC to find commands."

The npm command is usually installed in a specific folder on your PC (e.g., C:\Program Files\nodejs\) when you install the Node.js programming environment. When you type npm in the terminal, the PC looks at this "address book (PATH)" to find where the npm command is located. However, if for some reason the location of npm is not registered in this address book, the PC will return an error saying, "I can't find that command anywhere!"

Solution (for Windows)

1. First, check if Node.js is installed correctly. Let's install the LTS (recommended) version from the official website "nodejs.org". If there's a checkbox like "Add to PATH" during installation, make sure to check it.
2. In the Windows search bar, search for "Edit the system environment variables" and open it.
3. Click the "Environment Variables" button.
4. In the "System variables" section, find the variable named Path, select it, and click "Edit."
5. Check if the list that opens contains the path to the folder where you installed Node.js, like C:\Program Files\nodejs\. If not, click the "New" button to add this path.
6. Close all windows by clicking "OK" and restart your PC (or at least completely restart VSCode).

The concept of "setting the PATH" can be really hard to grasp at first. I asked an AI to "explain PATH to me like I'm a 5th grader" many times before I finally arrived at this "address book" image. Once you understand it, you'll be able to apply this knowledge when installing other tools in the future, so let's overcome this hurdle now!

Conclusion: The Terminal Isn't Scary, It's Your Best Friend!

Thank you for making it this far! The commands and customizations introduced in this article are just the beginning of the vast world of the terminal. However, I believe that whether or not you took this first step will greatly influence your future as a web creator.

At first, you'll probably mistype commands and encounter cryptic errors. But each of those is a learning experience. You'll gain speed and efficiency that you could never get with GUI operations, and above all, the confidence of "developing like a pro" by becoming friends with the terminal.

Please go ahead and master the terminal you customized today as your "best friend" in your future web development!