设置您的 Mac 以进行开发，2020 版。

2025-05-28

设置您的 Mac 以进行开发，2020 版。

请参阅文章末尾的修订和更新。

我在 Dev.to 上的第一篇文章将是我 2018 年 1 月在 Medium 上发表的第一篇文章的延伸。由于我不再继续支持 Medium，因此该文章已被删除，并且从现在开始我将在 Dev.to 上发帖。

介绍和目标

已经有一段时间了，我准备回来继续写另一篇关于如何在 2020 年设置 Mac 的文章。我的设置仍然相对相似，除了联系更加紧密、使用新工具更加得心应手之外，其他方面并没有太大变化。

这将为您提供更高级的设置，并且需要您进行适当的研究才能更好地掌握每个工具。这篇文章的介绍纯粹是入门，但我希望将其包含在内，就像我在第一篇文章中介绍的那样。如果您已经了解了介绍部分，请直接跳到后续章节。

Mac 的初始设置包含 Filevault 作为设置步骤。我建议使用它。此外，定位服务也很方便，因为你可以使用“查找”来定位你的设备。我也建议启用这项功能。

我要快速提一下，如果您还没有打开“系统偏好设置”，请确保您没有任何新的软件更新。

替代文本

保持系统更新至关重要。请定期关注更新。

如果空间不足，我建议你加载照片应用，并在偏好设置中禁用 iCloud 同步。如果你是 iMessage 用户，那么信息应用也需要配置，所以也请加载它。我建议保持这个应用干净整洁，因为信息应用会占用大量存储空间。

最后，完成此步骤后，前往 App Store，安装您在设备上使用的每个 Mac 应用。完成后，我们就可以开始实际操作了。

终端和系统偏好设置

通过右上角的搜索栏打开终端。它也被称为Spotlight，可以快速打开系统上的应用程序。终端启动后，请确保使用命令pwd显示您在系统中的位置（例如 /Users/you）。

如果以下命令在任何时候出现权限错误，这意味着您没有获得使用命令行的管理员权限。您必须sudo先使用该命令，然后在终端中输入密码。

替代文本

以下命令将大大提高您的 Mac 在开发过程中的可访问性。

显示库文件夹：

chflags nohidden ~/Library
Enter fullscreen mode Exit fullscreen mode

显示隐藏文件：

defaults write com.apple.finder AppleShowAllFiles YES
Enter fullscreen mode Exit fullscreen mode

显示路径栏：

defaults write com.apple.finder ShowPathbar -bool true
Enter fullscreen mode Exit fullscreen mode

显示状态栏：

defaults write com.apple.finder ShowStatusBar -bool true
Enter fullscreen mode Exit fullscreen mode

进入系统偏好设置，进行以下设置：

  • 键盘 > 文本 > 禁用“自动更正拼写”
  • 安全和隐私 > 防火墙 > 开启
  • 安全和隐私 > 常规 > 允许 App Store 和已识别的开发者
  • 文件共享 > 关闭

阿尔弗雷德

Alfred 是 Spotlight 的替代品。我无法用言语表达，使用 Alfred 加速 Mac 的工作流程，我的灵感得到了多么大的提升。Alfred 可以成为你 Web 开发工作流程的高效伴侣，我推荐购买 Powerpack（25 欧元，约合 28 美元）。Powerpack 增加了一些很棒的功能，例如剪贴板历史记录、代码片段管理器和一些非常优秀的工作流程。我强烈建议你使用代码片段和剪贴板工具来处理你的代码。

安装 Alfred：这里
我将访问 Alfred 的快捷方式改为 Spotlight 使用的快捷方式CMD + Spacebar。您可以在“系统偏好设置”中的“Spotlight”设置中进行此操作。找到左下角的“键盘快捷键”选项卡，即可禁用或更改快捷方式。

更多信息请参阅Alfred网站和Powerpack页面。

此外，我还使用了 Felix Queisler 的这款超棒极简主题：
Alfred Theme Minimal 2019 · GitHub

下载 zip 并单击主题文件以激活它。

命令行工具、Homebrew 和 Casks

每个开发人员都会使用命令行工具。一个简单的终端命令就可以下载这些工具。输入命令后，它会要求你确认。

xcode-select --install
Enter fullscreen mode Exit fullscreen mode

自酿啤酒和桶装啤酒

Homebrew，它是 MacOS 缺少的包管理器，功能非常强大。

