path: root/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html

---
title: Command line crash course
slug: Learn/Tools_and_testing/Understanding_client-side_tools/Command_line
tags:
  - CLI
  - npm
  - 命令行
  - 学习
  - 客户端
  - 工具
  - 开发者
  - 终端
translation_of: Learn/Tools_and_testing/Understanding_client-side_tools/Command_line
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Tools_and_testing/Understanding_client-side_tools/Overview","Learn/Tools_and_testing/Understanding_client-side_tools/Package_management", "Learn/Tools_and_testing/Understanding_client-side_tools")}}</div>

<p class="summary">在您的开发过程中，您无疑需要在终端上运行一些命令(或者在“命令行”上，它们实际上是相同的)。本文介绍了终端、需要输入的基本命令、如何将命令链接在一起，以及如何添加自己的命令行接口(CLI)工具。</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">先决条件:</th>
   <td>熟悉核心的 <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, 和 <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> 语言。</td>
  </tr>
  <tr>
   <th scope="row">目标:</th>
   <td>要了解什么是终端/命令行，应该学习什么基本命令，以及如何安装新的命令行工具。</td>
  </tr>
 </tbody>
</table>

<h2 id="欢迎使用终端">欢迎使用终端</h2>

<p>终端是一个文本界面，用于执行基于文本的程序。如果您正在运行任何用于web开发的工具，那么几乎可以保证您必须打开命令行并运行一些命令来使用您所选择的工具(您经常会看到这样的工具被称为<strong>CLI工具</strong>命令行接口工具)。</p>

<p>大量的工具可以通过在命令行中输入命令来使用;许多是预先安装在您的系统上的，还有大量其他的可以从包注册表中安装。包注册表类似于应用程序商店，但(主要)用于基于命令行的工具和软件。我们将在本章后面看到如何安装一些工具，在下一章我们将学习更多关于包注册表的知识。</p>

<section id="sect1">
<article>
<section id="sect2">
<p>对命令行最大的一个批评是它在用户体验方面非常缺乏。第一次查看命令行可能是一种令人畏惧的体验:空白屏幕和闪烁的光标，对于要做什么几乎没有明显的帮助。</p>
</section>
</article>
</section>

<section id="sect3">
<article>
<section id="sect4">
<p>表面上看，它们并不受欢迎，但您可以使用它们做很多事情，我们保证，通过一些指导和练习，使用它们会变得更容易!这就是为什么我们提供这一章来帮助你在这个看似不友好的环境中开始。</p>
</section>
</article>
</section>

<h3 id="终端从何而来？">终端从何而来？</h3>

<section id="sect5">
<article>
<section id="sect6">
<p>终端机起源于20世纪五六十年代，它最初的形式与我们今天使用的并不相似(这是我们应该感谢的)。你可以在维基百科的词条中读到一些历史 <a href="https://en.wikipedia.org/wiki/Computer_terminal">Computer Terminal</a>。</p>
</section>
</article>
</section>

<section id="sect7">
<article>
<section id="sect8">
<p>从那时起，终端一直是所有操作系统的一个不变的特征，从台式电脑到隐藏在云中的服务器(它并不是真正的云)，到像树莓PI Zero这样的微型计算机，甚至到移动电话。它提供了对计算机底层文件系统和底层特性的直接访问，因此，如果您知道自己在做什么，它对于快速执行复杂任务非常有用。</p>
</section>
</article>
</section>

<section id="sect9">
<article>
<section id="sect10">
<p>例如，编写一个命令来立即更新数百个文件的标题，例如从ch01-xxxx.png更新到ch02-xxxx.png，这对于自动化也很有用。如果您使用finder或explorer GUI应用程序更新文件名，这将花费您很长时间。</p>
</section>
</article>
</section>

<p>总而言之，终端不会很快消失。</p>

<h3 id="终端像什么呢？">终端像什么呢？</h3>

<section id="sect11">
<article>
<section id="sect12">
<p>下面你可以看到一些不同口味的程序，你可以得到一个终端。</p>
</section>
</article>
</section>

<section id="sect13">
<article>
<section id="sect14">
<p>下面的图片显示了Windows中可用的命令提示，有很多种选项，从“cmd”程序到“powershell”，可以在开始菜单中输入程序名称运行。</p>
</section>
</article>
</section>

<p><img alt="A vanilla windows cmd line window, and a windows powershell window" src="https://mdn.mozillademos.org/files/17183/win-terminals.png" style="border-style: solid; border-width: 1px; display: block; height: 261px; margin: 0px auto; width: 900px;"></p>

<section id="sect15">
<article>
<section id="sect16">
<p>下面是macOS终端应用程序。</p>
</section>
</article>
</section>

<p><img alt="A basic vanilla mac terminal" src="https://mdn.mozillademos.org/files/17180/mac-terminal.png" style="display: block; height: 223px; margin: 0px auto; width: 500px;"></p>

<h3 id="你如何进入终端？">你如何进入终端？</h3>

<p>现在许多开发人员都在使用基于unix的工具(例如，终端，以及你可以通过它访问的工具)。目前web上存在的许多教程和工具都支持(可悲的是假定)基于unix的系统，但不用担心它们在大多数系统上都可用。在本节中，我们将了解如何访问所选系统上的终端。</p>

<h4 id="LinuxUnix">Linux/Unix</h4>

<p>如上所述，Linux / Unix系统默认情况下在应用程序中列出了一个可用的终端。</p>

<h4 id="macOS">macOS</h4>

