关于前端:写给前端程序员的命令行入门

前言

诸如 React、Angular、Vue 等古代前端框架重大依赖于终端。如果你还不习惯应用命令行界面，你将很难运行本地开发服务器或构建你的应用程序。

讥刺的是，咱们的整个工作都建设在图形化用户界面上，但咱们在开发中应用的工具却大多是基于命令行的。

除非你有计算机科学背景，或者在上世纪 80 年代应用计算机长大，否则你大概率不会领有丰盛的终端教训。然而，大部分在线资源都假设你曾经对此非常纯熟了。

要成为一个终端大佬须要多年的练习，但好消息是：咱们能够走捷径。咱们并不真的须要晓得能够用终端做的绝大多数的事件。如果咱们专一于最重要的要害基础知识，咱们应该可能在很短的工夫内适应命令行。✨

这也是这篇文章想要介绍的内容。它是应用古代 JS 框架（如 React）所需的，终端基础知识的一门手册，有了它你就能够转到乏味的事件上：构建用户界面。

我还将分享我从终端中取得的技巧和诀窍，这些货色我多心愿在我刚开始工作时就有人能通知我。

筹备工作

好了，在开始之前，咱们还须要做两件事件。

首先，咱们须要一些终端软件。终端软件是运行命令行环境的应用程序。

简直每个操作系统都会有一个内置的终端，比方 MacOS 的Terminal.app，或者 Windows 的Command Prompt，这些应用程序都能够工作，但都不太让人称心。大多数开发者会抉择应用其他软件。

只有你应用的是古代技术，那么抉择应用哪款终端利用就没那么重要。因而，这里我有两个次要倡议：

1. Hyper。Hyper 是古代的，多平台的终端应用程序。它颜值很高，还带有一些时尚的性能，比方能够分为多个窗口。
2. 如果你应用 VS Code 作为代码编辑器，那么 VS Code 曾经内置了一个弱小的、现代化的终端。这十分棒，意味着代码和终端能够在一个利用内并排运行。你能够在 VS Code 中通过抉择 查看→终端 来关上终端。

在这篇文章中，我将应用 Hyper 来展现所有的例子。

到这里，抉择好了终端利用才实现了一半。咱们还须要确保运行正确的 shell 语言。

当咱们在终端输出命令并回车时，命令会通过 shell 语言进行解释执行。它实质上是在终端应用程序中运行的环境。

最风行的 shell 语言是 Bash。当你在网上看到命令行阐明时，这些阐明很有可能是基于 Bash 的。这是大多数 Linux 发行版应用的默认 shell 语言。

古代的 MacOS 版本自带的 Zsh，而不是 Bash。但 Zsh 与 Bash 非常相似：它们属于同一家族，简直共享所有雷同的命令。从目标角度登程，它们是能够调换应用的。

如果你应用的是 Linux 或者 MacOS，那就能够正式开始了。你的计算机曾经在应用一种 ” 行业标准 ” 的 shell 语言。然而，如果你应用的是 Windows，咱们还有一点工作要做。

形象的比喻

你是否已经在你的浏览器中关上开发者控制台，来运行一些任意的 JavaScript 代码？

在这种状况下，应用程序是 Chrome，而语言是 JavaScript。Chrome 提供了命令行界面，但当咱们运行命令时，这些命令是用 JavaScript 解释的。

当波及到终端时，它也是同样的情理。像 Hyper 这样的终端利用可能正在运行 Bash shell语言。与浏览器不同的是，终端利用能够在多种 shell 语言之间进行切换。

Windows 设置

首先，我须要抵赖的是，当波及到 Windows 开发时，我并不是专业人士。请对我接下来说的每一句话持保留态度。

Bash 是基于 Linux 的 shell 语言，它不会在 Windows 上原生运行。侥幸的是，较新版本的 Windows 具备装置和运行 Linux 的能力，就像 Linux 是一种应用程序一样。这被称为 Windows Subsystem for Linux，通常缩写为 WSL。

这里有一个教程，介绍了所需的步骤：在 Windows 中，如何装置并应用 Zsh。

我本人运行了这些步骤，尽管这有点乏味，但它的确起作用了！

一旦设置好之后，你就能够配置终端来应用 Bash 或者 Zsh。这里有一些对于配置 Hyper 来应用 Zsh 的介绍。

如果你在这些步骤中遇到了麻烦，这里有些其余的解决方案你能够试一试。一个风行的办法是 Git Bash，它容许你在 Windows 内应用模仿技术运行 Bash。

