Logo

菜单

发布于 2026-01-06 0 阅读
0

macOS 终端 Web 开发人员终极指南 DEV 全球展示挑战赛，由 Mux 呈现：展示你的项目！

面向网页开发者的 macOS 终端终极指南

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

学习网页开发时，你很可能会遇到坚持使用终端的人。同样，你自己也未必会遇到需要使用终端的情况。

如今，许多与 Web 开发相关的任务，例如安装代码包或将代码上传到 GitHub，都可以使用Visual Studio Code等图形化工具完成。对于新手 Web 开发人员来说，学习终端是否值得呢？

答案是肯定的！

虽然终端机一开始可能会让人望而生畏，但我认为它是提高工作效率的最佳工具之一（而且还能让你看起来相当时尚）。

在这份✨终极✨指南中，你将了解足够多的航站楼知识，足以让你变得危险。

也就是说，如果你所说的“危险”是指能够运行基本命令和处理文件的话😄。

既然我相信看完本教程后你会花更多时间在终端上，那么我还会向你展示如何将 Mac 自带的普通终端变成如下截图所示的界面：

让你的终端不再平淡无奇、枯燥乏味，而是每次打开它去应对艰巨任务时都能让你感到愉悦的工具。

我为什么需要终端？

学习使用终端将使您能够更快地完成您已经执行的任务（例如浏览文件和文件夹），并解锁新的功能，从而提高您的工作效率：

  • 使用npm安装和管理软件包
  • 使用 npm 配置和运行脚本，例如webpack。
  • 使用npx下载和配置模板，例如create-react-app
  • 解锁 GitHub Desktop 中不可用的高级 Git 命令
  • 使用ngrok在本地计算机上托管网站
  • 运行部署脚本
  • 使用SSH安全地连接到托管您网站的服务器。
  • 使用Docker等工具。
  • 将多个终端命令组合成.sh 脚本，从而提高您的工作效率。
  • 全面提升对 Mac 的控制能力

由于 macOS 内置了终端应用程序，您无需费力即可打开命令提示符：

macOS 内置终端

然而，从一开始就用更强大的工具替换 macOS 终端是个好主意。
让我们一起来探讨一下你的选择。

选择并安装终端应用程序

2022年，终端应用程序种类繁多，各有特色。

5款时尚终端

  1. 终端
  2. iTerm
  3. 超级
  4. 猫咪
  5. 经

我鼓励您以后有机会探索这些选项，看看哪个更适合您。不过，在本教程中，我们将使用 iTerm。

练习：从这里安装最新版本的iTerm 。

ℹ️ 内置终端 vs. iTerm？ iTerm 可定制性更强，并且具有分屏等便捷功能。

前端开发人员终端指南

现在你已经安装了iTerm，让我们来学习一些基本命令。
什么是命令？

在终端中，您可以使用文本命令计算机执行操作。

这并非什么新鲜事，你肯定以前也用按钮命令过电脑做事情（删除文件、关机等等！）

终端乍一看可能有点复杂和令人困惑，但请放心，从网站复制和粘贴命令的功能，再加上命令行提供的强大功能和灵活性，使得学习终端非常值得。

运行你的第一个命令

让我们从基础开始，从 Dock 栏（如果有的话）打开 iTerm，或者按 ⌘+空格键并输入“iTerm”：

macOS 内置终端

从这里，我们可以命令计算机执行各种操作！

练习date：输入命令并按回车键，让电脑告诉你今天的日期⏎：

date 命令输出当前日期。截屏时，

以下是一些您可以尝试的其他命令。请放心，它们不会造成任何破坏：

  • uptime告诉你你的Mac已经开机多久了
  • say hello让你的 Mac 用电脑合成的声音说“你好”（请确保你的音量已打开🔊）
  • open http://scrimba.com它会在默认浏览器中打开您指定的任何网站。
  • top它会显示正在运行的程序列表（甚至包括隐藏的程序），类似于“活动监视器”应用。
  • expr 100 + 100进行快速数学运算
  • clear清除终端，使其恢复干净整洁（您也可以按Control+L）。

