命令行速成课

在你的开发过程中，你无疑会被要求在终端（或“命令行”——它们实际上是一回事）中运行一些命令。本文介绍了终端，你需要输入的常用命令，如何将命令链接在一起，以及如何添加自己的命令行界面（CLI）工具。

预备知识	对你的计算机操作系统、用于构建网站的基本软件和文件系统有基本了解。
学习成果	了解命令行是什么，以及你可以用它做什么。了解如何在不同系统上访问命令行。了解基本的键盘快捷键（例如，向上箭头访问以前的命令，Tab 键用于自动补全）。了解基本命令（例如 `cd`、`ls`、`mkdir`、`touch`、`grep`、`cat`、`mv`、`cp`）。命令选项/标志。

欢迎来到终端

终端是一个用于执行基于文本程序的文本界面。如果你正在运行任何用于 Web 开发的工具，几乎可以肯定你必须打开命令行并运行一些命令来使用你选择的工具（你经常会看到这些工具被称为 CLI 工具——命令行界面工具）。

大量的工具可以通过在命令行中输入命令来使用；许多预装在你的系统上，还有大量的其他工具可以从包注册表中安装。包注册表类似于应用商店，但（大部分）是用于基于命令行的工具和软件。我们将在本章稍后部分介绍如何安装一些工具，并将在下一章中了解更多关于包注册表的信息。

对命令行最大的批评之一是它在用户体验方面严重不足。第一次看到命令行可能会让人望而生畏：一个空白的屏幕和一个闪烁的光标，几乎没有任何明显的帮助来告诉你该做什么。

表面上看，它们远非友好，但你可以用它们做很多事情，我们保证，通过一些指导和练习，使用它们会变得更容易！这就是我们提供本章的原因——帮助你在这个看似不友好的环境中开始使用。

终端从何而来？

终端起源于 1950 年代到 1960 年代左右，它的原始形式与我们今天使用的完全不同（对此我们应该感到庆幸）。你可以在维基百科的计算机终端条目中阅读一些历史。

从那时起，终端一直是所有操作系统的恒定功能——从台式机到云中的服务器，再到像 Raspberry PI Zero 这样的微型计算机，甚至到手机。它提供了对计算机底层文件系统和低级功能的直接访问，因此如果你知道自己在做什么，它对于快速执行复杂任务非常有用。

它也适用于自动化——例如，编写一个命令来即时更新数百个文件的标题，比如从“ch01-xxxx.png”到“ch02-xxxx.png”。如果你使用 Finder 或 Explorer GUI 应用程序更新文件名，那将花费你很长时间。

无论如何，终端在短期内是不会消失的。

终端是什么样的？

下面你可以看到一些可用的不同类型的程序，它们可以让你进入终端。

接下来的图片显示了 Windows 中可用的命令提示符——从“cmd”程序到“powershell”有多种选择——可以通过在开始菜单中输入程序名称来运行。

A vanilla windows cmd line window, and a windows powershell window

在下面，你可以看到 macOS 终端应用程序。

A basic vanilla macOS terminal

如何访问终端？

如今许多开发人员都在使用基于 Unix 的工具（例如，终端以及可以通过它访问的工具）。当今网络上存在的许多教程和工具都支持（并且遗憾地假设）基于 Unix 的系统，但不用担心——它们在大多数系统上都可用。在本节中，我们将介绍如何在所选系统上访问终端。

Linux/Unix

如上所述，Linux/Unix 系统默认提供终端，列在你的应用程序中。

macOS

macOS 有一个名为 Darwin 的系统，它位于图形用户界面之下。Darwin 是一个类似 Unix 的系统，它提供终端和对低级工具的访问。macOS Darwin 大多与 Unix 具有同等功能，足以让我们在阅读本文时不必担心。

终端在 macOS 上位于 Applications/Utilities/Terminal。

Windows

与其他一些编程工具一样，在 Windows 上使用终端（或命令行）传统上不如在其他操作系统上那么简单或容易。但情况正在好转。

Windows 传统上有一个名为 cmd（“命令提示符”）的类似终端的程序很长时间，但它与 Unix 命令不兼容，相当于老式的 Windows DOS 提示符。