<section id="sect17">
<article>
<section id="sect18">
<p>macOS有一个名为Darwin的系统，它位于图形用户界面的下方。Darwin是类unix系统，它提供了终端和对底层工具的访问。macOS Darwin在很大程度上与Unix不相上下，当然在阅读本文时不会给我们带来任何担忧。</p>
</section>
</article>
</section>

<section id="sect19"><span>终端可在macOS的“应用程序/实用程序/终端”上使用。</span></section>

<h4 id="Windows">Windows</h4>

<section id="sect20">
<article>
<section id="sect21">
<p>与其他一些编程工具一样，在Windows上使用终端(或命令行)传统上并不像在其他操作系统上那样简单。但情况正在好转。</p>
</section>
</article>
</section>

<section id="sect22">
<article>
<section id="sect23">
<p>很长一段时间以来，Windows一直有自己的名为cmd(命令提示符)的类似于终端的程序，但这显然与Unix命令不同，它相当于老式的Windows DOS提示符。</p>
</section>
</article>
</section>

<section id="sect24">
<article>
<section id="sect25">
<p>更好的程序可以在Windows上提供终端体验，比如Powershell (<a href="https://github.com/PowerShell/PowerShell">see here to find installers</a>), 和 Gitbash (作为一部分 <a href="https://gitforwindows.org/">git for Windows</a> 工具箱)</p>
</section>
</article>
</section>

<section id="sect26">
<article>
<section id="sect27">
<p>然而，在现代，Windows的最佳选择是Windows Linux子系统(WSL)，它是一个兼容层，用于从Windows 10中直接运行Linux操作系统，允许您直接在Windows上运行真正的终端，而不需要虚拟机。</p>
</section>
</article>
</section>

<section id="sect28">
<article>
<section id="sect29">
<p>这可以直接从Windows商店免费安装。在目录中可以找到所需的所有文档 <a href="https://docs.microsoft.com/en-us/windows/wsl">Windows Subsystem for Linux Documentation</a>.</p>
</section>
</article>
</section>

<p><img alt="a screenshot of the windows subsystem for linux documentation" src="https://mdn.mozillademos.org/files/17184/wsl.png" style="border-style: solid; border-width: 1px; display: block; height: 665px; margin: 0px auto; width: 1000px;"></p>

<section id="sect30">
<article>
<section id="sect31">
<p>至于在Windows上选择什么选项，我们强烈建议尝试安装WSL。您可以坚持使用默认的命令提示符(cmd)，许多工具都可以正常工作，但是您会发现，如果与Unix工具具有更好的一致性，那么一切都会变得更容易。</p>
</section>
</article>
</section>

<h4 id="边注：命令行和终端的区别是什么？">边注：命令行和终端的区别是什么？</h4>

<section id="sect32">
<article>
<section id="sect33">
<p>通常你会发现这两个术语可以互换使用。从技术上讲，终端是启动并连接到shell的软件。shell是您的会话和会话环境(提示符和快捷方式等内容可以在其中定制)。命令行是您输入命令并且光标闪烁的文字行。</p>
</section>
</article>
</section>

<h3 id="你必须使用终端吗">你<em>必须</em>使用终端吗</h3>

<section id="sect34">
<article>
<section id="sect35">
<p>尽管命令行提供了大量的工具，但是如果您使用的工具是这样像 <a href="https://code.visualstudio.com/">Visual Studio Code</a></p>

<section id="sect36">
<article>
<section id="sect37">
<p>还有大量的扩展可以作为代理使用终端命令，而不需要直接使用终端。但是，您不会找到一个代码编辑器扩展来满足您想要做的所有事情 — 你最终将会获得一些使用终端的经验。</p>
</section>
</article>
</section>
</section>
</article>
</section>

<h2 id="基本的内置终端命令">基本的内置终端命令</h2>

<section id="sect38">
<article>
<section id="sect39">
<article>
<section id="sect40">
<p>说的够多了，让我们开始看看一些终端命令吧!下面是命令行可以做的一些事情，以及每种情况下相关工具的名称</p>
</section>
</article>
</section>
</article>
</section>

<ul>
 <li>
  <section id="sect41">
  <article>
  <section id="sect42">
  <p>导航计算机的文件系统以及基本级别的任务，如创建、复制、重命名和删除：</p>
  </section>
  </article>
  </section>

  <ul>
   <li>
    <section id="sect43">
    <article>
    <section id="sect44">
    <p>移动您的目录结构 :<span> </span><code>cd</code></p>
    </section>
    </article>
    </section>
   </li>
   <li>建立目录: <code>mkdir</code></li>
   <li>创建文件（修改他们的原数据）: <code>touch</code></li>
   <li>复制文件: <code>cp</code></li>
   <li>移动文件: <code>mv</code></li>
   <li>删除文件或目录: <code>rm</code></li>
  </ul>
 </li>
 <li>下载在特定的url找到的文件: <code>curl</code></li>
 <li>在较大的文件体中寻找特定的片段: <code>grep</code></li>
 <li>主页查看文件的内容: <code>less</code>, <code>cat</code></li>
 <li>操作和转换文本流（例如，讲HTML文件中&lt;div&gt;的所有实例改为&lt;article&gt;）: <code>awk</code>, <code>tr</code>, <code>sed</code></li>
</ul>

<div class="blockIndicator note">
<p>注意:在web上有许多很好的教程深入了解web上的命令行——这只是一个简短的介绍</p>
</div>

<section id="sect45">
<article>
<section id="sect46">
<p>让我们继续，看看在命令行上使用这些工具中的几个。在进一步操作之前，先打开终端程序</p>
</section>
</article>
</section>

