俗话说，工欲善其事，必先利其器。当你拿到一台新的 Macbook，或者是不小心弄崩了老的 Macbook 需要重装系统 😭😭😭，那怎样快速配置好一台新 Macbook 呢？说实话，从头开始配置环境是比较花时间的，因为中间可能会有不少的坑。这篇文章总结了我自己因升级系统弄崩若干次 Macbook 的配置经验，希望能给大家避坑，也是怕我下次手抖点升级系统再次弄崩 Macbook 时，能快速把机器配置到好用的状态开始干活搬砖🧱。

First Of All, 备份重要数据和及时 push 代码非常非常重要。

Shell(Bash or ZSH)，Git 以及 Curl

安装好 bash（zsh）, git 以及 curl 是后续步骤的前提条件。Macbook 一般内置了 zsh，但还需要额外安装 Command Line Tools (CLT) for Xcode。有两种安装方法：

通过命令行 xcode-select --install安装
访问苹果的开发者下载中心，找到 Command Line Tools for Xcode 13.1 Release Candidate，点击下载安装

Itemr2, ohmyzsh & autojump

虽然 Macbook 自带了 Terminal 工具，但它还是不够好用。Itemr2 是一个 More Than Terminal 的 Terminal，搭配 Ohmyzsh 能最大化地发挥 Iterm2 的价值。

Oh My Zsh 是一个令人愉快的开源社区驱动框架，用于管理您的 Zsh 配置。

Iterm2

iterm2 可以直接在官网下载对应的安装包，也可以通过后续的 Homebrew 安装

$ brew install --cask iterm2

Iterm2 的 Guake 模式

Guake 模式可以通过快捷键，以半透明的方式唤出 iterm2，在某些场景下会很有用。

具体配置方式如下所示：

打开 iterm2, 点击 iterm2 -> preference，或者按快捷键 command + ,

新建一个 profile，调整 transparency 和 blur

设置唤起 Guake 模式的快捷键，这样按下设置好的快捷键，就能唤起 Guake 模式下的 iterm2 了

ohmyzsh

安装好 iterm2 之后，安装 onmyzsh

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

ohmyzsh 已经内置了很好用的插件，但可以按需通过引入各种其他插件来变得更好用。用于语法高亮的 zsh-syntax-hignlighting 以及用于自动补全的zsh-autosuggestions是强烈推荐安装的两款插件。安装方法如下：

$ git clone https://github.com/zsh-users/zsh-autosuggestions.git $ZSH_CUSTOM/plugins/zsh-autosuggestions

$ git clone https://github.com/zsh-users/zsh-syntax-highlighting.git $ZSH_CUSTOM/plugins/zsh-syntax-highlighting

安装成功后，还需要通过配置 ~/.zshrc 来让其生效

$ vim ~/.zshrc

可以看到，~/.zshrc这个文件已经包含 ohmyzsh 默认的很多配置，找到 plugins 添加以下语句：

$ plugins=(git ... zsh-syntax-highlighting zsh-autosuggestions)

更多的配置可以参考why-zsh

autojump

autojump 是一能让你在文件系统间穿梭更自由的插件。指令名称为 j，主要有下面三种用法:

// j，跳转到名称中包含 foo 的目录
$ j foo

// jc，跳转到当前目录包含名称 bar 的子目录
$ jc bar

// jo，使用文件管理器（例如 macbook 的 finder, windows 的 explorer）打开包含 music 的目录
$ jo music

// jco, 使用文件管理器打开当前目录包含名称 images 的子目录
$ jco images

注意，使用 j命令前，必须先访问过对应的目录，才能实现跳转。

安装

可以直接使用下面的 Homebrew 来安装 autojump。

$ brew install autojump

注意，安装成功后，要把以下命令添加到 ~/.zshrc 中，autojump 才能生效。

// 把以下命令添加到 ~/.zshrc 中
$ [ -f /usr/local/etc/profile.d/autojump.sh ] && . /usr/local/etc/profile.d/autojump.sh

// 执行以下命令，或者重新打开 item2 让上面配置生效
$ source ~/.zshrc

HomeBrew

Homebrew是一款自由及开放源代码的软件包管理系统，用以简化 macOS 系统上的软件安装过程，可以说是 MacBook 必备。

但是，由于众所周知的原因，在大陆按照官方指令 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 安装一般都会遇到超时问题。（错误信息：Failed to connect to raw.githubusercontent.com port 443: Connection refused error）

通过配置 Host 来解决超时问题