存在更好的程序可在 Windows 上提供终端体验，例如 PowerShell（在此处查找安装程序）和 Git Bash（作为 Windows 版 Git 工具集的一部分）。

然而，现代 Windows 的最佳选择是适用于 Linux 的 Windows 子系统（WSL）——一个兼容层，可以直接从 Windows 10 内部运行 Linux 操作系统，让你可以在 Windows 上直接运行“真正的终端”，而无需虚拟机。

这可以从 Windows 商店免费直接安装。你可以在适用于 Linux 的 Windows 子系统文档中找到所需的所有文档。

a screenshot of the Windows subsystem for Linux documentation

关于在 Windows 上选择哪个选项，我们强烈建议尝试安装 WSL。你可以坚持使用默认的命令提示符 (cmd)，许多工具也能正常工作，但如果你与 Unix 工具的兼容性更好，你会发现一切都会更容易。

旁注：命令行和终端有什么区别？

通常，你会发现这两个术语可以互换使用。从技术上讲，终端是启动并连接到 shell 的软件。shell 是你的会话和会话环境（其中可能自定义了提示符和快捷方式）。命令行是你输入命令并光标闪烁的字面一行。

你必须使用终端吗？

尽管命令行提供了大量的工具，但如果你使用像 Visual Studio Code 这样的工具，也有大量的扩展可以作为代理来使用终端命令，而无需直接使用终端。然而，你不会找到针对所有你想做的事情的代码编辑器扩展——你最终还是需要积累一些使用终端的经验。

基本的内置终端命令

废话不多说，让我们开始看一些终端命令吧！开箱即用，命令行可以做以下几件事，并附带各自相关工具的名称。

浏览计算机的文件系统，并执行创建、复制、重命名和删除等基本任务。
- 在目录（文件夹）结构中移动：cd
- 创建目录：mkdir
- 创建文件（并修改它们的元数据）：touch
- 复制文件或目录：cp
- 移动文件或目录：mv
- 删除文件或目录：rm
下载特定 URL 处的文件：curl
在较大文本主体中搜索文本片段：grep
逐页查看文件内容：less, cat
处理和转换文本流（例如将 HTML 文件中的所有 <div> 实例更改为 <article>）：awk, tr, sed

注意：网络上有很多很好的教程，它们更深入地探讨了命令行——这只是一个简要介绍！

让我们继续，看看如何在命令行中使用其中一些工具。在你继续之前，打开你的终端程序！

命令行上的导航

当你访问命令行时，你将不可避免地需要导航到特定目录以“做一些事情”。所有操作系统（假设是默认设置）都将在你的主目录中启动其终端程序，从那里你可能会想移动到其他位置。

注意：“目录”是我们上一篇文章中提到的“文件夹”的技术术语。当在用户界面 (UI) 中查看文件结构时，“文件夹”一词更有意义，因为使用的图标看起来像老式物理存储文件夹。然而，你也会经常听到“目录”一词，尤其是在谈论使用命令行操作文件时。它们之间存在细微差别，但这两个术语基本表示相同的意思。

cd 命令允许你更改目录 (Change Directory)。严格来说，cd 不是一个程序，而是一个内置命令。这意味着你的操作系统开箱即用，而且你不会意外删除它——谢天谢地！你不需要太担心某个命令是否是内置的，但请记住，内置命令会出现在所有基于 Unix 的系统上。

要更改目录，请在终端中键入 cd，后跟要移动到的目录。假设目录在你的主目录中，你可以使用 cd Desktop（请参见下面的屏幕截图）。
现在尝试在你的系统终端中输入此命令
bash
```
cd Desktop
```
要返回上一级目录，可以使用两个点。现在输入此命令
bash
```
cd ..
```

注意：一个非常有用的终端快捷方式是使用 tab 键来自动补全已知存在的名称，而不是必须输入整个名称。例如，在输入上述两个命令后，尝试输入 cd D 并按下 tab 键——如果当前目录中存在 Desktop 目录，它应该为你自动补全。在接下来的操作中请记住这一点。