将以下代码复制并粘贴到您的终端中以安装 Homebrew。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Enter fullscreen mode Exit fullscreen mode

它会要求您输入“Return”来确认安装。

我在使用 Homebrew 和 Node 版本管理器（稍后讨论）升级 Node 时遇到了问题。因此，我们需要安装 Homebrew 并锁定公式，这样它就不会更新到任何新版本。您可以随时“取消锁定”。

brew install node
brew pin node
Enter fullscreen mode Exit fullscreen mode

Casks 是 Homebrew 的一个扩展，它允许你通过一个命令安装应用程序。它汇集了 5169 位贡献者维护的 3888 个 Casks。点击此处搜索 Casks 。

安装以下必需品：

brew cask install ‘hyper’
brew cask install ‘visual-studio-code’
brew cask install ‘google-chrome’
Enter fullscreen mode Exit fullscreen mode

我遇到了一个问题，VSCode 无法在 MacOS 新的“安全和隐私”设置下打开。如果无法打开，你需要前往“系统偏好设置”（“安全和隐私”>“通用”选项卡），底部会显示你仍然希望打开该应用程序。

另外，如果您不喜欢 Chrome，也可以搜索其他浏览器或使用 Safari。Firefox 开发者版越来越好用了！

超级终端和 oh-my-zsh

我们来聊聊我们安装的第一个 Cask终端Hyper™ 。它是由Vercel团队开发的，他们的工具非常棒。我非常喜欢用它们。

Hyper 是Electron构建终端的替代品。它完全基于 HTML、CSS 和 JavaScript 构建。是不是很酷？

在本次设置之旅期间，我们将继续使用 Hyper 作为我们的主要终端。

每台新的 Catalina Mac 都将使用zsh shell 或“z shell”来替代 Bash shell。我们现在将为我们的机器进行此设置。如果您在之前的安装中已经使用过 Bash，它仍然会保留。Zsh 仅适用于使用 Catalina 创建的新帐户。

让我们检查它是否已经安装：

zsh --version
Enter fullscreen mode Exit fullscreen mode

如果没有，让我们安装它：

brew install zsh
Enter fullscreen mode Exit fullscreen mode

安装后，让我们将其设置为默认 shell：

chsh -s /bin/zsh
Enter fullscreen mode Exit fullscreen mode

您可能需要sudo再次使用此处，否则它会要求您输入登录凭据以更改系统 Shell。稍后安装 n 包后，sudo 的使用频率会降低，但我在全新安装 MacOS 后，使用 sudo 时并没有遇到任何大问题。

切换后请注销并重新登录或重新启动计算机。

重新登录后，启动 Hyper 并输入：

echo $SHELL
Enter fullscreen mode Exit fullscreen mode

预期结果：/bin/zsh

Oh My Zsh是一个开源驱动的 zsh 配置框架。它自带了一系列不同的插件、主题和辅助工具，让你的终端看起来更棒。

使用以下方式安装：

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
Enter fullscreen mode Exit fullscreen mode

请查看“使用 Oh-My-Zsh”来熟悉它。我默认运行所有功能，但有很多主题可供选择。

我在 zshrc 文件中设置了一个有用的别名，以使 Homebrew 保持最新状态并且我的系统运行顺畅，当我开始开发工作时我会手动输入该别名。

要查看您的安装文件：

nano ~/.zshrc
Enter fullscreen mode Exit fullscreen mode

向下箭头直到看到“# Example Aliases”
在此我们可以添加：

alias brewup=‘brew update; brew upgrade; brew cleanup; brew doctor’
Enter fullscreen mode Exit fullscreen mode

要保存文件：Control + O

退出：Control + X

每次进入brewupHyper 时，我们都能同时使用这三个命令。更好的解决方案是将其设置为 crontab 循环，每周左右使用一次，但我还没有实现！

在安装文件中访问此安装文件时，我们可以创建另一个有用的别名。我们可以在文件中创建一个！

alias zshconfig=“code ~/.zshrc”
Enter fullscreen mode Exit fullscreen mode

奖励：
zsh 的两个最佳功能是利用两个必要且有用的插件，zsh-autosuggestions 和 zsh-syntax-highlighting。

要安装这两个插件，首先需要将它们克隆到 oh-my-zsh 自定义插件文件夹中。

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
Enter fullscreen mode Exit fullscreen mode

克隆后，打开你的 zshconfig 并将它们都加载到你的设置文件的插件区域，如下所示。

