文章/答案/技术大牛

发布

社区首页 >专栏 >配置全新✨或重装后💀的 Macbook 不完全指南（前端向）

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

玖柒的小窝

修改于 2021-10-26 09:03:05

2.1K00

代码可运行

文章被收录于专栏：各类技术文章~各类技术文章~

运行总次数：0

代码可运行

俗话说，工欲善其事，必先利其器。当你拿到一台新的 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
复制代码

将环境变量 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.pub
$ ssh-add ~/.ssh/id_rsa_github.pub
复制代码

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 规则：