解决上述的超时方法之一是配置 Github Host，然而我试了好像并没有用，甚至开了科学上网都无法成功下载 Homebrew。下面贴一个最新的 Host 配置，以及一个 Host 管理工具 SwitchHost。

# GitHub520 Host Start (来源： https://github.com/521xueweihan/GitHub520 )
140.82.113.25                 alive.github.com
140.82.113.26                 live.github.com
185.199.108.154               github.githubassets.com
140.82.114.22                 central.github.com
185.199.108.133               desktop.githubusercontent.com
185.199.108.153               assets-cdn.github.com
185.199.108.133               camo.githubusercontent.com
185.199.108.133               github.map.fastly.net
199.232.69.194                github.global.ssl.fastly.net
140.82.114.3                  gist.github.com
185.199.108.153               github.io
140.82.112.4                  github.com
192.0.66.2                    github.blog
140.82.112.5                  api.github.com
// 起作用的应该主要是这个
185.199.108.133               raw.githubusercontent.com
185.199.108.133               user-images.githubusercontent.com
185.199.108.133               favicons.githubusercontent.com
185.199.108.133               avatars5.githubusercontent.com
185.199.108.133               avatars4.githubusercontent.com
185.199.108.133               avatars3.githubusercontent.com
185.199.108.133               avatars2.githubusercontent.com
185.199.108.133               avatars1.githubusercontent.com
185.199.108.133               avatars0.githubusercontent.com
185.199.108.133               avatars.githubusercontent.com
140.82.112.9                  codeload.github.com
52.217.44.148                 github-cloud.s3.amazonaws.com
54.231.128.25                 github-com.s3.amazonaws.com
52.217.15.108                 github-production-release-asset-2e65be.s3.amazonaws.com
52.217.91.180                 github-production-user-asset-6210df.s3.amazonaws.com
52.217.91.180                 github-production-repository-file-5c1aeb.s3.amazonaws.com
185.199.108.153               githubstatus.com
64.71.144.202                 github.community
23.100.27.125                 github.dev
185.199.108.133               media.githubusercontent.com

直接将 Homebrew 的源改为清华大学的源

HomeBrew 的默认源是 github 上的源

// HomeBrew 的默认源
https://github.com/Homebrew/brew

// HomeBrew-core 的默认源
https://github.com/Homebrew/homebrew-core

清华大学官方提供了 HomeBrew 镜像，通过将默认的 github 上的源替换为该镜像，可以显著提升在墙内下载 HomeBrew，以及通过 HomeBrew 下载其他软件的速度。

安装 Homebrew

// 如果 shell 使用的是 zsh, 将 ~/.bash_profile 替换为 ~/.zprofile
$ echo 'export HOMEBREW_BOTTLE_DOMAIN="https://mirrors.tuna.tsinghua.edu.cn/homebrew-bottles"' >> ~/.bash_profile
$ export HOMEBREW_BOTTLE_DOMAIN="https://mirrors.tuna.tsinghua.edu.cn/homebrew-bottles"

安装完成后，在终端输入以下几行命令设置环境变量：

export HOMEBREW_BREW_GIT_REMOTE="https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git"
export HOMEBREW_CORE_GIT_REMOTE="https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-core.git"
export HOMEBREW_BOTTLE_DOMAIN="https://mirrors.tuna.tsinghua.edu.cn/homebrew-bottles"

最后，在终端运行以下命令以安装 Homebrew:

# 从镜像下载安装脚本并安装 Homebrew
$ git clone --depth=1 https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/install.git brew-install

$ /bin/bash brew-install/install.sh
$ rm -rf brew-install