如果你想进入的目录嵌套很深，你需要知道到达它的路径。当你越来越熟悉文件系统结构时，这通常会变得更容易，但如果你不确定路径，通常可以通过组合使用 ls 命令（见下文）并在 Explorer/Finder 窗口中点击查看目录相对于你当前位置的位置来找出路径。

例如，如果你想进入一个名为 src 的目录，它位于一个名为 project 的目录中，而 project 目录又位于 Desktop 上，你可以键入以下三个命令从你的 Home 目录到达那里：

bash

cd Desktop
cd project
cd src

但这太浪费时间了——相反，你可以输入一个命令，路径中的不同项用正斜杠分隔，就像你在 CSS、HTML 或 JavaScript 代码中指定图像或其他资产的路径时所做的那样。

bash

cd Desktop/project/src

请注意，在路径中包含前导斜杠会使路径成为绝对路径，例如 /Users/your-user-name/Desktop。像我们上面那样省略前导斜杠会使路径相对于你当前的工作目录。这与你在网络浏览器中看到的 URL 完全相同。前导斜杠表示“在网站的根目录”，而省略斜杠表示“URL 相对于我当前的页面”。

注意：在 Windows 上，你使用反斜杠而不是正斜杠，例如 cd Desktop\project\src — 这可能看起来很奇怪，但如果你有兴趣了解原因，请观看此 YouTube 剪辑，其中包含一位微软首席工程师的解释。

列出目录内容

另一个内置的 Unix 命令是 ls（list 的缩写），它列出你当前所在目录的内容。请注意，如果你使用默认的 Windows 命令提示符 (cmd)，这不起作用——那里的等效命令是 dir。

现在尝试在你的终端中运行此命令

bash

ls

这会给你一个当前工作目录中的文件和目录列表，但信息非常基本——你只能得到每个项目的名称，而不是它是文件还是目录，或任何其他信息。幸运的是，对命令用法进行少量更改可以给你更多信息。

介绍命令选项

大多数终端命令都带有选项——这些是你添加到命令末尾的修饰符，使命令的行为略有不同。它们通常由命令名称后的空格、破折号和一到多个字母组成。

例如，试试这个，看看你会得到什么

bash

ls -l

对于 ls，-l（破折号加字母 L）选项会列出每行一个文件或目录，并显示更多信息。目录可以通过查看行最左侧的字母“d”来识别。这些是我们可以 cd 进入的目录。

下面是一个截图，顶部是“原始”macOS 终端，底部是经过一些额外图标和颜色定制的终端，使其看起来生动活泼——两者都显示了运行 ls -l 的结果。

A vanilla macOS terminal and a more colorful custom macOS terminal, showing a file listing - the result of running the ls -l command

注意：要查阅每个命令的所有可用选项，可以查看其手册页（man page）。方法是输入 man 命令，后跟要查询的命令名称，例如 man ls。这将在终端的默认文本文件查看器（例如我的终端中的less）中打开手册页，然后你可以使用箭头键或类似机制滚动浏览页面。手册页会非常详细地列出所有选项，这可能一开始有点令人望而生畏，但至少你知道它在那里以备不时之需。查看完手册页后，你需要使用文本查看器的退出命令（在 less 中是“q”；如果不明，你可能需要在网上搜索才能找到）退出。

注意：要同时运行具有多个选项的命令，通常可以将它们全部放在破折号字符后的单个字符串中，例如 ls -lah 或 ls -ltrh。尝试查看 ls 手册页以弄清楚这些额外选项的作用！

现在我们已经讨论了两个基本命令，请在你的目录中稍微探索一下，看看你是否可以从一个地方导航到另一个地方。

创建、复制、移动、删除

还有一些其他的基本实用命令，你可能会在与终端打交道时经常使用。它们非常简单，所以我们不会像前面几个命令那样详细解释它们。

在某个你创建的测试目录中试用它们，这样你就不会意外删除任何重要内容，请参考下面的示例命令作为指导。