归根结底，你如何做到并不重要。重要的是，你可能在 Windows 中应用 Bash 或 Zsh。

Hello World

当你第一次关上终端利用时，你会遇到这个相当无助的界面：

你的终端看起来可能会有些不同，这取决于你应用的操作系统、终端利用、shell语言。总的来说，你可能会看到一行文字，和一堆空白空间。

这一行文字被称为提醒。它之所以被称为 ” 提醒 ”，是因为它在期待你提供某种指令。

咱们的第一个命令，输出文本 echo "hello world" 并回车：

语法有一点不同，但你能够认为命令就是内置的 JavaScript 函数。echo命令与 JavaScript 中的 console.log 函数十分类似。

跟函数一样，命令也能够接管参数。在本例中，echo接管了一个参数，并输入了字符串。

当咱们按下回车时，命令就会立刻执行，值也会被打印。下一行会出现一个新的提醒，让咱们晓得它曾经筹备好接管下一个指令。

就像这样，你曾经胜利运行了第一条终端命令。

跳过 $

在浏览 NPM 包的装置阐明时，你会常常看到这样的内容：

$ npm install some-package

如果你试图运行这一段文字，你会失去一个谬误。这是因为美元符号（$）不应该被包含在内。你应该在美元符号之后输出所有内容。

为什么装置说明会蕴含一个随机的符号，而这个符号实际上并不是命令的一部分？好吧，在 Bash shell语言中，$ 是提示符，显示在提醒的开端。

它实质上是一个符号，并说道：嘿，这里的货色要在终端运行！

只管在许多古代 shell 语言（如 Zsh）中，$ 实际上并不作为提醒字符应用，但其象征意义依然存在，比方保留的图标是一个软盘形态，只管咱们曾经几十年没有应用软盘了。

导航

终端的次要目标是可能让你在文件系统中挪动文件，并关上 / 运行货色。它实质上是咱们每天应用的 GUI 文件资源管理器（如 Finder、Windows Explorer）的基于文本的版本。

为了帮忙咱们全方位导航，有很多终端命令能够应用。让咱们来摸索其中的一些。

pwd 命令代表着 Print Working Directory，它有点像购物中心地图上的“你在这里”箭头。它会通知你以后所处的地位：

当你关上终端利用时，你通常会被扔进”home”目录，该目录蕴含了 Documents 和 Desktop 目录。在我的机器上，这个目录位于/Users/joshu。

应用ls（List 的简写）命令，你能够查看当前目录下的内容：

在我的终端上，目录是加粗的，并以浅水色展现。而单个文件是一般文字粗细，以红色展现。

咱们能够应用cd（Change Directory）命令来挪动文件系统：

这相当于在 GUI 文件资源管理器中双击 “stuff” 目录。

须要留神的是，提醒从波浪字符（~）变成了 “stuff”。在 Zsh shell语言中，默认的提醒由一个箭头和当前目录的名称组成，比如说 ”→ Documents”。等一下，为什么之前是一个波浪字符，而不是父目录的名称？在 MacOS 和 Linux 上，波浪字符是用户 home 目录的缩写。在我的机器上，”~” 相当于 ”/Users/joshu“。很容易误以为 ”~” 是一个提醒字符，就像 Bash 中的 ”$” 一样。

如果我想返回上一级，返回到 home 目录该怎么办？我也能够应用 cd 命令来达到目标，然而要带有两个点（..）。

在大多数 shell 语言中，点字符（.）具备着非凡的含意：

• 一个点（.）示意当前目录。
• 两个点（..）示意父级目录。

如果你在 JavaScript 中应用过模块零碎，你可能曾经相熟了这个常规。它应用同样的符号，用两个点来示意父级目录：

import {COLORS} from '../../constants';
import Button from '../Button';

对于 cd 命令，有件很重要的事件须要晓得。那就是 cd 能够接管简单的门路。终端的初学者往往会像在 GUI 文件资源管理器中那样，一步一步地走：

这样做是没问题的，然而须要破费大量额定的工作。咱们能够像这样一步到位地实现同样的门路跳转：

Tab 主动补全

终端最令人生畏的事件之一是，它不会给你任何线索或提醒。应用 GUI 文件资源管理器，你能够看到文件和文件夹的残缺列表，以刷新你的记忆并帮忙你找到你要找的货色。

如果你想依照我的倡议应用cd，从一个中央一下子跳到另一个中央，看起来你可能须要一个照相式的记忆。除非你记住门路链中每个目录的确切名称，否则你无奈做到这一点，对不对？