<h3 id="在命令行中导航">在命令行中导航</h3>

<section id="sect47">
<article>
<section id="sect48">
<p>当您访问命令行时，您将不可避免地需要导航到一个特定的目录“做一些事情”。所有的操作系统(假设是默认设置)都将在您的“home”目录中启动它们的终端程序，从那里您可能想要移动到另一个地方。</p>
</section>
</article>
</section>

<p> <code>cd</code> 命令允许您更改目录。从技术上讲，cd不是一个程序，而是内置的。这意味着您的操作系统可以开箱即用地提供它，而且您也不会意外地删除它，感谢上帝!您不需要过多地担心某个命令是否是内置的，但是要记住，内置的命令会在所有基于unix的系统上出现。</p>

<section id="sect49">
<article>
<section id="sect50">
<p>要更改目录，请在终端中键入cd，然后输入要移动到的目录。假设该目录在您的主目录中，您可以使用 <code>cd Desktop</code> (请参见下面的屏幕截图).</p>
</section>
</article>
</section>

<p><img alt="results of the cd Desktop command being run in a variety of windows terminals - the terminal location moves into the desktop" src="https://mdn.mozillademos.org/files/17182/win-terminals-cd.png" style="border-style: solid; border-width: 1px; display: block; height: 349px; margin: 0px auto; width: 500px;"></p>

<section id="sect51">
<article>
<section id="sect52">
<p>试着把这个输入到你的系统终端</p>
</section>
</article>
</section>

<pre class="brush: bash notranslate">cd Desktop</pre>

<section id="sect53">
<article>
<section id="sect54">
<p>如果您想回到上一个目录，您可以使用两个点</p>
</section>
</article>
</section>

<pre class="brush: bash notranslate">cd ..</pre>

<div class="blockIndicator note">
<section id="sect55">
<article>
<section id="sect56">
<p><strong>注意</strong>:一个非常有用的终端快捷方式是使用<kbd>tab</kbd> 键自动完成你知道的名字，而不是必须键入整个东西。例如，在键入以上两个命令后，尝试键入 <code>cd D</code> 并按下<kbd>tab</kbd> — 它应该自动完成目录名称 <code>Desktop</code> 对于您，只要它存在于当前目录中。在你前进的过程中记住这一点。</p>
</section>
</article>
</section>
</div>

<p>如果要转到的目录嵌套得很深，则需要知道访问该目录的路径。 当您更加熟悉文件系统的结构时，这通常会变得更容易，但是如果您不确定路径，通常可以使用ls命令（请参见下文）的组合并在其中单击来确定它的路径。 “资源管理器/查找器”窗口可查看目录相对于当前位置的位置。</p>

<section id="sect57">
<article>
<section id="sect58">
<p>例如，如果您想进入一个名为src的目录，该目录位于桌面的一个名为project的目录中，您可以从您的主文件夹键入这三个命令来到达该目录</p>
</section>
</article>
</section>

<pre class="brush: bash notranslate">cd Desktop
cd project
cd src</pre>

<section id="sect59">
<article>
<section id="sect60">
<p>但这只是浪费时间，相反，您可以键入一个命令，用斜杠分隔路径中的不同项，就像在CSS、HTML或JavaScript代码中指定图像或其他资产的路径一样</p>
</section>
</article>
</section>

<pre class="brush: bash notranslate">cd Desktop/project/src</pre>

<section id="sect61">
<article>
<section id="sect62">
<p>例如，请注意，在路径上包含一个前斜线将使路径成为绝对路径 <code>/Users/your-user-name/Desktop</code>. 像我们上面做的那样，省略前导斜杠可以使路径相对于当前的工作目录。这与您在web浏览器中看到的url完全相同。前面的斜杠意味着“在网站的根”，而省略斜杠意味着“这个URL是相对于我当前页面的”。</p>

<section id="sect63"></section>
</section>
</article>
</section>

<div class="blockIndicator note">
<section id="sect64">
<article>
<section id="sect65">
<p><strong>注意</strong>:在windows中，你使用反斜杠而不是正斜杠。<code>cd Desktop\project\src</code> — 他的可能看起来很奇怪，但是如果你感兴趣的话, <a href="https://www.youtube.com/watch?v=5T3IJfBfBmI">watch this YouTube clip</a> 微软的一位主要工程师对此进行了解释。</p>
</section>
</article>
</section>
</div>

<h3 id="列出目录内容">列出目录内容</h3>

<section id="sect66">
<article>
<section id="sect67">
<p>另一个内置的Unix命令是ls (list的缩写)，它列出当前所在目录的内容。注意，这不会工作，如果你使用默认的Windows命令提示符(cmd)，相当于dir。</p>
</section>
</article>
</section>

<section id="sect68">
<article>
<section id="sect69">
<p>现在试着在终端上运行它</p>
</section>
</article>
</section>

<pre class="brush: bash notranslate">ls</pre>

<section id="sect70">
<article>
<section id="sect71">
<p>这提供了当前工作目录中的文件和目录的列表，但这些信息实际上很基本，您只能得到每个项的名称，而不能知道它是文件还是目录，或者其他任何东西。幸运的是，对命令的用法进行一个小小的更改就可以提供更多的信息。</p>
</section>
</article>
</section>

<h3 id="介绍命令选项">介绍命令选项</h3>

<section id="sect72">
<article>
<section id="sect73">
<p>大多数终端命令都有选项，这些选项是您添加到命令末尾的修饰符，它们使命令的行为略有不同。它们通常由命令名后的空格、后接破折号、后接一个或多个字母组成。</p>
</section>
</article>
</section>