mkdir — 这会在你当前所在的目录中创建一个新目录，名称为你提供的命令名称之后的内容。例如，mkdir my-awesome-website 将创建一个名为 my-awesome-website 的新目录。
rmdir — 删除指定名称的目录，但仅当它为空时。例如，rmdir my-awesome-website 将删除我们上面创建的目录。如果你想删除一个不为空的目录（以及它包含的所有内容），那么你可以使用 rm -r 代替（见下文），但这很危险。请确保该目录中没有任何你以后可能需要的东西，因为它将永远消失。
touch — 在当前目录中创建一个新的空文件。例如，touch mdn-example.md 创建一个名为 mdn-example.md 的新空文件。
mv — 将文件从第一个指定的文件位置移动到第二个指定的文件位置，例如 mv mdn-example.md mdn-example.txt（这些位置写成文件路径）。此命令将当前目录中名为 mdn-example.md 的文件移动到当前目录中名为 mdn-example.txt 的文件。严格来说，文件被移动了，但从实际角度来看，此命令实际上是在重命名文件。
cp — 用法与 mv 类似，cp 在第二个指定位置创建第一个指定位置的文件的副本。例如，cp mdn-example.txt mdn-example.txt.bak 创建 mdn-example.txt 的副本，名为 mdn-example.txt.bak（当然，如果你愿意，你可以将其命名为其他名称）。
rm — 删除指定的文件。例如，rm mdn-example.txt 删除一个名为 mdn-example.txt 的文件。请注意，此删除是永久性的，无法通过桌面用户界面上的回收站撤销。

注意：许多终端命令允许你使用星号作为“通配符”，表示“任何字符序列”。这允许你一次对大量文件执行操作，所有这些文件都与指定的模式匹配。例如，rm mdn-* 将删除所有以 mdn- 开头的文件。rm mdn-*.bak 将删除所有以 mdn- 开头并以 .bak 结尾的文件。

终端——有害吗？

我们之前已经暗示过，但要明确的是——你需要小心使用终端。简单的命令没有太大危险，但当你开始组合更复杂的命令时，你需要仔细考虑命令会做什么，并尝试先测试它们，然后再在预期目录中运行它们。

假设你有一个目录中包含 1000 个文本文件，并且你想遍历所有这些文件，只删除文件名中包含特定子字符串的文件。如果你不小心，最终可能会删除一些重要的内容，从而在此过程中丢失大量工作。一个好习惯是：在文本编辑器中编写你的终端命令，找出你认为它应该是什么样子，然后备份你的目录并首先尝试在该备份上运行命令以进行测试。

如果你不习惯在自己的机器上尝试终端命令，有一些在线托管的终端可供你安全地练习输入命令，而无需冒险损坏自己的机器。

我们的学习伙伴 Scrimba 在其学习环境中提供了一个用于输入命令的终端。一个很好的实际例子是他们的命令行基础 ^{MDN 学习伙伴} 课程，该课程还提供了一个有趣的交互式介绍，用于通过终端导航文件树和操作文件和目录。
sandbox.bio 上的命令行演练场是尝试终端命令的好地方，这样你就可以熟悉命令行界面和 Bash 等常用 shell。

快速了解特定终端命令的一个极佳资源是 tldr.sh。这是一个社区驱动的文档服务，类似于 MDN，但专门针对终端命令。

在下一节中，我们将把难度提高一个（实际上是几个）等级，看看我们如何在命令行中将工具连接起来，从而真正体会到终端相对于常规桌面用户界面的优势。

使用管道连接命令

当你开始使用 |（管道）符号将命令串联起来时，终端才会真正发挥其作用。让我们看一个非常简单的例子来解释这意味着什么。

我们已经看过 ls，它输出当前目录的内容。

bash

ls

但是如果我们想快速计算当前目录中的文件和目录数量呢？ls 无法独自完成。

还有一个名为 wc 的 Unix 工具可用。它计算输入到其中的单词、行、字符或字节数。这可以是一个文本文件——下面的示例输出 myfile.txt 中的行数。

bash

wc -l myfile.txt

但它也可以计算通过管道输入到其中的任何输出的行数。例如，下面的命令计算 ls 命令输出的行数（如果单独运行，它通常会打印到终端），然后将该计数输出到终端。