太棒了，不是吗？

下一节，我们来看看如何使用终端来浏览和处理文件。

处理文件和文件夹

提醒一下，Mac 通过目录（文件夹）来组织文件。

目录是一种特殊类型的文件，它可以包含其他文件和目录。目录用于组织文件，以便于查找。

这并非什么新概念。你每天都能在 Finder 中体验到它：

即使你以前没用过终端，但其基本原理与你以前可能用过的图形化 Finder 应用程序相同。

在 Finder 中，你一次只能查看一个目录，用行话来说，就是你的工作目录。

练习：要在终端中查看当前工作目录，请运行pwd（print working directory）：

pwd 命令的实际应用。在本例中，它输出 /Users/booker。

ℹ️ PWD 是什么意思？ PWD 代表打印工作目录 ( Print Working Directory)。在终端术语中，打印到终端意味着在终端中显示某些内容。虽然终端命令听起来常常令人费解，但它们有时是首字母缩写词或简称，这使得它们易于记忆和回忆。

接下来，尝试运行以下命令ls来查看（列出）当前工作目录中的所有目录：

ls 命令以垂直列表的形式输出所有文件名。

如果你的输出结果看起来完全不同，也不用担心。毕竟，我们用的是不同的电脑！

出行

在 Finder 中，您可以使用鼠标进行导航。

在终端中，您可以使用cd命令（更改目录）向前移动，cd ..向后移动。

练习：尝试运行以下命令进入桌面cd Desktop：

cd Desktop 命令的实际应用

上面，我们cd进入桌面。

pwd你可以通过运行命令或查看提示符来确认是否成功，如下图所示：

仔细检查当前目录，并将你新掌握的命令知识与 pwd 命令结合起来使用。

现在您已进入桌面目录，以下是一些与文件相关的有趣操作，您可以尝试一下：

  • touch avengers.txt创建一个名为 avengers.txt 的新空文件
  • ls列出当前目录中的所有文件（请再次确认 avengers.txt是否存在）
  • open avengers.txt在默认应用程序（默认为文本编辑器！）中打开任何文件
  • cat avengers.txt将 avengers.txt 的内容打印到终端（如果什么也看不到，说明文件为空）
  • mkdir superheros制作一个名为“超级英雄”的目录
  • mv avengers.txt superheros将avengers.txt移动到新创建的 superheros 目录中

太好玩了！

ℹ️在 Finder 中检查您的工作您在终端中对文件或文件夹所做的任何更改都会反映在 Finder 中（反之亦然），因为它们都是指向同一位置的界面：您的固态硬盘Finder 是一个图形界面，而终端是一个基于文本的界面。

如果您想删除 superheros 目录及其内容，在终端术语中，我们称之为删除目录。

要删除 superheros 目录及其内容，请运行rm( re * m *ove) 并加上-rf如下标志：rm -rf superheros。

Flag 是终端术语，表示选项，您可以使用-（例如，-rf）来设置它们，但这超出了本介绍的范围。

恭喜🎉！你现在已经掌握了足够的知识，可以变得“危险”了。

用配色方案美化您的终端

现在你已经有了一些使用终端的经验，我希望你能花更多的时间在终端上，浏览文件，并学习一些引言中提到的基于命令行的工具，例如 npm 和 npx！你不妨也让终端看起来更美观一些。

与内置终端应用程序相比，iTerm 的优点在于您可以轻松下载名为“配色方案.itermcolors文件”的配色方案文件，只需点击几下即可加载它们。

很多主题甚至还提供浅色和深色两种版本。

通过一些精心的配置（本指南中未显示），您甚至可以让 iTerm 根据一天中的时间更改主题！

4 款时尚的 iTerm 主题

  1. 时髦的
  2. 德古拉
  3. 原子一号
  4. 太阳能化
  5. 狗跑道

在本教程中，我们将使用我最喜欢的 dogrun。

