前言

诸如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/projectnpm 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/projectnpm run start

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

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

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

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

在IDE中关上我的项目

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

cd path/to/projectcode .

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

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

重新安装依赖

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

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

咱们能够这么做：

cd path/to/projectrm -rf node_modulesnpm 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