plugins=(
    zsh-autosuggestions
    zsh-syntax-highlighting
)
Enter fullscreen mode Exit fullscreen mode

Git 和 SSH

Git 将用作代码的版本控制系统。大多数新 Mac 都预装了 Git，因此本文将概述如何初始化它。您将不断使用 Git 提交和推送代码。当您的计算机与其他计算机通信时，SSH 将唯一地标识您（以及您的计算机）。想象一下，就像一个复杂的密码一样。网络上的许多应用程序都要求您使用 SSH 进行身份验证，例如 Heroku 和 Github。

那么先用Git。我们回到 Hyper。

git config —global user.name “First Last” (keep the quotes)
git config —global user.email “Email” (keep the quotes)
Enter fullscreen mode Exit fullscreen mode

对 Heroku、Git、Github 和 SSH 使用相同的电子邮件地址。

使用以下命令确认更改已完成：

git config —get user.name
git config —get user.email
Enter fullscreen mode Exit fullscreen mode

您应该会看到打印的您的用户名和电子邮件。

我在 git 配置文件中添加了一些别名命令。你可以使用以下命令自行查看：

code ~/.gitconfig
Enter fullscreen mode Exit fullscreen mode

还记得我们在 VS Code 中添加了 shell 命令来查看特定文件吗？你刚刚用过它！

我的看起来像这样。

[user]
name = First Last
email = student@example.com
[alias]
a = add
ca = commit -a
cam = commit -am
s = status
pom = push origin master
pog = push origin gh-pages
puom = pull origin master
puog = pull origin gh-pages
cob = checkout -b
[color]
ui = auto
Enter fullscreen mode Exit fullscreen mode

别名命令允许我直接输入git pom而不是git push origin master...。

要在终端中查看配置设置列表，请使用以下命令进行检查：
git config —list

SSH

SSH 输入密码。知道了。我们来检查一下你是否已经有密码了。

ls ~/.ssh/id_rsa
Enter fullscreen mode Exit fullscreen mode

如果您还没有 SSH 密钥，这将返回“没有这样的文件或目录”。

使用以下方法生成密钥：

ssh-keygen -t rsa -b 4096 -C “student@example.com”
Enter fullscreen mode Exit fullscreen mode

student@example.com是您在 Git 中使用的实际电子邮件。

预期结果：

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/student/.ssh/id_rsa):
Created directory ‘/Users/student/.ssh’.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /Users/student/.ssh/id_rsa.
Your public key has been saved in /Users/student/.ssh/id_rsa.pub.
The key fingerprint is:
88:54:ab:77:fe:5c:c3:7s:14:37:28:8c:1d:ef:2a:8d student@example.com
Enter fullscreen mode Exit fullscreen mode

接下来会要求你输入密码。我建议你使用一个。

公钥与私钥
如果您打开：

code ~/.ssh/
Enter fullscreen mode Exit fullscreen mode

您将看到两个文件：“id_rsa”文件和“id_rsa.pub”文件。.pub是公开的，可以自由共享，而_rsa必须保密。

继续使用以下命令将生成的密钥添加到身份验证代理：

ssh-add ~/.ssh/id_rsa
Enter fullscreen mode Exit fullscreen mode

系统将提示您输入密码并添加身份。

完成后，你应该前往 Github 并配置新生成的密钥，以便与 Github 正确交互。Github 有一个实用指南。

Visual Studio 代码

替代文本

得益于微软团队的出色更新和开发者们精心打造的扩展，Visual Studio Code 比以往任何时候都更加强大。我经常听到有人说 vim 太火爆了，或者说通过命令行使用文本编辑器太难了，但现在我甚至不敢想象自己会走这条路。

继续，从 Alfred 打开 VSCode。之前使用 Casks 安装过。

首先，我们将查看命令面板。命令面板位于“视图”选项卡下。点击它后，将出现一个下拉菜单，然后shell command: Install ‘code’ command in PATH’输入搜索词并按 Enter。

替代文本

这使您可以在超级终端中键入以下命令code ‘filename’来在 VS Code 中打开文件。非常强大且实用！

在欢迎屏幕上，选择“安装 JavaScript 支持”和“安装 Atom 键盘快捷键支持”。 （也可在此处找到）

要查看 Atom 的键盘快捷键，请点击此处。它们对提高你的编码速度非常有帮助。