bash

ls | wc -l

由于 ls 将每个文件或目录打印在新的一行上，这实际上为我们提供了目录和文件的计数。

那么这里发生了什么？（Unix）命令行工具的一个普遍哲学是它们将文本打印到终端（也称为“打印到标准输出”或 STDOUT）。许多命令也可以从流式输入中读取内容（称为“标准输入”或 STDIN）。

管道操作符可以将这些输入和输出连接起来，使我们能够构建越来越复杂的满足我们需求的操作——一个命令的输出可以成为下一个命令的输入。在这种情况下，ls 通常会将其输出打印到 STDOUT，但现在 ls 的输出被管道传输到 wc，wc 将该输出作为输入，计算其中包含的行数，并将其计数打印到 STDOUT。

一个稍微复杂一点的例子

让我们来看看一个稍微复杂一点的例子。

我们将首先尝试使用 curl 命令（可用于从 URL 请求内容）从 https://mdn.org.cn/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch 获取 MDN 的“fetch”页面的内容。现在试试看
bash
```
curl https://mdn.org.cn/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
```
你不会得到输出，因为页面已被重定向（到 /Web/API/fetch）。我们需要使用 -L 标志明确告诉 curl 遵循重定向。
我们再来看看 developer.mozilla.org 使用 curl 的 -I 标志返回的头部信息，并通过将 curl 的输出通过管道传递给 grep（我们将要求 grep 返回所有包含“location”一词的行）来打印它发送到终端的所有位置重定向。尝试运行以下命令（你会看到在到达最终页面之前只有一个重定向）。
bash
```
curl https://mdn.org.cn/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch -L -I | grep location
```
你的输出应该看起来像这样（curl 首先会输出一些下载计数器等）
bash
```
location: /en-US/docs/Web/API/Window/fetch
```
尽管是人为设计的，但我们可以将这个结果进一步扩展，转换 location: 行内容，在每个内容的开头添加基本源，这样我们就可以打印出完整的 URL。为此，我们将添加 awk（这是一种类似于 JavaScript、Ruby 或 Python 的编程语言，只是更古老！）。尝试运行此命令。
bash
```
curl https://mdn.org.cn/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch -L -I | grep location | awk '{ print "https://mdn.org.cn" $2 }'
```

你的最终输出应该看起来像这样

bash

https://mdn.org.cn/en-US/docs/Web/API/Window/fetch

通过组合这些命令，我们定制了输出，以显示当我们请求 /docs/Web/API/WindowOrWorkerGlobalScope/fetch URL 时，Mozilla 服务器正在重定向的完整 URL。了解你的系统在未来几年中会证明非常有用——学习这些单一用途工具的工作原理以及它们如何成为你解决特定问题的工具包的一部分。

添加强化功能

现在我们已经了解了系统附带的一些内置命令，接下来让我们看看如何安装并使用第三方 CLI 工具。

目前，用于前端 Web 开发的大量可安装工具生态系统主要存在于 npm 中，这是一个私有的包托管服务，与 Node.js 密切合作。这个生态系统正在缓慢扩展——随着时间的推移，你可以期待看到更多的包提供商。

安装 Node.js 还会安装 npm 命令行工具（以及一个以 npm 为中心的辅助工具 npx），它提供了一个安装额外命令行工具的入口。Node.js 和 npm 在所有系统上都以相同的方式工作：macOS、Windows 和 Linux。

现在在你的系统上安装 npm，方法是访问上面的 URL 并下载并运行适合你操作系统的 Node.js 安装程序。如果出现提示，请务必将 npm 作为安装的一部分。

the Node.js installer on windows, showing the option to include npm

我们将再次以 Prettier 为例。我们在代码编辑器文章中展示了如何将其安装为 VS Code 扩展。这里我们将向你展示如何将其安装为命令行工具。

注意：Prettier 是一个有主见的格式化工具，只有“少量选项”。选项越少通常意味着越简单。考虑到工具的复杂性有时会失控，“少量选项”可能非常有吸引力。

我们的 CLI 工具应该安装在哪里？