侥幸的是，一个十分不便的技巧使这所有变得更加容易：tab 主动补全。

在无效应用终端时，Tab 键是至关重要的。除了这里展现的导航技巧外，咱们还能够用 Tab 键来主动实现 Git 分支，或者补全命令的残余局部。

试试在不同状况下按下 Tab 键，看看会产生什么吧。

Visual 主动补全

如果你发现很难把握 Tab 的主动补全，你可能会对 Fig 感兴趣。Fig 是一个终端插件，它减少了编辑器格调的主动补全。

我也刚刚开始尝试应用 Warp，一个为速度和用户体验而建设的古代终端。在写这篇文章的时候，它是 MacOS 独有的，但他们的确打算在测试版之后将其移植到 Windows 和 Linux。

咱们正生存在一个终端振兴的时代，有很多工具的目标是使它不那么令人生畏。

标记

早些时候，我提到过 Bash/Zsh 里的命令，就像 JavaScript 里的函数。当波及到标记时，这个类比就不太实用了。

标记是修饰符，以事后定义的形式调整命令的行为。

举例来说，让咱们来看一看 rm 命令。该命令容许咱们删除单个文件：

咱们没有失去任何模式的确认，但如果咱们再次查看，会发现 theme-song.mp3 文件的确已被删除。

再持续之前，我应该正告你：终端可能相当不宽容。rm命令没有 “ 你确定吗？” 的确认提醒。也没有任何撤销操作。当你应用 rm 删除文件，它不会进入回收站 / 垃圾桶。它被永恒地、不可逆转地删除。这是终端的一个独特主题。没有太多的平安机制。因而，在应用 rm 这样的命令时，请务必小心。

如果你尝试在目录上应用 rm 命令，你会失去一个谬误：

默认状况下，rm只能够删除单个文件，但咱们能够应用 r 标记来扭转规定：

r标记代表着递归（recursive）。它将删除 stuff 目录在内的任何货色，stuff目录内的目录内的任何货色，stuff目录内的目录内的任何货色，以此类推。

你也可能遇到一些文件权限问题。因为这个起因，f标记（Force）也是很罕用的。咱们能够用一个破折号将多个标记分组，就像这样：

标记有很多形态和大小。依照常规，标记通常有一个简短的模式（例如：-f）和一个残缺的模式（–force）。残缺模式通常应用两个破折号，并应用整个单词而不是单个字母。

让咱们看个其余的例子。早前咱们看到过的 ls 命令，通常应用两个标记调用：

• l标记，也就是long。它将目录内容打印成一个带有元数据的具体列表。
• a标记，也就是all。它将蕴含暗藏文件和目录。

这很大水平上扭转了输入格局：

这里有很多烦人的数据，包含令人琢磨不透的权限字符。然而一些元数据，比方显示文件最初一次更新日期，可是很有用的。

手册

为了理解更多无关命令的内容，你能够应用 man 命令（manual 的缩写）调取它的内置文档。

我要通知你的是，man文档稀稀拉拉，而且常常难以解析。但它对于理解某些命令有哪些标记还是很有用的。

在某些状况下，文件会在你的默认文本编辑器中关上，但通常会在终端中关上，如图所示。这里应用了一个被称为 less 的程序。

要在 less 中滚动文件，请应用上 / 下方向键。在古代版本的 MacOS 上，你也能够应用鼠标滚轮来滚动，只管这在其余平台上可能会导致谬误的行为。

当你实现手册查看后，按 q 退出。它应该会复原到典型的终端视图中。

中断命令

有些过程是长时间不间断运行，如果要进行运行，就须要进行中断。

举例来说，关上终端并尝试运行接下来的命令：ping 8.8.8.8。

ping命令将查看给定 IP 地址的提早状况。它对于查看一个给定的服务器是否在线很有用。8.8.8.8是谷歌 DNS 服务器的 IP 地址。

与咱们到目前为止看到过的命令不同，ping是一个长期运行的过程，它永不停歇。默认状况下，它将始终ping Google 的 DNS 服务器，直到工夫完结。

当咱们对后果感到称心时，咱们能够通过按下 ctrl 和c来中断该命令。即便在 MacOS 上，大多数的快捷键都应用的⌘修饰符，这里咱们也应用ctrl。

另一个很有用的命令是 ctrl + d。这会终止以后的会话。如果ctrl + c 在某些状况下不起作用，ctrl + d可能会起作用。

最初，如果下面的办法都失败了，能够间接敞开以后的 tab 页或者窗口。该形式的快捷键取决于你应用的操作系统以及终端程序。如果是在 MacOS 上应用的 Hyper，敞开以后窗口的快捷键组合是⌘  + w。

