【活用终端】VSCode内置终端的使用与自定义方法

你好！我是一名现役的Web创作者，负责运营网站“buyonjapan.com”和“copicode.com”。

就在几个月前，我还是一个完全没有编程知识的纯粹初学者。特别是对于电影里黑客使用的那种“黑屏”，也就是“终端”，说实话我只有恐惧感。我曾想过：“感觉好可怕”、“操作好像很难”、“那是个与我无缘的世界……”

但是，在借助AI的帮助推进网站制作的过程中，我意识到终端是无法回避的道路，而且一旦和它搞好关系，它就会成为无可替代的“最强搭档”。

在这篇文章中，我将面向那些和我过去一样对终端抱有抵触情绪的Web创作者初学者，结合我自己的踩坑经历，用最易懂的方式解说VSCode内置“集成终端”的基本用法，以及只需复制粘贴就能极大改变你开发环境的自定义方法。我的目标是，当你读完这篇文章时，你能够自信地操作终端！

第1章：别再害怕！与VSCode集成终端的初次相遇

首先，让我们从与恐惧的对象（？）——终端，见个面开始吧。别担心，只是打开它什么也不会发生！

打开终端的3种方法

在VSCode中打开终端主要有三种方法。请尝试用适合自己的方式打开它。

1. 从菜单栏打开： 从屏幕顶部的菜单点击 终端 > 新建终端。
2. 用快捷键打开： 这是最酷、最高效的方式！一定要记住。
   • Windows/Mac通用：Ctrl + @ (或 Ctrl + Shift + `)
3. 从屏幕底部的状态栏打开： 如果问题面板等已打开，标签列表中会有“终端”，点击它即可。

如果屏幕下半部分出现了那个“黑屏”，那就成功了！

（图片是自定义后的样子，但最初的显示应该更简单）

什么是提示符？ - 与终端对话的开始

打开终端后，应该会显示像 C:\Users\YourName\Project> 或 YourName@MacBook-Air Project % 这样的字符串，旁边还有一个闪烁的光标。这被称为提示符 (Prompt)。

这是来自终端的消息，意思是：“当前你在这个位置（当前目录）。请输入下一条命令。” 从这里开始，我们将向终端发送各种“命令”，让电脑为我们工作。

第2章：只要记住这些就够了！Web创作者必备命令集

命令数不胜数，但在Web制作中日常使用的很有限。在这里，我将结合具体使用场景，介绍那些“只要记住这些，暂时就不会有麻烦！”的必备命令。

1. 确认当前位置 `pwd`

pwd 是 "Print Working Directory" 的缩写，是用来问电脑“我现在在哪个文件夹里？”的命令。就像迷路时首先要确认当前位置一样。

pwd

2. 查看文件夹内容 `ls`

ls 是 "List" 的缩写。它会列出当前文件夹（目录）中有哪些文件和子文件夹。在Web制作中，经常用它来确认文件结构。

ls

※在Windows的命令提示符中，dir 扮演相同的角色，但如果使用后述的 Git Bash，在Windows上也可以使用 ls，操作起来就像Mac用户一样方便。

3. 移动文件夹 `cd`

cd 是 "Change Directory" 的缩写。这是移动到你想工作的文件夹的最重要的命令之一。在“移动到项目文件夹开始工作”等场景中使用。

例如，如果想移动到一个名为 contact-form 的文件夹，可以这样输入：

cd contact-form

如果想返回上一级文件夹，使用 ..。

cd ..

4. 创建文件夹 `mkdir`

mkdir 是 "Make Directory" 的缩写。它会创建一个新的文件夹（目录）。例如，在创建用于存放图片的images文件夹或存放CSS文件的css文件夹时使用。

mkdir images

5. 安装JavaScript功能 `npm install`

在最近的Web制作中，从互联网下载并使用便利的功能（包）是很常见的。这时使用的机制就是npm，而npm install就是请求“请给我这个功能（包）！”的命令。

例如，如果要安装可以实现滑块的著名库“Swiper”，可以这样输入：

npm install swiper

这个命令是我最初感到“终端，太厉害了……！”的契机。只需输入一行，就能在自己的项目中使用全世界开发者制作的高级功能。简直就是魔法咒语。

第3章：【复制粘贴即可】别再害怕！打造你专属的终端

掌握了基本命令后，接下来就是自定义了。默认的朴素终端也不错，但稍加修改，外观就能变得非常酷，提升动力，最重要的是，工作效率会大大提高。

在这里，我将介绍不使用任何复杂工具，仅通过编辑VSCode的配置文件settings.json即可完成的实用自定义方法。

步骤1：打开配置文件 `settings.json`

首先，让我们打开VSCode的配置文件settings.json。

1. 按快捷键 Ctrl + Shift + P (Mac是 Command + Shift + P) 打开命令面板。
2. 在搜索框中输入“settings json”。
3. 选择出现的“首选项: 打开用户设置 (JSON) (Preferences: Open User Settings (JSON))”。

这样，包含你所有VSCode设置的settings.json文件就会打开。通过在这里追加代码，就可以更改终端的设置。

步骤2：【推荐Windows用户】将Shell更改为Git Bash

Mac用户可以跳过这一步，因为默认的zsh非常强大。对于Windows用户，我强烈推荐将终端使用的程序（Shell）从默认的PowerShell或命令提示符更改为Git Bash。

为什么是Git Bash？

• 可以直接使用Mac或Linux上常用的命令（ls, pwd等），方便从网上的技术文章或教材中复制粘贴命令来运行。
• 安装Git（版本控制工具）时会自动附带，所以引入很简单。

如果你的电脑上还没有Git for Windows，请从官网“git-scm.com”下载并安装。安装完成后，将以下代码添加到你刚才打开的settings.json文件中。（如果{}中已经有内容，请用逗号,分隔后追加）

{
    // 将Git Bash设置为默认终端的配置
    "terminal.integrated.defaultProfile.windows": "Git Bash"
}

重启VSCode或打开一个新的终端，Git Bash就会启动了。

步骤3：【复制粘贴完成】极大提升外观与实用性的自定义

久等了！终于到了自定义终端外观的时候了。请将以下代码完整地复制粘贴到你的settings.json文件中。我为每一行都写了注释，说明了它的含义，你可以一边理解，一边删除不需要的部分或更改数值，打造你自己的专属终端。

关于推荐字体： 以下设置中指定了名为Fira Code的编程字体。这种字体能将=>或!=等特定的符号组合显示为一个易于阅读的符号（连字），从而提高代码的可读性。建议事先搜索“Fira Code font”并在电脑上安装该字体。

{
    // --- 终端设置由此开始 ---

    // 指定终端使用的字体族。推荐'Fira Code'。
    // 如果指定了多个字体，当第一个字体不可用时，将使用下一个字体。
    "terminal.integrated.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace",

    // 指定终端的字体大小。请根据喜好调整。
    "terminal.integrated.fontSize": 14,

    // 启用字体连字。像 => 或 != 这样的符号会变成更易读的符号。
    "terminal.integrated.fontLigatures": true,

    // 指定终端的行高。1.5左右比较易读。
    "terminal.integrated.lineHeight": 1.5,

    // 指定光标样式。'line'是线形，'block'是块状，'underline'是下划线。
    "terminal.integrated.cursorStyle": "line",

    // 使光标闪烁。
    "terminal.integrated.cursorBlinking": true,

    // 在终端上右键单击时的行为。'copyPaste'可以方便地复制粘贴。
    "terminal.integrated.rightClickBehavior": "copyPaste",

    // 禁用终端的响铃（警报声）。
    "terminal.integrated.enableBell": false,

    // 与VSCode窗口颜色联动的终端详细颜色设置
    "workbench.colorCustomizations": {
        // 终端背景色
        "terminal.background": "#1E1E1E",
        // 终端前景色（文字颜色）
        "terminal.foreground": "#D4D4D4",
        // 终端黑色
        "terminal.ansiBlack": "#000000",
        // 终端红色
        "terminal.ansiRed": "#CD3131",
        // 终端绿色
        "terminal.ansiGreen": "#0DBC79",
        // 终端黄色
        "terminal.ansiYellow": "#E5E510",
        // 终端蓝色
        "terminal.ansiBlue": "#2472C8",
        // 终端品红色
        "terminal.ansiMagenta": "#BC3FBC",
        // 终端青色
        "terminal.ansiCyan": "#11A8CD",
        // 终端白色
        "terminal.ansiWhite": "#E5E5E5",
        // 终端亮黑色（灰色）
        "terminal.ansiBrightBlack": "#666666",
        // 终端亮红色
        "terminal.ansiBrightRed": "#F14C4C",
        // 终端亮绿色
        "terminal.ansiBrightGreen": "#23D18B",
        // 终端亮黄色
        "terminal.ansiBrightYellow": "#F5F543",
        // 终端亮蓝色
        "terminal.ansiBrightBlue": "#3B8EEA",
        // 终端亮品红色
        "terminal.ansiBrightMagenta": "#D670D6",
        // 终端亮青色
        "terminal.ansiBrightCyan": "#29B8DB",
        // 终端亮白色
        "terminal.ansiBrightWhite": "#E5E5E5"
    }

    // --- 终端设置到此结束 ---
}

粘贴此设置并保存(Ctrl + S)的瞬间，你的终端外观应该就会改变。如果没有变化，请尝试关闭终端（点击垃圾桶图标），然后重新打开一个。

第4章：我遇到的坑！给初学者的故障排除指南

开始使用终端后，几乎不可避免地会遇到错误。但请放心，不止你一个人会这样。在这里，我将分享我实际遇到并花了数小时（有时是一整天！）才解决的典型错误及其解决方案。

情况1：“'npm' 不是内部或外部命令，也不是可运行的程序或批处理文件。”

这个错误可能是Web制作初学者遇到的第一个也是最大的障碍。当你尝试执行npm install时，却收到了这样冷冰冰的消息……我当时也因此差点完全放弃。

原因：PATH（路径）未设置

这个错误99%的原因是“PATH（路径）没有打通”。简单来说，路径就是“电脑用来查找命令的地址簿”。

npm这个命令，通常是在安装Node.js这个编程环境时，一同安装在电脑的特定文件夹（例如: C:\Program Files\nodejs\）里的。当你在终端输入npm时，电脑会查看这个“地址簿(PATH)”，去寻找npm命令在哪里。但是，如果由于某种原因，这个地址簿里没有登记npm的位置，电脑就会返回一个“找不到这个命令！”的错误。

解决方案（Windows版）

1. 首先，确认Node.js是否已正确安装。从官网“nodejs.org”下载LTS版（推荐版）进行安装。如果在安装过程中有“Add to PATH”之类的复选框，请务必勾选。
2. 在Windows的搜索栏中搜索“编辑系统环境变量”并打开它。
3. 点击“环境变量”按钮。
4. 在“系统变量”栏中找到名为Path的变量，选中它，然后点击“编辑”。
5. 在打开的列表中，确认是否包含Node.js安装文件夹的路径，如C:\Program Files\nodejs\。如果没有，请点击“新建”按钮添加此路径。
6. 点击所有窗口的“确定”关闭，然后重启电脑（或至少完全重启VSCode）。

“设置PATH”这个概念，一开始真的很难理解。我也曾多次向AI请教“请用小学五年级学生也能懂的方式解释PATH”，才终于理解了这个“地址簿”的比喻。一旦理解了，将来安装其他工具时也能触类旁通，所以请务必趁此机会攻克它！

总结：终端不可怕，它是最强的伙伴！

到这里真是辛苦了！本文介绍的命令和自定义，只是广阔终端世界的冰山一角。但我相信，能否迈出这一步，将极大地影响你作为Web创作者的未来。

一开始你可能会输错命令，或者遇到莫名其妙的错误。但每一次的经历都会成为你的经验值。通过与终端交朋友，你将获得GUI操作绝对无法比拟的速度和效率，以及最重要的，那种“像专业人士一样开发”的自信。

请务必将你今天自定义的专属终端，作为今后Web制作的“最强搭档”，熟练地运用它吧！