如果用的是 M1 版本的 MacBook (命令行运行 uname -m 输出结果是 arm64），那么还需要将 brew 程序的相关路径加入到环境变量中：

$ test -r ~/.bash_profile && echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.bash_profile
$ test -r ~/.zprofile && echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile

替换 HomeBrew 默认仓库的上游

替换 brew 本身的源

$ export HOMEBREW_BREW_GIT_REMOTE="https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git"
$ brew update

替换 homebrew/core, homebrew/cask, homebrew/cask-fonts, homebrew/cask-dirvers, homebrew/cask-versions, homebrew/command-not-found的源：

export HOMEBREW_CORE_GIT_REMOTE="https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-core.git"
for tap in core cask{,-fonts,-drivers,-versions} command-not-found; do
    brew tap --custom-remote --force-auto-update "homebrew/${tap}" "https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-${tap}.git"
done
brew update

3. 将环境变量 HOMEBREW_BREW_GIT_REMOTE以及HOMEBREW_CORE_GIT_REMOTE加入 shell

// 打开 ~/.zprofile
// 配置以下环境变量
export HOMEBREW_BOTTLE_DOMAIN="https://mirrors.tuna.tsinghua.edu.cn/homebrew-bottles" (在第一步已设置)
export HOMEBREW_BREW_GIT_REMOTE="https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git"
export HOMEBREW_CORE_GIT_REMOTE="https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-core.git"

// 让配置生效
$ source ~/.zprofile

由此，就可以将 Homebrew 及其配套的一些工具的源都改成清华提供的源，速度会快很多。

可能遇到的问题

No available formula or cask with the name "yarn" （具体 package 的名称）

出现这种报错的原因是 brew 配置项中的 Core Tap的配置项有缺失，导致 brew 无法找到对应的包。可以通过 brew config查看 brew 的配置项：

解决方法：删除原有的 homebrew-core 文件夹，并重新创建

// 删除原有的 homebrew-core 文件夹
$ rm -rf /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core

// 重新创建 homebrew-core
$ brew tap homebrew/core

重新创建成功的 brew 配置如下所示，可以看到 Core Tap 对应的几个配置都不为空了。此外，值得注意的是，Homebrew, Homebrew-core, Homebrew-bottles这些包的 origin 都是清华大学的源。

再重新执行 brew install yarn，成功 🎉

这里贴一些常用的工具和应用

brew install git
brew install tig
brew install yarn
brew install --cask google-chrome
brew install --cask firefox
brew install --cask iterm2
brew install --cask visual-studio-code

Node, npm, nrm 以及 nvm

node & npm

直接前往 NodeJS 官网下载长期维护版的 node.js安装包，里面包自带 npm。安装成功后，可以查看安装的版本：

nrm (npm resource manage)

npm 包有很多的镜像源，有的源有的时候访问失败，有的源可能没有最新的包等等，所以有时需要切换 npm 的源。nrm 可以帮助开发者在不同的 npm 源地址之间轻松快速地切换。

全局安装

$ npm install -g nrm

// 查看安装的 nrm 版本，来判断是否安装成功
$ nrm --version

可以通过 npm list -g --depth 0来查看全局安装的包

列出可选择的源 nrm ls（前面带 * 号的表示正在使用的源）

添加一个源 nrm add <registry> <url>

切换使用的源 nrm use npm
删除某一个源 nrm del taobao
测试源的速度 `nrm test

不使用 nrm 来查看使用的源，切换使用的源

// 查看当前使用的源
$ npm config get registry

// 安装一个源
$ npm install --registry=https://registry.npm.taobao.org

// 设置一个源
$ npm config set registry https://registry.npm.taobao.org/

nvm （node version manage）

安装： brew install nvm。注意，安装后直接使用 nvm，系统会提示 command nvm is not found

解决办法：

// 1. 创建 ~/.nvm 文件夹
$ mkdir ~/.nvm

// 2. 将以下命令行加入 ~/.zshrc
$ [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
$ [ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

// 3. 让设置生效
$ source ~/.zshrc

这样就可以啦 🎉

使用

下载最新版本

$ nvm install node # "node" is an alias for the latest version

下载/卸载指定版本

// 下载
$ nvm install 14.7.0 # or 16.3.0, 12.22.1, etc

// 卸载
$ nvm uninstall 14.7.0

列出所有可用的 node

$ nvm ls-remote

查看当前窗口的版本

$ nvm current

当前窗口使用某个版本。use 命令只在当前下窗口生效，下次打开 shell 进入同一路径版本会保持默认版本。如果每次都需要改版本建议设置默认版本。

$ nvm use 14.7.0

// 设置默认版本
$ nvm alias default 14.7.0

更多方法请参考 github 文档

git 设置 SSH KEYS

设置 gitlab 的 SSH Key

$ ssh-keygen -t rsa -C your@emial

当需要 Enter passphrase 时，如果填入了密码，那么之后的每一次 git push 动作，都会要你填一次密码。这虽然增加了安全性，但实在有点麻烦。因此，在提示 Enter passphrase，可以直接按回车跳过，这样就不用推代码都要输入密码了。当然，这个配置后续也可以更改。

// 重新设置密码
$ sh-keygen -p 

Enter file in which the key is (/Users/.ssh/id_rsa):  
Enter old passphrase: 
Enter new passphrase (empty for no passphrase):  
Enter same passphrase again:  
Your identification has been saved with the new passphrase.

查看生成的 ssh key，并复制。

cat ~/.ssh/id_rsa.pub

将复制的 key 填入 gitlab 的设置中

同时管理 gitlab, github 的 ssh key

当需要参与开源项目的开发时，需要同时配置 github 的 ssh key。为了与 gitlab 的 ssh key 有所区别，我们可以设置 github 的 ssh key 的名称为 id_rsa_github

$ ssh-keygen -t rsa -C your_github@emial

同样，通过 cat指令看到具体的 ssh key 值，并复制到 github 的 ssh key 管理处。注意，复制 ssh key 时，应该全部复制下来，包括开头的 ssh-rsa

复制到 github 的 SSH KEY 管理处

对每个密钥添加信任，让 ssh key 的配置生效

// 开启认证代理
$ eval $(ssh-agent -s)

// 添加 ssh 文件管理
$ ssh-add ~/.ssh/id_rsa
$ ssh-add ~/.ssh/id_rsa_github

github 连通性测试

$ ssh -T git@github.com

gitlab 连通性测试由于 gitlab 是私有代码仓库，测试时需要在 git@后面输入公司 Gitlab 所在 ip 地址或域名，才能正确测试。

Charles & SwitchOmega

Charles 是一个 HTTP 代理服务器, HTTP 监视器以及反转代理服务器，当应用在 Charles 开启的情况下访问互联网时，Charles可以监控这个应用发送和接收的所有数据。它允许一个开发者查看所有连接互联网的 HTTP 通信，这些包括 Request, Response 和 HTTP Headers 等，包含的信息基本与 Chrome 的 Network 一致。

除了抓包以外，Charles 一个很重要的用处是请求代理。这在本地开发或者代码调试时是很有用的。举例来说，在修改一个页面时，传统的开发方式是通过 Mock （自建 Mock 数据或者利用 MockJS 的方式来模拟接口的请求和返回)。Mock 数据的方式虽然简单有效，但这些数据并不能完全模拟真实的用户接口场景，并且通常会存在数据老旧缺乏维护等问题。

因此，可以通过 Charles 把预发/线上的 JS 和 CSS 文件都代理到本地开发服务器，但接口走实际请求接口的方式，来将 Mock 数据变成完全真实的接口返回数据。并且，由于实际的 JS 和 CSS 文件都运行在本地 node 服务器上，因此前端改动后，webpack 会重新生成新的打包产物，此时预发或者线上页面也通过刷新页面的方式，加载新的 JS 或 CSS 文件。也就是说，前端的改动能实时反映在预发或线上，不一定要等发到预发环境才能看到这些改动。这能提升开发的灵活性。此外，由于本地构建测产物通常没有经过打包、压缩以及代码混淆，依赖的包是 node_modules 里的文件，这使得更方便打断点来调试页面。

安装以及配置

Charles 的安装包可以在其官网 Charles 上下载到。下载完成后，首先需要配置 SSL 根证书，并且设置为始终信任。

对于 HTTP 请求，Charles 默认展示所有请求的 Request 和 Response 信息。但对 HTTPS 来说，需要配置 SSL 代理的规则才能展示 Request 和 Response 信息。可以简单地配置 : 来代理所有的请求，但更好的方式是根据实际业务场景去配置代理规则。

可以看到，没有设置 SSL 代理规则之前，所有 HTTPS 请求都是 unknown。

配置 SSL 请求之后，可以看到 HTTPS 的 Request 和 Response。

注意，Charles 需要处于开启状态，才能够代理请求。开启方式如下：

配置代理

可以通过 tools -> Map Remote 来配置远程代理，将资源或请求映射到本地或其他环境。

代理规则需要根据具体的业务请求来配置，示例配置如下所示。配置好的规则 From 会被被代理到 To 所指的地址。由此可以实现 JS 和 CSS 文件走本地，但接口走预发/线上这种更方便调试的模式。

Charles 结合 OmegaSwitch

SwitchOmega 是 Chrome 和 Firefox 浏览器上的代理扩展程序，可以轻松快捷的管理和切换多个代理设置。开启 Charles 会使得所有的网络请求都走 Charles 代理，这可能不是开发者想要的。因此，首先通过 Charles 菜单来关闭 macOS Proxy（系统代理），然后配置如下的 SwitchOmega 规则：

其中 Charles 的代理端口可以通过 Proxy -> Proxy Settings 看到。然后将 SwitchOmega 切换到刚刚设置的 Charles 规则，就能过滤掉不想走 Charles 代理的网络请求了。

愿天下没有因升级系统而崩溃重装的电脑 👼

配置全新✨或重装后💀的 Macbook 不完全指南（前端向）