<p>例如，试一试看，你能得到什么？</p>

<pre class="brush: bash notranslate">ls -l </pre>

<p>至于 <code>ls</code>, the <code>-l</code> 选项为您提供每行一个文件或目录的清单，并显示更多信息。可以通过查找行最左边的字母“d”来识别目录。这些是我们可以做到的 <code>cd</code> 进入.</p>

<section id="sect74">
<article>
<section id="sect75">
<p>下面是一个屏幕截图，顶部是一个普通的macOS终端，还有一个定制的终端，添加了一些额外的图标和颜色，让它看起来生动，都显示了运行的结果<code>ls -l</code>:</p>
</section>
</article>
</section>

<p><img alt="A vanilla mac terminal and a more colorful custom mac terminal, showing a file listing - the result of running the ls -l command" src="https://mdn.mozillademos.org/files/17181/mac-terminals-ls.png" style="border-style: solid; border-width: 1px; display: block; height: 360px; margin: 0px auto; width: 500px;"></p>

<div class="blockIndicator note">
<section id="sect76">
<article>
<section id="sect77">
<p><strong>注意</strong>:要确切地了解每个命令有哪些可用选项，您可以查看它<a href="https://en.wikipedia.org/wiki/Man_page">man page</a><span>. </span>通过键入<span> </span><code>man</code><span> </span>命令，后跟要查找的命令的名称，例如<code>man ls</code><span>. </span>这将在终端的默认文本文件查看器中打开手册页(例如<span>, </span><code><a href="https://en.wikipedia.org/wiki/Less_(Unix)">less</a></code><span>(在我的终端中)，然后您应该能够使用箭头键或其他类似的机制在页面中滚动。手册页详细地列出了所有选项，一开始可能有点吓人，但至少在需要时您知道它就在那里。一旦您完成了对手册页的查看，您需要使用文本查看器的quit命令退出它</span><span>("q" 在 </span><code>less</code><span>;</span><span>如果不明显，你可能需要在网上搜索才能找到</span><span>).</span></p>
</section>
</article>
</section>
</div>

<div class="blockIndicator note">
<p><strong>注意</strong>:</p>

<section id="sect78">
<article>
<section id="sect79">
<p>要同时运行具有多个选项的命令，通常可以将它们全部放在破折号后面的单个字符串中<code>ls -lah</code>, 或<code>ls -ltrh</code>.尝试在 <code>ls</code> 了解这些额外选项的作用</p>
</section>
</article>
</section>
</div>

<section id="sect80">
<article>
<section id="sect81">
<p>既然我们已经讨论了两个基本命令，那么稍微浏览一下您的目录，看看是否可以从一个位置导航到下一个位置。</p>
</section>
</article>
</section>

<h3 id="创建，复制，移动，删除">创建，复制，移动，删除</h3>

<section id="sect82">
<article>
<section id="sect83">
<p>在使用终端时，您可能会经常使用其他一些基本实用程序命令。它们非常简单，所以我们不会像前一对那样详细地解释它们。</p>
</section>
</article>
</section>

<section id="sect84"></section>

<section id="sect85">
<article>
<section id="sect86">
<p>在您创建的某个地方的测试目录中使用它们，这样您就不会意外地删除任何重要的内容，使用下面的示例命令作为指导</p>
</section>
</article>
</section>

<section id="sect87"></section>

<ul>
 <li><code>mkdir</code> —这将在您所在的当前目录中创建一个新目录，名称是您在命令名之后提供的。例如<code>mkdir my-awesome-website将创建一个新目录叫</code><code>my-awesome-website</code><span>.</span></li>
 <li><code>rmdir</code> —删除指定目录，但仅当它为空时。例如<code>rmdir my-awesome-website</code>
  <section id="sect88">
  <article>
  <section id="sect89">
  <p>将删除我们在上面创建的目录。如果您希望删除一个非空的目录(并删除其中包含的所有内容)，则可以使用<code>-r</code><span> </span><span>选项（递归），但这很危险。 确保以后在目录中不需要任何内容​​，因为它将永远消失。</span></p>
  </section>
  </article>
  </section>
 </li>
 <li><code>touch</code> —在当前目录中创建一个新的空文件。例如<code>touch mdn-example.md</code><span> 创建一个新的空文件叫做</span><span> </span><code>mdn-example.md</code><span>.</span></li>
 <li><code>mv</code> —
  <section id="sect90">
  <article>
  <section id="sect91">
  <p>例如，将文件从第一个指定的文件位置移动到第二个指定的文件位置<code>mdn-example.md mdn-example.txt</code><span>(这些位置被写成文件路径)。此命令移动一个名为</span><code>mdn-example.md</code><span>在当前目录中调用一个文件</span><code>mdn-example.txt</code><span> in the current directory.从技术上讲，文件正在被移动，但是从实际的角度来看，这个命令实际上是在重命名文件。</span></p>
  </section>
  </article>
  </section>
 </li>
 <li><code>cp</code> — 类似于 <code>mv</code>, <code>cp</code>在指定的第一个位置和第二个位置创建文件的副本。例如
  <section id="sect92"><span>, </span><code>cp mdn-example.txt mdn-example.txt.bak<span>创建一个副本</span></code><code>mdn-example.txt</code><span> 叫做 </span><code>mdn-example.txt.bak</code><span>（当然，如果你愿意，你也可以叫它别的名字)。</span></section>
 </li>
 <li><code>rm</code> —删除指定的文件。例如, <code>rm mdn-example.txt</code><span> 删除单个文件叫做 </span><code>mdn-example.txt</code><span>.</span>请注意，此删除是永久性的，不能通过桌面用户界面上的回收站撤消。</li>