在深入安装 Prettier 之前，有一个问题要回答——“我们应该把它安装在哪里？”

使用 npm，我们可以选择全局安装工具——这样我们就可以在任何地方访问它们——或者在当前项目目录中本地安装。

每种方式都有利弊——以下全局安装的利弊列表远非详尽无遗。

全局安装的优点

在终端的任何地方都可以访问
只需安装一次
占用更少的磁盘空间
始终是相同的版本
感觉就像任何其他 Unix 命令一样

全局安装的缺点

可能与你的项目代码库不兼容。
团队中的其他开发人员将无法访问这些工具，例如，如果你通过像 Git 这样的工具共享代码库。
与上一点相关，这使得项目代码更难复制（如果你在本地安装工具，它们可以设置为依赖项并通过 npm install 安装）。

尽管缺点列表较短，但全局安装的负面影响可能远大于收益。在这里我们将本地安装，但一旦你了解了相对风险，可以随意全局安装。

安装 Prettier

Prettier 是一个专为前端开发者设计的有主见的（opinionated）代码格式化工具，专注于基于 JavaScript 的语言，并支持 HTML、CSS、SCSS、JSON 等。

Prettier 可以

省去手动在所有代码文件中保持样式一致的认知开销；Prettier 可以为你自动完成。
帮助 Web 开发新手以最佳实践方式格式化他们的代码。
安装在任何操作系统上，甚至作为项目工具的直接一部分，确保与你合作的同事和朋友使用你正在使用的代码样式。
配置为在保存时、键入时甚至在发布代码之前运行（使用我们将在模块后面看到的附加工具）。

对于本文，我们将按照Prettier 安装指南的建议，在本地安装 Prettier。

安装 Node 后，打开终端并运行以下命令安装 Prettier（我们将在下一篇文章中解释 --save-dev 的作用）。
bash
```
npm install --save-dev prettier
```
现在你可以使用 npx 工具在本地运行该文件。像许多其他命令一样，不带任何参数运行该命令将提供使用说明和帮助信息。现在尝试一下。
bash
```
npx prettier
```

你的输出应该看起来像这样

bash

Usage: prettier [options] [file/glob ...]

By default, output is written to stdout.
Stdin is read if it is piped to Prettier and no files are given.

…

至少快速浏览一下使用信息总是值得的，即使它很长。它将帮助你更好地理解该工具的预期用途。

注意：如果你没有先在本地安装 Prettier，那么运行 npx prettier 将立即下载并运行最新版本的 Prettier 只用于该命令。虽然这听起来很棒，但新版本的 Prettier 可能会稍微修改输出。你需要将其本地安装，以便在准备好更改它之前固定你用于格式化的 Prettier 版本。

使用 Prettier 玩耍

让我们快速玩一下 Prettier，这样你就可以看到它是如何工作的。

首先，在文件系统上创建一个容易找到的新目录。也许在你的 Desktop 上创建一个名为 prettier-test 的目录。
现在将以下代码保存到一个名为 index.js 的新文件中，放在你的测试目录中。
js
```
const myObj = {
a:1,b:{c:2}}
function printMe(obj){console.log(obj.b.c)}
printMe(myObj)
```
我们可以针对代码库运行 Prettier，仅仅是为了检查我们的代码是否需要调整。cd 进入你的目录，然后尝试运行此命令。
bash
```
npx prettier --check index.js
```
你应该会得到类似以下的输出
bash
```
Checking formatting...
index.js
Code style issues found in the above file(s). Forgot to run Prettier?
```
所以，有一些代码样式可以修复。没问题。在 prettier 命令中添加 --write 选项将修复这些问题，让我们专注于实际编写有用的代码。现在尝试运行此版本的命令。
bash
```
npx prettier --write index.js
```
你会得到这样的输出
bash
```
Checking formatting...
index.js
Code style issues fixed in the above file(s).
```
但更重要的是，如果你回过头来看你的 JavaScript 文件，你会发现它已经被重新格式化成这样：
js
```
const myObj = {
  a: 1,
  b: { c: 2 },
};
function printMe(obj) {
  console.log(obj.b.c);
}
printMe(myObj);
```