练习：使用以下命令dogrun.itermcolors从dogrun GitHub 存储库下载到您的下载目录：

curl https://raw.githubusercontent.com/wadackel/vim-dogrun/main/term/dogrun.itermcolors > ~/Downloads/
Enter fullscreen mode Exit fullscreen mode


`

curl以下是对上述命令工作原理的详细说明：

curl 命令工作原理示例

ℹ️ Curl是 Client URL 的缩写。它是处理 URL 的基本命令之一。

接下来，打开 iTerm 并按⌘+ 键，显示“首选项”窗口：

iTerm 偏好设置

点击“配置文件”，然后导航至“颜色”选项卡，如图所示：

iTerm 颜色

请看右下角的“颜色预设...”下拉菜单？

选择“导入...”dogrun.itermcolors并从您的文件夹中打开~/Downloads。

瞧！

颜色方案应立即更新（无需按保存按钮）。

安装自定义代码字体

你知道吗？有很多字体专门用于编程，它们被称为等宽字体！

它们提高了代码的可读性，并有效利用了屏幕空间，让您可以一次看到更多代码。

4 种字体，提升编码效率

  1. Fira Code
  2. 黑客
  3. 脾
  4. JetBrains Mono

JetBrains Mono 很棒，因为它看起来很漂亮，甚至还包括被称为连字的特殊字符，所以我们就选择它。

连字示例

（感谢@ishanpro提供插图）

练习：  从 JetBrains 网站下载 JetBrains Mono（点击此处）。

接下来，按⌘+空格键。搜索并打开字体册。

在“字体册”中，点击“ +”号，然后从您的“下载”文件夹（或您下载的任何位置）导入 JetBrains Mono 字体。

字体册

如果字体册中出现 JetBrains Mono 字体（如上图所示），则说明有效！

在 macOS 上安装字体就是这么简单！你甚至可以删除原始文件，因为“字体册”会自动创建一个副本。

JetBrains Mono 现在可以在任何程序中使用，无论是 Microsoft Word、Visual Studio Code，还是——你猜对了——iTerm！

你只需要告诉程序使用 JetBrains Mono 字体即可。

要让 iTerm 使用 JetBrains 等宽字体，请参考前面的说明，然后导航到“文本”选项卡。从下拉菜单中选择 JetBrains Mono。

iTerm 字体

瞧！字体应该立即更新了。

配置命令提示符

接下来，我们来看看如何配置提示符中显示的颜色和信息：

纯终端主题

很自然地会认为可以在 iTerm 首选项窗口中调整提示符，但这太容易了😄！

终端窗口只是显示提示符的窗口。提示符是一个独立的程序，必须单独配置。

是的，你没看错！

终端窗口应用程序（iTerm）和命令提示符（技术上称为 shell）是两个独立的程序。

在现代版本的 macOS 中，默认的命令提示符（shell）是 zsh，它通过名为 .zshrc 的基于文本的配置文件进行配置。

ℹ️ 什么是点文件？点文件是一种基于文本的选项文件，其名称以点号 (.) 开头，例如 .zsshrc。在 macOS 系统中，ls默认情况下，以点号 (.) 开头的文件在 Finder 和命令中是隐藏的。要查看隐藏文件，请运行ls -a（-a查看所有隐藏文件）。

在 Mac 上创建 .zshrc 文件

您的计算机上可能已经存在 .zshrc 点文件，也可能没有。

练习：从头开始，使用以下命令创建一个新的 .zshrc 文件：


cd ~
rm .zshrc
touch .zshrc

让我们来详细分析以上3条命令，

  1. cd ~这将带您进入您的主目录（在我的例子中/Users/booker）。~为了方便起见，波浪号 (~) 或重音符号 (~) 表示您的主目录路径。
  2. rm .zshrc如果存在 .zshrc 文件，则将其删除；如果不存在，则会收到一个可以忽略的无害错误：“ rm .zshrc：没有该文件或目录”。
  3. touch .zshrc创建一个名为 .zshrc 的新空文件。

ℹ️如果把`touch`命令命名为 `touch` ，对于每个终端新手来说会更直观，因为它本质上就是“触摸”文件。如果存在与你指定的文件名相同的文件，则将该文件的最后修改时间更新为当前时间。从某种意义上说，你“触摸”了该文件。如果文件不存在，则创建一个与你指定的文件名相同的空文件。touchcreatetouchtouch

安装 shell 主题

通过精心配置，您可以从头开始创建自己的 shell 主题，但我并不建议这样做。

相反，我们不妨使用一款名为Pure 的美观且开源的 shell 主题：

GitHub 上的纯 shell 主题

像 Pure 这样的 Shell 主题是用脚本文件表示的，所以你实际上下载的是一个脚本，你的 shell 每次打开时都会运行这个脚本。

练习：将 pure 和脚本文件下载到您电脑上的某个位置。

是的，你可以用鼠标和图形界面完成这项操作，但你现在是终端学徒了🌌🔫！

这是一个绝佳的机会，可以尝试git使用命令克隆（下载）Pure：


mkdir ~/.zsh/pure
git clone https://github.com/sindresorhus/pure.git "$HOME/.zsh/pure"

让我们来分析一下以上两条命令，

  1. mkdir ~/.zsh/pure创建一个名为 pure 的新目录。运行下一个命令时，主题将下载到此目录中。
  2. git clone <https://github.com/sindresorhus/pure.git> "$HOME/.zsh/pure"从 GitHub 下载 Pure。这里我们说明git下载地址（“ https://github.com/sindresorhus/pure.git ”）以及下载文件的存放位置（“$HOME/.zsh/pure”）。

ℹ️ Git？Git 已预装在 macOS 上，并提供了一种与 GitHub 存储库交互的方式，例如克隆（下载）它们。

接下来，运行命令打开 .zshrc 文件open ~/.zshrc，并在文件顶部添加以下几行：


fpath+=($HOME/.zsh/pure)
autoload -U promptinit; promptinit
prompt pure

完全关闭并重新启动 iTerm。你的终端现在应该看起来像这样🎉：

您的终端已启用 Pure 主题

美极了✨！

事情进展得真快啊！

💡️提示：  如果您修改了 .zshrc 文件但没有任何反应，很可能是您的终端没有正确重启。请仔细检查是否还有其他终端窗口打开。或者，您可以运行以下命令source ~/.zshrc。在 90% 的情况下，此命令无需重启终端即可应用您的最新设置。

终端和命令提示符有什么区别？

你可能想知道终端（iTerm）和命令提示符（zsh）之间的区别。

简而言之，终端就是一个运行命令提示符的窗口。

macOS 的默认命令提示符是zsh，我们通过 .zshrc 文件对其进行配置。您也可以安装其他命令提示符，例如bash和fish。

iTerm 和 zsh 完全独立，但它们之间的界限却很模糊。

理解命令行是一个基于文本的程序至关重要。你输入文本（命令），命令行输出文本。至于这些文本如何呈现，则取决于终端窗口。这就是为什么字体和颜色主题需要在 iTerm 中设置，而不是在 zsh 中设置。

iTerm 默认运行 zsh，但理论上你也可以运行其他命令行提示符，例如 bash。

换个角度来看，zsh 命令提示符可以从任何终端窗口运行，而不仅仅是 iTerm。

一个绝妙的例子是打开 Code 的内置终端窗口（⌘+ `）。