退出 Vi / Vim

有的时候，会应用 Vi 或者 Vim 来编辑文件。这些编辑器是出了名的难以退出；ctrl + c在这里可帮不了你。

要在不保留的状况下退出，请遵循以下步骤：

• 按下Escape。
• 按下:，这应该会在终端的底部增加一个提醒。
• 输出q!，并按下回车。

通用开发工作

到目前为止，咱们曾经看到了很多对于如何应用终端做事件的例子。接下来让咱们来看看，如何通过终端实现一些典型的开发工作。

上面的示例假如你曾经在本地装置了 Node.js。如果你还没有装置，你能够从 Node 主页下载安装包进行装置。

治理依赖

假如明天是你下班的第一天。你的团队曾经容许你拜访我的项目的源代码，你曾经把源码下载到了你的电脑上。而后呢？

第一步就是下载我的项目的第三方依赖。

以下是须要遵循的步骤：

cd path/to/project
npm install

npm代表着 Node Package Manager。当你装置 Node.js 时，npm会主动被装置。

运行该命令会从 NPM 仓库下载我的项目所依赖的所有第三方代码。这些代码将存在于本地的 node_modules 目录中。

运行 NPM 脚本

此时，你曾经下载好了第三方的代码，而后呢？

如果你查看我的项目的package.json，你可能会看到这样的一部分配置：

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

这些 scripts 是能够用 NPM 工具运行的工作。它们能够通过运行 npm run [name] 来执行。举个例子，为了启动一个本地开发服务器，咱们会运行：

cd path/to/project
npm run start

运行该命令会启动一个长期运行的过程。它启动了一个 Node 服务器，容许咱们在应用程序上进行开发，监听文件的变动，当咱们编辑文件时，从新进行打包。

当咱们完结开发时，咱们能够应用 ctrl + c 来敞开该服务。

NPM 脚本的美好之处在于它们将事件标准化。start，build，和 test 是这些规范工作的常见名称。因而，咱们不用记住每个我的项目定制的命令，即便这些我的项目应用齐全不同的工具。

咱们也能够创立属于本人的 NPM 脚本。对于此，我会在前面的文章进行具体阐明。

在 IDE 中关上我的项目

当我想在一个我的项目上开始工作时，首先我会在终端导航到我的项目的根目录。而后运行以下命令：

cd path/to/project
code .

咱们在后面提到过，.指的是当前工作目录。code是我的代码编辑器 VS Code 增加的一个命令。运行这个命令能够在我的代码编辑器中关上整个我的项目，让我能够得心应手地在不同的文件之间轻松跳转。

须要留神的是，该命令的运行取决于你的编辑器。而且，对于在 MacOS 上应用 VS Code 的人，你须要做一些工作来启用 code 命令。

重新安装依赖

你晓得对任何电脑问题的规范倡议是重启吗？

该问题的 JavaScript 版本是重新安装 NPM 依赖。有时候，只须要彻底删除并重新安装就能够解决问题。尤其是你会编辑 node_modules 文件并进行调试时。

咱们能够这么做：

cd path/to/project
rm -rf node_modules
npm install

咱们进入到正确的目录后，应用 rm 命令删除所有的第三方代码，而后应用 npm install 重新安装依赖。

应用 Git

尽管有 GUI 应用程序能够应用 Git，但许多开发者更违心应用命令行来实现与 Git 相干的工作。

残缺的 Git 命令行教程远远超出了本文的范畴，但这里有一份我罕用的命令的疾速小抄：

// 下载 Git 仓库到本地
git clone [URL]
// 查看哪些文件被批改
git status -s
// 查看更改
git diff
// 增加所有文件到暂存区
git add .
// 提交暂存的文件
git commit -m "Short descriptive message"
// 创立新的本地分支
git switch -c [new branch name]
// 切换分支
git switch [branch name]
// 推送代码
git push origin [branch name]
// 开启可交互的变基
git rebase -i [branch name or commit hash]

小技巧

多年来，我把握了一些终端小技巧。它们并不重要，但它们有助于改善开发者应用终端的体验。

循环和切换命令

许多终端程序会记录下你在一个特定会话中所运行的每一条命令。你能够应用上键循环查看先前的命令。

如果我明确晓得最近运行过某条命令，通常按几次上键会比从头开始输出更快。

这里还有一个不久前学到的神奇小技巧：- 字符。

