前言React、Angular、Vue等现代前端框架都非常依赖终端。如果您不习惯使用命令行界面，您将很难运行本地开发服务器或构建您的应用程序。具有讽刺意味的是，我们的整个工作都基于GUI，但我们在开发中使用的大多数工具都是基于命令行的。除非你有计算机科学背景，或者在80年代使用计算机长大，否则你很可能不会有很多终端经验。但是，大多数在线资源都假定您已经非常精通此操作。成为终端大亨需要多年的实践，但好消息是：我们可以走捷径。我们真的不需要知道我们可以用终端做的大部分事情。如果我们专注于最重要的关键基础知识，我们应该能够在很短的时间内适应命令行。?这也是本文要介绍的。这是一本使用React等现代JS框架所需的终端基础知识手册，因此您可以继续学习有趣的东西：构建用户界面。我还将分享我从终端获得的提示和技巧，我希望在我刚开始工作时有人告诉我这些提示和技巧。准备工作已经完成，在开始之前，我们还需要做两件事。首先，我们需要一些终端软件。终端软件是运行命令行环境的应用程序。几乎每个操作系统都会有一个内置终端，例如MacOS的Terminal.app或Windows的命令提示符，这些应用程序都可以使用，但都不是很令人满意。大多数开发人员会选择使用其他软件。只要您使用的是现代技术，选择使用哪个终端应用程序并不重要。所以在这里我有两个主要建议：Hyper。Hyper是一个现代的多平台终端应用程序。它外观漂亮，并具有一些时髦的功能，例如分成多个窗口。如果你使用VSCode作为你的代码编辑器，VSCode已经内置了一个强大的现代终端。这很棒，意味着代码和终端可以在一个应用程序中并行运行。您可以通过选择“查看”→“终端”在VSCode中打开一个终端。在本文中，我将使用Hyper来展示所有示例。至此，终端应用的选择才完成了一半。我们还需要确保我们运行的是正确的shell语言。当我们在终端输入一条命令并回车后，该命令会通过shell语言进行解释和执行。它本质上是一个在终端应用程序中运行的环境。最流行的shell语言是Bash。当您在网上看到命令行说明时，它们很可能是基于Bash的。这是大多数Linux发行版使用的默认shell语言。现代MacOS版本附带Zsh而不是Bash。但是Zsh与Bash非常相似：它们属于同一个家族并且共享几乎所有相同的命令。出于目的，它们可以互换使用。如果您使用的是Linux或MacOS，是时候开始了。您的计算机已经在使用“行业标准”shell语言。但是，如果您使用的是Windows，我们还有一些工作要做。一个生动的比喻你是否曾在浏览器中打开开发者控制台来运行一些任意的JavaScript代码？在本例中，应用程序是Chrome，语言是JavaScript。Chrome提供了一个命令行界面，但是当我们运行命令时，这些命令是用JavaScript解释的。在终端方面也是如此。像Hyper这样的终端应用程序可能正在运行Bashshell语言。与浏览器不同，终端应用程序可以在多种shell语言之间切换。Windows设置首先，我需要承认我不是Windows开发方面的专业人士。请对我接下来所说的一切持保留态度。Bash是一种基于Linux的shell语言，不能在Windows上本地运行。幸运的是，较新版本的Windows能够像应用程序一样安装和运行Linux。这称为Linux的Windows子系统，通常缩写为WSL。下面是一个教程，其中介绍了所需的步骤：HowtoinstallanduseZshonWindows。我自己运行了这些步骤，虽然有点乏味，但它奏效了！设置完成后，您可以将终端配置为使用Bash或Zsh。下面介绍配置Hyper以使用Zsh。如果您在执行这些步骤时遇到问题，可以尝试以下一些其他解决方案。一种流行的方法是GitBash，它允许您使用仿真在Windows中运行Bash。归根结底，你怎么做并不重要。能够在Windows中使用Bash或Zsh很重要。HelloWorld当您第一次打开终端应用程序时，迎接您的是这个相当无用的界面：您的终端可能看起来有点不同，具体取决于您使用的操作系统、终端应用程序和shell语言。总的来说，您可能会看到一行文本和一堆空白。这行文本称为提示。之所以称为“提示”，是因为它在等待您的某种指示。对于我们的第一个命令，输入文本echo"helloworld"并回车：语法略有不同，但您可以将命令视为内置的JavaScript函数。echo命令与JavaScript中的console.log函数非常相似。与函数一样，命令也可以接受参数。在此示例中，echo接受一个参数并输出一个字符串。当我们按下回车键时，命令会立即执行并打印出值。下一行显示一个新提示，让我们知道它已准备好执行下一个命令。就这样，您已经成功运行了第一个终端命令。跳过$在阅读NPM包的安装说明时，你经常会看到这样的内容：$npminstallsome-package如果你尝试运行这段文字，你会得到一个错误。这是因为不应包括美元符号($)。您应该在美元符号后键入所有内容。为什么安装说明包含一个实际上不是命令一部分的随机符号？那么，在Bashshell语言中，$就是提示符，显示在提示符的末尾。它本质上是一个符号，上面写着：嘿，这是要在终端中运行的东西！虽然在很多现代的shell语言（比如Zsh）中，$实际上并没有被用作提示符，但是它的象征意义还是存在的，比如软盘形状的保存图标，虽然我们没有用过floppy几十年的磁盘。导航终端的主要目的是使您能够在文件系统中移动文件并打开/运行东西。它本质上是我们每天使用的GUI文件浏览器（如Finder、Windows资源管理器）的基于文本的版本。为了帮助我们在各个方向导航，可以使用许多终端命令。让我们探讨其中的一些。pwd命令代表打印工作目录，有点像购物中心地图上的“你在这里”箭头。它会告诉您您所在的位置：当您打开终端应用程序时，您通常会进入“主”目录，其中包含文档和桌面目录。在我的机器上，这个目录位于/Users/joshu。使用ls（List的缩写）命令可以查看当前目录的内容：在我的终端上，目录以粗体显示并以浅色显示。单个文件具有正常文本重量并以白色显示。我们可以使用cd（更改目录）命令在文件系统中移动：这相当于在GUI文件资源管理器中双击“stuff”目录。请注意，提示符已从波浪号(~)更改为“stuff”。在Zshshell语言中，默认的提示符由一个箭头和当前目录的名称组成，例如“→Documents”。等一下，为什么前面是波浪号而不是父目录的名字？在MacOS和Linux上，波浪号是用户主目录的缩写。在我的机器上，“~”相当于“/Users/joshu”。很容易将“~”误认为提示符，如“$”在巴什。如果我想返回上一级，回到主目录怎么办？我也可以使用cd命令来达到目的，但是有两个点(..)。在大多数shell语言中，点字符(.)具有特殊含义：点(.)表示当前目录。两个点(..)表示父目录。如果你在JavaScript中使用过模块系统，你可能已经熟悉这个约定。它使用相同的表示法，父目录有两个点：import{COLORS}from'../../constants';从'../Button'导入按钮；关于cd命令，有一件重要的事情需要知道。即cd可以接收复杂的路径。Terminal的初学者倾向于像在GUI文件资源管理器中那样一步一步来：这样做很好，但需要做很多额外的工作。我们可以一步完成相同的路径跳转，如下所示：Tab自动完成关于终端的最令人生畏的事情之一是它不会给你任何线索或提示。使用GUI文件资源管理器，您可以看到文件和文件夹的完整列表，以刷新您的记忆并帮助您找到您要查找的内容。如果你想像我建议的那样使用CD并快速地从一个地方跳到另一个地方，看起来你可能需要一个过目不忘的记忆。除非您记住路径链中每个目录的确切名称，否则您不能这样做，对吧？幸运的是，一个非常方便的技巧可以使这变得容易得多：tab补全。有效使用终端时，Tab键至关重要。除了此处显示的导航技巧外，我们还可以使用Tab键自动完成Git分支，或完成命令的其余部分。尝试在不同情况下按Tab键，看看会发生什么。可视化自动补全如果你觉得Tab自动补全很难掌握，你可能会对图1感兴趣。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标志，它很长。它将目录内容打印为带有元数据的详细列表。一面旗帜，仅此而已。它将包含隐藏的文件和目录。这大大改变了输出格式：有很多烦人的数据，包括模糊的权限字符。但是一些元数据，例如显示文件的最后更新日期，可能非常有用。手册要了解有关命令的更多信息，您可以使用man命令（手册的缩写）访问其内置文档。我要告诉您的是，man文档非常密集，而且通常难以解析。但它对于了解某些命令具有哪些标志仍然很有用。在某些情况下，文件将在您的默认文本编辑器中打开，但通常它会在终端中打开，如图所示。这里使用了一个名为less的程序。要以更少的方式滚动浏览文件，请使用向上/向下箭头键。在现代版本的MacOS上，您还可以使用鼠标滚轮进行滚动，尽管这可能会导致在其他平台上出现错误行为。查看完手册后，按q退出。它应该恢复到典型的终端视图。中断命令有些进程会长时间连续运行。如果他们想停止跑步，他们需要被打断。例如，打开终端并尝试运行以下命令：ping8.8.8.8。ping命令将检查给定IP地址的延迟。它对于检查给定服务器是否在线很有用。8.8.8.8是GoogleDNS服务器的IP地址。与我们目前看到的命令不同，ping是一个永不停止的长期运行过程。默认情况下，它会一直ping谷歌的DNS服务器，直到时间结束。当我们对结果满意时，我们可以通过按ctrl和c来中断命令。即使在MacOS上，大多数快捷键都使用?修饰符，这里我们也使用ctrl。另一个非常有用的命令是ctrl+d。这将终止当前会话。如果ctrl+c在某些情况下不起作用，则ctrl+d可能会起作用。最后，如果以上方法都失败了，可以直接关闭当前标签页或窗口。此方法的快捷键取决于您的操作系统和终端程序。如果您在MacOS上使用Hyper，则关闭当前窗口的快捷键组合是?+w。退出Vi/Vim有时，您会使用Vi或Vim来编辑文件。这些编辑是出了名的难以戒掉；ctrl+c在这里帮不了你。要不保存退出，请执行以下步骤：按Escape。按:，这应该会在终端底部添加一个提示。输入q！然后按Enter。常见的开发任务到目前为止，我们已经看到了很多关于如何使用终端做事的例子。我们来看看如何通过终端完成一些典型的开发任务。下面的示例假设您在本地安装了Node.js。如果还没有安装，可以到Node主页下载安装包进行安装。管理依赖关系假定今天是您上班的第一天。您的团队已授予您访问项目源代码的权限，并且您已将源代码下载到您的计算机上。然后呢？第一步是下载项目的第三方依赖。以下是要遵循的步骤：cdpath/to/projectnpminstallnpm代表节点包管理器。安装Node.js时会自动安装npm。运行此命令将从NPM存储库下载项目依赖的所有第三方代码。这些代码将位于本地的node_modules目录中。运行npm脚本此时，你已经下载了第三方代码，然后呢？如果你查看项目的package.json，你可能会看到这样的配置的一部分：{"scripts":{"start":"react-scriptsstart","build":"react-scriptsbuild","test":"react-scriptstest","eject":"react-scriptseject"}}这些脚本是可以用NPM工具运行的任务。它们可以通过运行npmrun[name]来执行。例如，要启动本地开发服务器，我们将运行：cdpath/to/projectnpmrunstart运行此命令将启动一个长时间运行的进程。它启动一个Node服务器，允许我们在应用程序上进行开发，监听文件更改，并在我们编辑文件时重新打包。当我们完成开发后，我们可以使用ctrl+c关闭服务。npm脚本的美妙之处在于它们将事物标准化。开始、构建和测试是这些标准任务的通用名称。因此我们不必记住每个项目的自定义命令，即使这些项目使用完全不同的工具。我们也可以创建自己的NPM脚本。关于这一点，我会在后面的文章中详细阐述。在IDE中打开项目当我想开始处理一个项目时，我首先在终端中导航到该项目的根目录。然后运行以下命令：cdpath/to/projectcode。正如我们之前提到的，.指的是当前工作目录。code是添加到我的代码编辑器VSCode中的命令。运行此命令会在我的代码编辑器中打开整个项目，让我可以根据需要轻松地在不同文件之间跳转。请注意，此命令的操作取决于您的编辑器。此外，对于在MacOS上使用VSCode的人，您需要做一些工作来启用代码命令。重新安装依赖项您知道对于任何计算机问题的标准建议是重新启动吗？javascript版本的问题是重新安装npm依赖项。有时，只需完全删除并重新安装即可解决问题。特别是如果您将编辑node_modules文件并进行调试。我们可以这样做：cdpath/to/projectrm-rfnode_modulesnpminstall我们进入正确的目录后，使用rm命令删除所有第三方代码，然后使用npminstall重新安装依赖。使用Git虽然有用于使用Git的GUI应用程序，但许多开发人员更喜欢使用命令行来完成与Git相关的任务。完整的Git命令行教程远远超出了本文的范围，但这里是我使用的命令的快速备忘单：//在本地下载Git存储库gitclone[URL]//检查哪些文件已被修改gitstatus-s//查看变化gitdiff//将所有文件添加到暂存区gitadd.//提交临时文件gitcommit-m"简短的描述信息"//新建一个本地分支gitswitch-c[新分支名]//切换分支gitswitch[分支名称]//推送代码gitpushorigin[分支名称]//打开交互式rebasegitrebase-i[分支名称或commithash]tips这些年来，我掌握了一些终端技巧.它们并不重要，但它们有助于改善终端的开发人员体验。循环和切换命令许多终端程序都会记录您在特定会话中运行的每个命令。您可以使用向上键循环浏览之前的命令。如果我确定我最近运行过一个命令，那么按几次向上键通常比重新开始输入要快。这是我不久前学到的另一个惊人的小技巧：-字符。假设我们想在两个目录之间来回切换。我们可以通过键入整个路径来做到这一点。或者使用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都支持别名，这是一种创建自定义快捷方式的方法。比如我可以设置它自动回显“HelloWorld!”每当我打招呼。设置别名有点超出本教程的范围，并且说明会根据您的shell语言而有所不同。这里有一些更深入有用的教程：Bash别名Zsh别名切换到GUI文件资源管理器除非您已经达到使用终端的黑带水平，否则有时您会想在GUI文件资源管理器中打开您的工作目录。在MacOS中，打开.命令执行此操作。open命令一般用于打开一个文件，就像在GUI文件资源管理器中双击一个文件打开它一样。然而，当我们试图打开一个目录时，它选择弹出一个新的Finder窗口显示该目录的内容。由于点字符(.)代表当前目录，打开.允许我们从终端切换到Finder以在终端外继续我们的工作。在Windows上，您可以使用资源管理器。为了同样的目的。在Linux上，xdg-open可用于打开文件或当前目录，只要Linux发行版实现了FreeDesktop标准。链式命令每当我从Github克隆一个新项目时，我通常会做两件事：npminstall以拉取第三方依赖项。npmrunstart启动本地开发服务器。npminstall命令通常需要几分钟。我没有足够的注意力坐下来查看依赖项是否已下载，所以我经常使用Twitter来分散自己的注意力。接下来我知道，20分钟过去了，我完全忘记了我正在启动一个开发服务器。我们可以使用链式命令来解决这个问题。它是这样工作的：&&运算符允许我们将多个命令链接在一起。第一个命令将被执行，npminstall。完成后，第二个命令将自动运行。这是一个特别巧妙的技巧，因为npmrunstart通常会打开一个吸引我注意力的浏览器窗口，让我知道一切都已准备就绪。相比之下，npminstall是静默完成的。一旦我掌握了链接命令的窍门，我就开始到处使用它。我经常会列出一堆Git命令：gitadd。&&gitcommit-m"Stuff"&&gitpushoriginmain总而言之，我们在这篇文章中介绍了很多内容。希望你不要感到太大的压力。终端因对初学者来说令人生畏和棘手而享有盛誉。如果你为此而挣扎，那是完全正常的。希望这篇文章至少缩小了您需要学习的范围。终端可以做的事情有很多，但是我们可以专注于某个部分的功能。如果您觉得本文对您有帮助，请收藏、关注和转发哦~