即使字体和颜色有所不同，您也应该能认出之前的自定义提示：

Visual Studio Code 的内置终端使用 ZSH。虽然颜色不同，但你在 zshrc 文件中设置的任何内容仍然有效。

在接下来的章节中，我们将调整一些其他的 .zshrc 设置。这些设置将应用于所有运行 zsh 的地方，无论是 iTerm、VS Code 的终端窗口，还是其他任何终端窗口应用程序。

设置一些非常合理的 ZSH 默认值

你花在终端上工作和查找终端命令的时间越多，就越有可能遇到关于所有强大而便捷选项的有趣讲座和教程。

在这篇文章中，我们将探讨几个常用且非常合理的选项，它们几乎可以作为默认设置。这些选项将帮助您提高工作效率。此外，您还将在此过程中更深入地了解 .zshrc 文件。

自动光盘

此前，如果要更改目录，需要输入命令，cd后跟路径。例如：

  • cd Desktop
  • cd ~
  • cd..
  • cd Code/projects/ABC。

在终端中更改目录是一个非常常见的操作，因此启用该选项可以节省一些击键次数AUTO_CD。

启用此选项后AUTO_CD，您可以直接输入路径，cd例如：

  • Desktop
  • ~
  • ..
  • /Code/projects/ABC

自动CD播放