</ul>

<div class="blockIndicator note">
<p><strong>注意</strong>: 许多终端命令允许您使用星号作为“通配符”字符，意思是“任何字符序列”。这允许您一次对可能大量的文件运行操作，所有这些文件都匹配指定的模式。作为一个例子<span>, </span><code>rm mdn-*</code><span> </span>将删除所有文件开头<code>mdn-</code><span>. </span><code>rm mdn-*.bak</code><span> </span>会删除所有文件的开头<code>mdn- </code>结束<span> </span><code>.bak</code><span>.</span></p>
</div>

<h2 id="考虑终端有害吗？">考虑终端有害吗？</h2>

<section id="sect93"><span>我们之前提到过这一点，但为了明确起见，您需要小心使用终端。简单的命令不会带来太多危险，但是当您开始将更复杂的命令组合在一起时，您需要仔细考虑该命令将执行什么操作，并在最终在指定的目录中运行它们之前先尝试测试它们。</span></section>

<section id="sect94"></section>

<section id="sect95">
<article>
<section id="sect96">
<p>假设您在一个目录中有1000个文本文件，您想遍历它们，并且只删除文件名中有特定子字符串的文件。如果不小心，可能会删除一些重要的内容，在此过程中丢失大量工作。</p>
</section>
</article>
</section>

<section id="sect97"><span>要养成的一个好习惯是在文本编辑器中编写您的terminal命令，弄清楚您认为它应该是什么样子，然后对目录进行备份，并首先尝试在该备份上运行命令，以测试它。</span></section>

<section id="sect98">
<article>
<section id="sect99">
<p><span>另一个好建议是，如果你不习惯在自己的机器上尝试终端命令，可以在Glitch.com上试试。除了是测试web开发代码的好地方外，这些项目还允许您访问终端，这样您就可以直接在该终端中运行所有这些命令，而且不会破坏您自己的机器。</span></p>
</section>
</article>
</section>

<p><img alt="a double screenshot showing the glitch.com home page, and the glitch terminal emulator" src="https://mdn.mozillademos.org/files/17179/glitch.png" style="height: 848px; width: 900px;"></p>

<section id="sect100">
<article>
<section id="sect101">
<p>快速浏览特定终端命令的一个很好的资源是 <a href="https://tldr.sh/">tldr.sh</a>. 这是一个社区驱动的文档服务，类似于MDN，但特定于终端命令。</p>

<section id="sect102"><span>在下一节中，让我们更进一步(实际上是几个层次)，看看如何在命令行上将工具连接在一起，从而真正了解终端如何优于常规的桌面用户界面。</span></section>
</section>
</article>
</section>

<h2 id="与管道命令连接在一起">与管道命令连接在一起</h2>

<section id="sect103"></section>

<section id="sect104">
<article>
<section id="sect105">
<p>当您开始使用。将命令链接在一起时，终端才真正成为自己的终端 <code>|</code> (pipe) 的象征。让我们看一个简单的例子来说明这意味着什么。</p>
</section>
</article>
</section>

<p>我们已经看了 <code>ls</code>, 它可以输出文件目录：</p>

<pre class="brush: bash notranslate">ls</pre>

<section id="sect106">
<article>
<section id="sect107">
<p>但是如果我们想要快速计算当前目录中的文件和目录的数量会怎样呢<code>ls</code> 不能单独运行</p>
</section>
</article>
</section>

<section id="sect108">
<article>
<section id="sect109">
<p>还有另一个可用的Unix工具，称为<code>wc</code>. 它计算输入到其中的单词、行、字符或字节的数量。这可以是一个文本文件，下面的示例输出其中的行数</p>
</section>
</article>
</section>

<p><code>myfile.txt</code>:</p>

<pre class="brush: bash notranslate">wc -l myfile.txt</pre>

<section id="sect110">
<article>
<section id="sect111">
<p>但是它还可以计算输入到它的输出的行数。例如，下面的命令计算<span class="seoSummary">ls</span>命令输出的行数(如果单独运行，它通常会打印到终端)，并计算到终端的输出</p>
</section>
</article>
</section>

<section id="sect112"></section>

<pre class="brush: bash notranslate">ls | wc -l</pre>

<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">因为</span></font>ls</code> 在自己的行上打印每个文件或目录，这有效地为我们提供了目录和文件计数。</p>

<section id="sect113">
<article>
<section id="sect114">
<p>这是怎么回事?(unix)命令行工具的一般原理是，它们将文本打印到终端(也称为“打印到标准输出”或<code>STDOUT</code>). 很多命令也可以从流输入(称为“标准输入”o)中读取内容<span> </span><code>STDIN</code><span>).</span></p>
</section>
</article>
</section>

<section id="sect115">
<article>
<section id="sect116">
<p>管道操作符可以将这些输入和输出连接在一起，允许我们构建越来越复杂的操作，以满足我们的需要。一个命令的输出可以成为下一个命令的输入。在这种情况下, <code>ls</code> 通常会将其输出到<code>STDOUT</code>, 但是相反 <code>ls</code>输出被制成<code>wc</code>, 它将该输出作为输入，计算它包含的行数，然后将该计数输出到STDOUT。</p>
</section>
</article>
</section>

<h2 id="一个稍微复杂一点的例子">一个稍微复杂一点的例子</h2>