假如咱们想用 cd 在两个目录之间来回跳动。咱们能够通过输出整个门路来做到这一点。亦或者应用 cd - 来疾速切换到上一个cd 的目录下。

革除终端

就像清空桌面那样，清空终端能够让人头脑清晰。

有好几种方法能够做到这一点。先来看看 clear 命令，它能够革除所有先前输出的命令，并使它看起来像你刚刚开启一个新的终端会话。

还有一个通用的快捷键，ctrl + L。它与 clear 命令的成果雷同。它应该能在 MacOS、Windows 和 Linux 中工作。

这个命令 / 快捷键是在 Bash/Zsh 中实现的。它是 shell 环境的一部分。这意味着它只在 shell 闲暇时起作用。

某些终端程序也实现了它们本人的快捷键，这些快捷键甚至能够在 shell 忙碌时工作。上面是我所晓得的快捷键的清单：

• 在 MacOS 中，简直所有的shell（Terminal.app、iTerm2、Hyper），快捷键是⌘ + k。
• 如果在非 MacOS 平台应用 Hyper，那么快捷键是ctrl + shift + k。

这些应用程序级的快捷键要好用得多。即便在 shell 忙碌的时候也能够应用它们。

比如说，假如你正在运行一个开发服务器，这是一个长期运行的过程，所以 ctrl + L 的快捷键是不起作用的。当你开发我的项目时，大量的信息会被记录在终端窗口中。应用程序的快捷键容许你革除旧的日志，就像归档旧的电子邮件一样。这真的十分有用，也是古代终端程序如何使咱们更加轻松的绝佳示例。

别名

每隔一段时间，我就会发现自己会反复敲一些命令。如果这个命令又长又简单，每次都要残缺的敲进去，而且要逐字逐句地记住，这就十分烦人。

Bash 和 Zsh 都反对别名，这是一种创立自定义快捷键的办法。比如说，我能够把它设置成每当我输出 hi 时，它就主动运行echo "Hello World!"。

设置别名有点超出了本教程的范畴，而且依据你的 shell 语言，阐明也有点不同。这里有一些更深刻的有用教程：

• Bash 别名
• Zsh 别名

切换到 GUI 文件资源管理器

除非你曾经达到了应用终端的黑带段位，否则有时你会想在 GUI 文件资源管理器中关上工作目录。

在 MacOS 中，open .命令能够做到这一点。

open命令个别用于关上一个文件，就像在 GUI 文件资源管理器中双击一个文件关上它一样。

然而，当咱们试图关上一个目录时，它会抉择弹出一个新的 Finder 窗口，同时显示该目录的内容。

因为点字符 (.) 代表的是当前目录，所以关上 . 容许咱们从终端切换到 Finder，以持续咱们在终端之外的工作。

在 Windows 上，你能够应用 explorer . 来达到同样的目标。

在 Linux 上，只有 Linux 发行版实现了 FreeDesktop 规范，xdg-open就能够用来关上文件，或当前目录。

链式命令

每当我从 Github 上克隆一个新我的项目时，我个别要做两件事：

• npm install，来拉取第三方依赖。
• npm run start，来启动本地开发服务器。

npm install命令通常须要破费几分钟工夫。我没有足够的注意力坐在那里盯着依赖是否下载实现，所以我常常会用 Twitter 来扩散本人的注意力。接下来我晓得的是，20 分钟过来了，我齐全遗记了我要启动一个开发服务器。

咱们能够应用链式命令来解决该问题。以下是它的工作原理：

&&操作符容许咱们将多个命令链接在一起。第一条命令将被执行，即npm install。当它实现的同时，第二个命令将主动运行。

这是一个特地奇妙的技巧，因为 npm run start 通常会关上一个浏览器窗口，吸引我的注意力，让我晓得所有都筹备好了。相比之下，npm install是静默实现的。

一旦我把握了链式命令的诀窍，我就开始到处应用它。我常常会把一堆 Git 命令排列在一起：

git add . && git commit -m "Stuff" && git push origin main

总结

咱们在这篇文章中涵盖了很多内容。心愿你不会感觉到太大的压力。

终端有一个很好的名声，对初学者来说是令人生畏和辣手的。如果你对它感到吃力，那也是齐全失常的。

心愿这篇文章至多能放大你须要学习的范畴。能够应用终端做很多事件，但咱们能够专一某一部分性能。

如果你感觉这篇文章对你有所帮忙，欢送珍藏关注转发~

原文链接：https://www.joshwcomeau.com/javascript/terminal-for-js-devs/#cycling-and-toggling-commands

作者：Joshua Comeau