要启用此功能AUTO_CD，首先使用 .zshrc 文件打开它open ~/.zshrc。

在最顶部添加以下一行：

setopt AUTO_CD
Enter fullscreen mode Exit fullscreen mode

像之前一样完全重启 iTerm2。

当 iTerm2 重新加载时，它会重新加载命令提示符，您的新选项将生效。

创建一个方便的别名

根据你使用终端的用途，你几乎肯定会发现自己一遍又一遍地输入相同的命令。

这不利于提高工作效率，也不利于保护手指。明智的做法是为常用命令创建更短、更易输入的别名。

例如，假设你ls -al经常写作。这些-al标志（选项）很方便（它们会以垂直列表的形式显示所有文件，包括点号），但很容易忘记，而且输入起来也很麻烦。

l在 .zshrc 文件中，您可以通过在 .zshrc 文件顶部添加以下行来创建别名：

完全重启 iTerm2。

现在，你不用打字，而是输入其他内容ls -al就能l达到同样的效果。

npm对于像您这样的 Web 开发人员来说，非常常见的事情是为和git（两个最常用的工具）设置别名。

如果您使用 npm 或 Git，请将以下任意（或全部）内容添加到 .zshrc 文件的顶部：

# Git
alias gi="git init"
alias gs="git status"
alias gd="git diff"
alias gdh="git diff HEAD"
alias gc="git clone $1 $2"
alias gcm="git commit -m "$1""
alias gaa="git add -A ."
alias gpo="git push origin $1"
alias gl="git log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"
alias glo="git log --oneline"
alias grhh="git reset --hard HEAD"
alias gcp="git cherry-pick $1"

# npm
alias ni="npm install";
alias nis="npm i -S "
alias nid="npm i -D "
alias nig="npm i -g "
alias nr="npm run $1";
alias nrs="npm run start";
alias nrb="npm run build";
alias nrt="npm run test";
alias nrc="npm run commit";
Enter fullscreen mode Exit fullscreen mode

留意一下你可能没想到的其他实用别名。GitHub和博客上总会有一些很棒的别名。

这里有一个工具myip，它可以连接到网络服务器来获取并返回您的公共 IP 地址：

alias myip='curl ifconfig.co/'
Enter fullscreen mode Exit fullscreen mode

结论

在这篇✨终极✨3000字指南中，你学会了如何编写你的第一个终端命令并配置你的终端。不仅包括美观方面，还包括功能方面。

你还算不上专家，但你现在所掌握的知识足以造成危险，包括：

  • 如何运行 macOS 命令
  • 如何使用和操作文件和目录
  • 使用 curl 下载文件
  • 如何使用 Git 从 GitHub 下载代码
  • 设置自定义主题和字体
  • 配置一个名为 Pure 的自定义提示符
  • 更改 .zshrc 设置，例如自动 CD
  • 在 .zshrc 文件中定义别名可以提高你的工作效率。

现在你可以继续在线学习。我特别推荐 YouTube。Web 开发人员喜欢优化他们的 .zshrc 文件和终端配置，然后讨论这些内容。

文章来源：https://dev.to/scrimba/a-web-developers-ultimate-guide-to-the-terminal-on-macos-3lmb
幕后故事：从你输入网址的那一刻起
边开发边优化代码 最流行的开发端点...