<section id="sect117">
<article>
<section id="sect118">
<p>让我们看一些更复杂的东西。我们将首先尝试获取MDN的“获取”页面的内容 <code>curl</code> 命令(可用于从url请求内容)<a href="https://developer.mozilla.org/en-US/docs/Web/API/fetch" style="">https://developer.mozilla.org/en-US/docs/Web/API/fetch</a><span style="">.</span></p>
</section>
</article>
</section>

<section id="sect119">
<article>
<section id="sect120">
<p>但是，这个URL是页面的旧位置。如果您在一个新的浏览器标签中输入它，您将(最终)被重定向到<a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch" style="">https://developer.mozilla.org/enUS/docs/Web/API/WindowOrWorkerGlobalScope/fetch</a><span style="">.</span></p>
</section>
</article>
</section>

<p>因此，如果您使用curl请求https://developer.mozilla.org/docs/Web/API/fetch，则不会得到输出。 现在就试试：</p>

<pre class="brush: bash notranslate">curl https://developer.mozilla.org/en-US/docs/Web/API/fetch</pre>

<p>我们想精确的告诉 <code>curl</code> 遵循重定向使用<code>-L</code> 标签.</p>

<section id="sect121">
<article>
<section id="sect122">
<p>让我们也看看标题 <code>developer.mozilla.org</code> 返回使用 <code>curl</code>'s <code>-I</code> 标签, 并打印它发送到终端的所有位置重定向，通过管道输出 <code>curl</code> 到<code>grep</code> (我们将要求grep返回包含单词“location”的所有行)。</p>

<p>尝试运行以下代码，您将看到在到达最终页面之前，实际上发生了三次重定向</p>
</section>
</article>
</section>

<pre class="brush: bash notranslate">curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location</pre>

<section id="sect123">
<article>
<section id="sect124">
<p>输出应该是这样的 (<code>curl</code> 首先会输出一些下载计数器之类的东西):</p>
</section>
</article>
</section>

<pre class="brush: bash notranslate">location: /en-US/docs/Web/API/fetch
location: /en-US/docs/Web/API/GlobalFetch/GlobalFetch.fetch()
location: /en-US/docs/Web/API/GlobalFetch/fetch
location: /en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch</pre>

<section id="sect125">
<article>
<section id="sect126">
<p>尽管有些做作，我们可以把这个结果做得更深入一点，并变换 <code>location:</code> 行内容，将基本的起点添加到每个起点的开始，这样我们就可以打印出完整的url。为此，我们将在混合中添加awk(它是一种类似于JavaScript、Ruby或Python的编程语言，只是要老得多!)</p>
</section>
</article>
</section>

<p>尝试运行这个：</p>

<pre class="brush: bash notranslate">curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location | awk '{ print "https://developer.mozilla.org" $2 }'</pre>

<section id="sect127">
<article>
<section id="sect128">
<p>最终的输出应该是这样的</p>
</section>
</article>
</section>

<pre class="brush: bash notranslate">https://developer.mozilla.org/en-US/docs/Web/API/fetch
https://developer.mozilla.org/en-US/docs/Web/API/GlobalFetch/GlobalFetch.fetch()
https://developer.mozilla.org/en-US/docs/Web/API/GlobalFetch/fetch
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch</pre>

<section id="sect129">
<article>
<section id="sect130">
<p>通过组合这些命令，我们定制了输出以显示完整的url，当我们请求时，Mozilla服务器将通过这些url重定向<code>/docs/Web/API/fetch</code> URL.了解您的系统将在未来几年证明是有用的，您将了解这些单一服务工具是如何工作的，以及它们如何成为您解决小众问题的工具库的一部分。</p>
</section>
</article>
</section>

<h2 id="添加工具">添加工具</h2>

<section id="sect131">
<article>
<section id="sect132">
<p>现在我们已经了解了系统自带的一些内置命令，让我们看看如何安装和使用第三方CLI工具。</p>
</section>
</article>
</section>

<section id="sect133">
<article>
<section id="sect134">
<p>目前，用于前端web开发的可安装工具的巨大生态系统主要存在于内部 <a href="https://www.npmjs.com">npm</a>, 与Node.js紧密合作的私有的包托管服务。随着时间的推移，您可以期望看到更多的包提供者。</p>
</section>
</article>
</section>

<p><a href="https://nodejs.org/en/">Installing Node.js</a> 还要安装npm命令行工具(以及一个以npm为中心的补充工具npx)，它提供了安装其他命令行工具的网关。js和npm在所有系统上都能工作:macOS、Windows和Linux。</p>

<section id="sect135">
<article>
<section id="sect136">
<p>现在在您的系统上安装npm，转到上面的URL，下载并运行适合您的操作系统的Node.js安装程序。如果出现提示，请确保将npm作为安装的一部分。</p>
</section>
</article>
</section>

<p><img alt="the node.js installer on windows, showing the option to include npm" src="https://mdn.mozillademos.org/files/17185/npm-install-option.png" style="border-style: solid; border-width: 1px; display: block; height: 469px; margin: 0px auto; width: 600px;"></p>

<section id="sect137">
<article>
<section id="sect138">
<p>尽管我们将在下一篇文章中讨论许多不同的工具，但我们将继续深入研究 <a href="https://prettier.io/">Prettier</a>. Prettier是一种固执己见的代码格式化程序，它只有“很少的选择”。更少的选择往往意味着更简单。考虑到工具在复杂性方面有时会失控，“很少的选项”可能非常有吸引力。</p>
</section>
</article>
</section>