找到扩展的侧边栏图标并搜索以下基本安装：

  • npm 智能感知
  • 路径智能感知
  • ESLint
  • Prettier - 代码格式化程序
  • 实时共享
  • 书签
  • Chrome 调试器（如果使用 Chrome）
  • 自动关闭标签
  • 括号对着色器 2
  • DotENV
  • GraphQL
  • 实时服务器
  • 缩进彩虹

更多 VSCode 和 Bonus 主题更改

有些扩展程序并非即插即用，需要进行一些设置。安装前，请阅读链接并确认相关设置。

Peacock允许您更改 VSCode 的边框窗口以辨别不同的工作区。

颜色突出显示在编辑器中突出显示您的样式颜色。

Babel JavaScript语法突出显示，符合当今的 JavaScript 标准。

VSCode 的优点在于，一旦初始化存储库，它就会内置 Git 支持，但Git History允许您从 VSCode 内部查看历史记录。

Markdown Preview Enhanced允许您预览 Markdown 文件，通常是 Github README。

简单的 React Snippets是用于加速您的 React 开发的片段。

搜索主题：

  • 原子一号黑暗
  • 原子一号灯
  • Github 主题
  • 材料主题包

图标包：

  • 材料图标

我的 VSCode 主题是用 Vercel 开发的。这个需要通过 Hyper 安装。怎么说呢，我是个 Vercel 的粉丝。

curl https://zeit-theme.now.sh | tar xvz -C ~/.vscode/extensions
Enter fullscreen mode Exit fullscreen mode

重新启动 VSCode，在“首选项”>“颜色主题”中选择“ZEIT”

如果你遇到任何问题或希望看到改进，请向他们发送反馈！
舒丁原推文

以下是我常用的一些主题。在继续之前，我想先跟大家分享一下。

Google Chrome 开发者工具主题
我建议你也为你的 Chrome 开发者工具添加一个主题。我使用的是 Tania Rascia 的 New Moon。Github 代码库里有安装指南，地址在这里。

JetBrains Mono 字体
我发现的另一个好东西是 JetBrains Mono 字体。我在 VSCode 和 Hyper 中都用过它，它是一款非常棒的开发字体。在这里安装它，然后就可以在这两个应用程序中使用。

要在 Hyper 中启用它：

  • 通过点击CMD + ,或使用 VSCode 中的新命令进入“首选项”code ~/.hyper.js

笔记：

如果您使用第一个命令，它很可能会使用 Chrome 打开。您需要将 JavaScript 文件设置为使用 VSCode 自动打开。当它在 Chrome 中打开时：

  • 选择文件 > 将页面另存为...
  • 在下载文件夹中找到该文件
  • 右键单击该文件
  • 选择“获取信息”
  • 展开打开方式：箭头
  • 选择 VSCode
  • 选择全部更改...并确认

加载 Hyper Preferences 文件后，您应该将 fontSize 更改为 16，然后在 fontFamily 首选项的开头添加“JetBrains Mono”。请包含双引号。

在 VSCode 中操作类似。点击CMD + SHIFT + P并搜索“用户设置”进入命令面板。它应该在主屏幕上，并在字体系列设置的开头添加“JetBrains Mono”。在 VSCode 中可以使用单引号。

n-install 和 Yarn

Homebrew 会安装最新版本的 Node。不过，你可能会遇到需要使用特定版本 Node 的情况或学习相关知识。

我使用 n-install 来管理我的 Node 版本。n
- Node 版本管理器

使用以下方式安装：
brew install n

n 是一款简洁易用的版本管理器。它允许您安装最新版本的 Node，或使用您选择的稳定版本。之前，Homebrew 会安装最新版本的 Node。n 允许我们即时使用 LTS 版本或其他我们想要的 Node 版本。安装前，我建议您设置用户权限（代码如下）以及缓存文件夹（如果不存在）。不过，这些设置应该在安装时应用。

# make cache folder (if missing) and take ownership
sudo mkdir -p /usr/local/n
sudo chown -R $(whoami) /usr/local/n
# take ownership of node install destination folders
sudo chown -R $(whoami) /usr/local/bin /usr/local/lib /usr/local/include /usr/local/share
Enter fullscreen mode Exit fullscreen mode

另一个选项是 Node 版本管理器。nvm
：Node 版本管理器

请查看这两个仓库并做出决定。您需要按照说明进行安装。

纱

Yarn是另一个代码包管理器。它的 2.0 版本刚刚发布，我很高兴能够开始使用它。它是一款优雅可靠的工具，你一定会用得上。

使用以下方式安装：
brew install yarn

mySQL、MongoDB 和其他数据库的说明

作为一名开发人员，你需要使用数据库。我目前只用过 MySQL 和 MongoDB。数据库本身就是一个完整的主题，花些时间学习每个数据库都很重要！我建议你去 Codecademy 上学习 MySQL 的简单课程，MongoDB 网站上也有一个很棒的教育版块，专门让你亲身学习。

数据库瞬息万变，但这两个数据库是久经考验的。我一直都在频繁使用它们，并且根据你的项目需求，你可能会有不同的需求，或者希望使用一些更新的数据库，例如 GraphQL（查询语言）、EdgeDB 或 FaunaDB。

对于 mySQL，您需要先点击 Homebrew 服务，然后安装。

brew tap homebrew/services
brew install mysql@5.7
Enter fullscreen mode Exit fullscreen mode

对于 MongoDB 来说也是类似的，但是我们需要专门利用 MongoDB。

brew tap mongodb/brew
brew install mongodb-community@4.2
Enter fullscreen mode Exit fullscreen mode

使用这些数据库之前可能需要进行一些额外的设置。首次使用时，请按照终端中的提示操作即可！

命令行界面

如今，许多工具都提供了一整套与其产品交互的功能。我认为使用命令行界面 (CLI) 对于提高开发效率至关重要。我列出了一些文档齐全的工具，您可以自行查阅，了解如何最佳地使用它们。

我们在第一版中没有讨论这些内容，但让我们开始吧。

Vercel CLI是 Vercel 的 CLI 工具，用于极其简单的部署。
npm install -g vercel

Netlify是一款简洁的现代 Web 项目构建器、部署工具和管理器。
npm install -g netlify-cli

Surge是一个将 Web 应用程序发布到 CDN 的工具。
npm install -g surge

Gatsby是一个静态站点生成器和渐进式应用程序生成器。
npm install -g gatsby-cli

create-react-app创建一个 React 应用程序。
npm install -g create-react-app

Vue CLI创建一个 Vue 应用程序。
npm install -g vue-cli

Hub是一款出色的工具，可以从命令行与 Github 交互。Github CLI 目前处于测试阶段。
brew install hub

最初未提及的其他应用

Notion是一个一体化的工作空间，一个真正不可思议的工具。

Spectrum是一个为技术社区构建的社区平台。

Numi计算器。我喜欢它的音符式计算。

Magnet是一款 Mac 版工作空间管理器。这是一款付费应用，可在 App Store 下载。点击网站上的下载链接即可下载。相比 Spectacle，我更推荐 Magnet。

Pocket是一款方便以后保存的应用。它可以保存文章、视频、笔记以及几乎所有其他内容。

Parcel是最好的快递追踪器。

Dashlane是我选择的密码管理器。

Spark是一款正确使用的电子邮件。

Postman是一个应用程序编程接口 (API) 开发图形用户界面 (GUI)。是的……名字有点拗口，但确实很棒。

Dozer允许您清理菜单栏。

结论

我希望这对所有 Mac 用户来说都是宝贵的资源！开发环境瞬息万变，很容易让人迷失方向，找不到合适的标准设置。这篇文章未来会继续扩展，我期待届时能提供一些指导。

如果您遇到困难、错误或失误，请告诉我，以便我纠正！

更新于2020年2月4日。本文中出现了一些链接错误和拼写错误。现已修复。此外，我还会发布一个精简版，去除所有冗余内容。敬请留意。

更新于 2020 年 2 月 11 日本文已创建精简版本，其中包含所有步骤。点击此处查看精简版本。

更新于 2020 年 3 月 9 日安装 zsh 插件后添加了“brew pin node”步骤，并删除了有关未经 MacOS 公证的 VSCode 说明。

更新于 2020 年 3 月 27 日从全局安装列表中删除了 create-react-app，因为现在建议使用 npx 运行。

更新于 2020 年 9 月 4 日将 ZEIT 更新为 Vercel，并分别进行全局安装。

文章来源：https://dev.to/v3frankie/setup-your-mac-for-development-2020-edition-1c8a
Devto 翻译
PREV
2021 年关于如何以灵活高效的方式构建 Next.js 项目的指南 Next.js 常用文件夹结构 灵活且“模块化”的文件夹结构
NEXT
Git 备忘单