<h3 id="在哪里下载我们的CLI工具？">在哪里下载我们的CLI工具？</h3>

<section id="sect139">
<article>
<section id="sect140">
<p>在开始安装Prettier之前，有一个问题需要回答：“我们应该安装到哪里?”</p>
</section>
</article>
</section>

<p>用<code>npm</code> 我们可以选择在全局安装工具，因此我们可以在任何地方或本地访问当前项目目录。</p>

<p>每种方式各有利弊 — 而这张全局安装的利弊清单还远远不够详尽：</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">
    <section id="sect141">
    <article>
    <p>全局安装的优点</p>
    </article>
    </section>
   </th>
   <th scope="col">全局安装的缺点</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>
    <section id="sect142">
    <article>
    <p>任何地方在您的终端</p>
    </article>
    </section>
   </td>
   <td>可能与您项目的代码库不兼容</td>
  </tr>
  <tr>
   <td>只下载一次</td>
   <td>
    <section id="sect143">
    <article>
    <section id="sect144">
    <p>您团队中的其他开发人员无法使用这些工具，例如，如果您通过git这样的工具共享代码仓库。</p>
    </section>
    </article>
    </section>
   </td>
  </tr>
  <tr>
   <td>
    <section id="sect145">
    <article>
    <p>使用较少的磁盘空间</p>
    </article>
    </section>
   </td>
   <td>
    <section id="sect146">
    <article>
    <section id="sect147">
    <p>与前一点相关的是，它使得项目代码更难复制(如果您在本地安装工具，可以将它们设置为依赖项并使用npm进行安装(<code style="">npm install</code><span style="">).</span></p>
    </section>
    </article>
    </section>
   </td>
  </tr>
  <tr>
   <td>
    <section id="sect148">
    <article>
    <section id="sect149">
    <p>总是相同的版本</p>
    </section>
    </article>
    </section>
   </td>
   <td></td>
  </tr>
  <tr>
   <td>
    <section id="sect150">
    <article>
    <section id="sect151">
    <p>就像任何其他unix命令</p>
    </section>
    </article>
    </section>
   </td>
   <td></td>
  </tr>
 </tbody>
</table>

<section id="sect152">
<article>
<section id="sect153">
<p>尽管缺点清单比较短，但是全局安装的负面影响可能要比好处大得多。然而，现在我们宁可追求简单，而采用全局安装来保持简单。在下一篇文章中，我们将进一步了解本地安装以及它们的优点。</p>
</section>
</article>
</section>

<h3 id="下载_Prettier">下载 Prettier</h3>

<section id="sect154">
<article>
<section id="sect155">
<p>对于本文，我们将安装Prettier作为全局命令行实用程序。</p>
</section>
</article>
</section>

<section id="sect156">
<article>
<section id="sect157">
<p>Prettier是一款专门为前端开发人员设计的代码格式化工具，专注于基于javascript的语言，并增加了对HTML、CSS、SCSS、JSON等的支持。Prettier 能够:</p>
</section>
</article>
</section>

<ul>
 <li>
  <section id="sect158"><span style="">省去了在所有代码文件中手动保持样式一致的认知开销;Prettier可以自动为您完成此操作。</span></section>
 </li>
 <li>帮助Web新手以最佳方式完成他们的代码.</li>
 <li>安装在任何操作系统上，甚至直接作为项目工具的一部分，以确保从事您的代码工作的同事和朋友使用您正在使用的代码风格。</li>
 <li>
  <section id="sect159">
  <article>
  <section id="sect160">
  <p>配置为在保存时运行、在键入时运行，甚至在发布代码之前运行(使用稍后将在模块中看到的其他工具）。</p>
  </section>
  </article>
  </section>
 </li>
</ul>

<section id="sect161">
<article>
<section id="sect162">
<p>安装node之后，打开终端并运行以下命令来安装prettier程序：</p>
</section>
</article>
</section>

<pre class="brush: bash notranslate">npm install --global prettier</pre>

<p>命令运行完成后，Prettier工具现在可以在终端中的文件系统中的任何位置使用。</p>

<section id="sect163">
<article>
<section id="sect164">
<p>与许多其他命令一样，不带任何参数运行该命令将提供用法和帮助信息。现在试试这个</p>
</section>
</article>
</section>

<pre class="brush: bash notranslate">prettier</pre>

<section id="sect165">
<article>
<section id="sect166">
<p>输出应该是这样的</p>
</section>
</article>
</section>

<pre class="brush: bash notranslate">Usage: prettier [options] [file/dir/glob ...]

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

…</pre>

<section id="sect167">
<article>
<section id="sect168">
<p>即使它很长，至少浏览一下使用信息也是值得的。它将帮助您更好地理解如何使用该工具。</p>
</section>
</article>
</section>

<h3 id="尝试_Prettier">尝试 Prettier</h3>

<section id="sect169">
<article>
<section id="sect170">
<p>让我们快速演示一下Prettier，这样您就可以看到它是如何工作的。</p>
</section>
</article>
</section>

<section id="sect171"></section>

<section id="sect172">
<article>
<section id="sect173">
<p>首先，在文件系统中容易找到的地方创建一个新目录。可能是一个叫做<code>prettier-test</code> 在你的 <code>Desktop</code>.</p>

<p>现在将以下代码保存在一个名为<code>index.js</code>, 在测试目录中:</p>
</section>
</article>
</section>

<pre class="brush: js notranslate">const myObj = {
a:1,b:{c:2}}
function printMe(obj){console.log(obj.b.c)}
printMe(myObj)</pre>

<section id="sect174">
<article>
<section id="sect175">
<p>我们可以在代码基上运行得更好，以检查我们的代码是否需要调整。cd到您的目录中，并尝试运行此命令：</p>
</section>
</article>
</section>

<pre class="brush: bash notranslate">prettier --check index.js</pre>

<section id="sect176">
<article>
<section id="sect177">
<p>你的产出应该是：</p>
</section>
</article>
</section>

<pre class="brush: bash notranslate">Checking formatting...
index.js
Code style issues found in the above file(s). Forgot to run Prettier?</pre>

<section id="sect178">
<article>
<section id="sect179">
<p>有些代码样式是可以修改的。没有问题。添加 <code>--write</code> option to the prettier命令将修复这些问题，让我们专注于实际编写有用的代码。</p>
</section>
</article>
</section>

<section id="sect180">
<article>
<section id="sect181">
<p>现在尝试运行这个版本的命令：</p>
</section>
</article>
</section>

<pre class="brush: bash notranslate">prettier --write index.js</pre>

<p>你可能得到这样的输出：</p>

<pre class="brush: bash notranslate">Checking formatting...
index.js
Code style issues fixed in the above file(s).</pre>

<section id="sect182">
<article>
<section id="sect183">
<p>但更重要的是，如果你回头看你的JavaScript文件，你会发现它被重新格式化成这样：</p>
</section>
</article>
</section>

<pre class="brush: js notranslate">const myObj = {
  a: 1,
  b: { c: 2 },
};
function printMe(obj) {
  console.log(obj.b.c);
}
printMe(myObj);</pre>

<section id="sect184">
<article>
<section id="sect185">
<p>根据您的工作流(或您选择的工作流)，您可以将其作为流程的自动化部分。自动化确实是工具的优势所在;我们的个人偏好是那种无需配置任何东西就能“自动发生”的自动化。</p>
</section>
</article>
</section>

<section id="sect186">
<article>
<section id="sect187">
<p>使用Prettier有许多实现自动化的方法，尽管它们超出了本文的范围，但是有一些很好的在线资源可以提供帮助(已经链接到其中一些)。您可以调用更漂亮的：</p>
</section>
</article>
</section>

<ul>
 <li>
  <section id="sect188">
  <article>
  <section id="sect189">
  <p>在将代码提交到git存储库之前，使用<a href="https://github.com/typicode/husky" style="">Husky</a><span style="">.</span></p>
  </section>
  </article>
  </section>
 </li>
 <li>
  <section id="sect190">
  <article>
  <section id="sect191">
  <p>当你在代码编辑器中点击“保存”的时候，无论是<a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" style="">VS Code</a><span style="">, </span><a href="https://atom.io/packages/prettier-atom" style="">Atom</a><span style="">, 或</span><a href="https://packagecontrol.io/packages/JsPrettier" style="">Sublime Text</a><span style="">.</span></p>
  </section>
  </article>
  </section>
 </li>
 <li>
  <section id="sect192">
  <article>
  <section id="sect193">
  <p>作为持续集成检查的一部分，可以使用以下工具<a href="https://github.com/features/actions" style="">Github Actions</a><span style="">.</span></p>
  </section>
  </article>
  </section>
 </li>
</ul>

<section id="sect194">
<article>
<section id="sect195">
<p>我们个人的偏好是第二个当使用say VS代码时，Prettier会启动并清理每次我们点击保存时需要做的格式化。关于以不同方式使用Prettier，您可以在 <a href="https://prettier.io/docs/en/">Prettier docs</a>.</p>
</section>
</article>
</section>

<h2 id="尝试其他的工具">尝试其他的工具</h2>

<section id="sect196">
<article>
<section id="sect197">
<p>如果你想尝试更多的工具，这里有一个简短的列表，很有趣的尝试：</p>
</section>
</article>
</section>

<section id="sect198"></section>

<ul>
 <li><code><a href="https://github.com/sharkdp/bat">bat</a></code> — 一个更好的 <code>cat</code> (<code>cat</code> 用于打印文件内容）。</li>
 <li><code><a href="http://denilson.sa.nom.br/prettyping/">prettyping</a></code> — <code>ping</code>在命令行上，但是是可视化的(ping是检查服务器是否有响应的有用工具)。</li>
 <li><code><a href="http://hisham.hm/htop/">htop</a></code> —进程查看器，当某些东西使您的CPU风扇的行为像一个喷气发动机，并且您想要识别出错的程序时，它非常有用。</li>
 <li><code><a href="https://tldr.sh/#installation">tldr</a></code> —在本章前面提到的，但是可以作为命令行工具使用。</li>
</ul>

<section id="sect199">
<article>
<section id="sect200">
<p>注意，上面的一些建议可能需要使用npm进行安装，就像我们使用Prettier所做的那样。</p>
</section>
</article>
</section>

<h2 id="总结">总结</h2>

<p>这使我们结束了对终端/命令行的简短浏览。 接下来，我们将更详细地介绍软件包管理器，以及如何使用它们。</p>

<p>{{PreviousMenuNext("Learn/Tools_and_testing/Understanding_client-side_tools/Overview","Learn/Tools_and_testing/Understanding_client-side_tools/Package_management", "Learn/Tools_and_testing/Understanding_client-side_tools")}}</p>

<h2 id="In_this_module">In this module</h2>

<ul>
 <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Client-side tooling overview</a></li>
 <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">Command line crash course</a></li>
 <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a></li>
 <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">Introducing a complete toolchain</a></li>
 <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Deploying our app</a></li>
</ul>