效率系列(八) macOS配置前端开发环境

大家好，我是半虹，这篇文章将会介绍如何在 macOS 中从零配置前端开发环境

---

零、序言

这篇文章主要是想提供一份前端开发配置清单，以及简单介绍一下安装步骤，仅供大家参考

正式开始之前先说一下硬件，电脑是 MacBook Air M2，系统是 macOS Sonoma 14.0

一、软件安装

1、Chrome

macOS 其实自带有 Safari 浏览器，但我个人感觉还是 Chrome 用起来更顺手一些

默认的 Google 搜索引擎，内置的 DevTools 开发者工具，丰富的 Extensions 生态，都能提升日常开发体验

不过 App Store 没有提供 Chrome 安装，我们需要自己到官网下载安装，好在过程也非常简单

首先在官网下载安装程序 (dmg 文件)，之后双击运行，将 Chrome 图标拖动到 Application 目录即可

最后，想给大家安利一些自己正在用的 Chrome 插件：

• 几枝：简约古典的新标签页，在新标签页上展示中国传统色的层叠波浪效果搭配经典诗词
• React Developer Tools：React 开发官方插件，提供组件调试以及性能分析工具

2、VSCode

前端开发领域里面，比较常用的 IDE 莫过于 VSCode 和 WebStorm，两个都挺好用的，可以根据需要安装

因为我有多种语言的开发需求，所以选择 VSCode 会更方便一点 ，而 VSCode 也是要自己从官网下载安装

首先在官网下载应用程序 (zip 文件)，然后双击解压，将 VSCode 应用拖动到 Application 目录就可以

这里有一点值得介绍一下，官网上的 Mac zip 下载会有三个选项：

• Intel chip      ：适用于 Intel 芯片
• Apple silicon：适用于 M 系列芯片
• Universal        ：同时适用于 Intel 和 M 系列芯片

建议下载对应的就好，没必要下载 Universal，能节省一点空间，比如我这里就是下载 Apple silicon

最后还是安利一些 VSCode 的插件，大家可以在 VSCode 的 Extensions 面板去搜索安装

• GitLens：Git 多人协作插件，可以提供每个文件历史修改记录，方便追踪文件修改
• Prettier：代码格式化工具，方便统一代码风格

噢噢对了，VSCode 还有一个方便实用的命令行工具，即在终端通过 VSCode 打开指定文件，设置如下：

• 首先，要在 VSCode 按下 command + shift + p 打开命令面板
• 然后，输入 shell command，选择 Install 'code' command in PATH
• 这样，就能在终端使用 code <名称>，在 VSCode 打开指定文件

3、Typora

最后一个安装的软件是 Typora，这是一个即时渲染的  Markdown  写作软件，符合大众一般的写作习惯

这款软件之前也安利过，推荐有 Markdown 写作需求的同学使用，同样也是在官网下载安装

虽说现在 Typora 需要收费，但网上还是有不少“激活教程”的，正常安装后可按以下操作激活：

• 进入目录 /Applications/Typora.app/Contents/Resources/TypeMark

  • 这里可以在访达中按快捷键 command + shift + g 进行搜索

• 打开文件 page-dist/static/js/LicenseIndex.180dd4c7.e861f46f.chunk.js

  • 这里可以用任意文本编辑器，如果上面已经安装 VSCode，那直接用 VSCode 打开就行

• 全文搜索 e.hasActivated="true"==e.hasActivated，并将其替换为 e.hasActivated="true"=="true"

  • 如果你是用 VSCode 打开的，那么按 command + option + f 即可打开替换

二、环境配置

1、Xcode Command Line Tools

Xcode 是 macOS 上的 IDE，主要用于开发 macOS 和 iOS 应用程序，可以在 Apple Developer 进行下载

Xcode 中的命令行工具包 (Command Line Tools)，提供很多通用开发工具，例如 git、gcc、make 等

即使无需开发 macOS 或 iOS 的应用，也能单独下载 Command Line Tools，这时可以用 xcode-select 安装

xcode-select --install
1

安装完成之后，可以输入以下命令查看当前用的 Command Line Tools 路径

xcode-select -p # /Library/Developer/CommandLineTools
1

若想深入看看 Command Line Tools 究竟包括什么，打开上面的路径就可以

简单来说包括 Library、SDKs、usr 三个文件夹，其中 usr 的 bin 目录下就有上百个常用的命令行工具

值得说明的是 Command Line Tools 可能存在多个，对应不同的 Xcode

而 xcode-select 是 macOS 自带的工具，用于指定开发者目录

该目录可决定 Command Line Tools 和 BSD development commands 的路径

其 xcode-select 常用参数如下：

• xcode-select --install：安装命令行工具包
• xcode-select -p：打印当前开发者目录
• xcode-select -s：切换当前开发者目录
• xcode-select -r：重置默认开发者目录

2、nvm

nvm 是 node 环境管理包，可以很方便地切换多个 node 版本，按照官网说明，安装方式如下：

# 方式一
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# 方式二
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
1
2
3
4
5

其本质就是下载 install.sh 文件，然后用 bash 执行该文件：bash install.sh

nvm 默认安装到 ~/.nvm，且在 ~/.zshrc 配置环境变量

如果 安装时没有 ~/.zshrc，可手动创建后重新执行脚本，或手动创建后直接将以下文本写入文件

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
1
2
3

最后 重新激活配置文件即可

source ~/.zshrc
1

3、conda

conda 是 python 环境管理包，可以很方便地管理多个 python 环境，按照官网说明，安装步骤如下：

• 创建安装目录

mkdir -p ~/.miniconda3
1

• 下载安装脚本

curl https://repo.anaconda.com/miniconda/Miniconda3-latest-MacOSX-arm64.sh -o ~/.miniconda3/miniconda.sh
1

• 执行安装脚本

bash ~/.miniconda3/miniconda.sh -b -u -p ~/.miniconda3
1

• 删除安装脚本

rm -rf ~/.miniconda3/miniconda.sh
1

• 配置环境变量

~/miniconda3/bin/conda init zsh # macOS 默认终端目前是 zsh，如果是其它终端，可以用其它参数
1

本质上就是将以下文本写入 ~/.zshrc

# >>> conda initialize >>>
# !! Contents within this block are managed by 'conda init' !!
__conda_setup="$('/Users/<username>/.miniconda3/bin/conda' 'shell.zsh' 'hook' 2> /dev/null)"
if [ $? -eq 0 ]; then
    eval "$__conda_setup"
else
    if [ -f "/Users/<username>/.miniconda3/etc/profile.d/conda.sh" ]; then
        . "/Users/<username>/.miniconda3/etc/profile.d/conda.sh"
    else
        export PATH="/Users/<username>/.miniconda3/bin:$PATH"
    fi
fi
unset __conda_setup
# <<< conda initialize <<<
1
2
3
4
5
6
7
8
9
10
11
12
13
14

三、终端设置

1、界面

macOS 默认的终端软件是 Terminal，个人觉得原有的界面有点过于正规了，所以稍稍调整一下

根据自己的使用习惯，做了两个设置：

• 半透明界面
  • 打开终端，按快捷键 command + shift + , 打开设置
  • 描述文件 - 文本 - 背景：设置为黑色，不透明度设置为 90%，模糊度设置为 0%
  • 描述文件 - 文本 - 文本：设置为白色，不透明度设置为 100%
• 全屏幕终端
  • 打开终端，按快捷键 command + shift + , 打开设置
  • 描述文件 - 窗口 - 窗口大小：列数 & 行数 各设置为大于屏幕宽高即可

2、功能

一个好的终端应该是好看且好用的，但 macOS 默认的终端 zsh 确实算不上是这个标准

为此，oh-my-zsh 来了，这是一个基于 zsh 的拓展工具集,  提供主题配置、插件机制等常用功能

按照官网说明，安装方法如下：

# 方式一
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

# 方式二
sh -c "$(wget https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh -O -)"
1
2
3
4
5

本质其实还是下载 install.sh 文件，然后使用 bash 执行这个文件 bash install.sh

oh-my-zsh 默认安装在 ~/.oh-my-zsh，环境变量配置在 ~/.zshrc

注意，这里会有一个坑，oh-my-zsh 安装好之后，会发现原来设置的 nvm 和 conda 的环境变量失效了

因为在安装时它会重写 ~/.zshrc，并把原来的 ~/.zshrc 另存为 .zshrc.pre-oh-my-zsh

所以还需要把 .zshrc.pre-oh-my-zsh 原有的 nvm 和 conda 的配置复制回新的 ~/.zshrc 文件

下面主要讲讲怎么配置主题和应用插件

我们可以看到上面配置文件 ~/.zshrc，其中有两行是比较重要的

# 主题配置项
ZSH_THEME="robbyrussell"

# 插件配置项
plugins=(git)
1
2
3
4
5

而在 ~/.oh-my-zsh/themes 目录下可以看到所有已安装的主题，更换主题只需要修改 ZSH_THEME 就可以

例如 目录下有 af-magic.zsh-theme 主题文件，那么设置为 ZSH_THEME="af-magic" 就可以使用 该主题

官网 可以看到所有可用的主题

同样 ~/.oh-my-zsh/plugins 目录下可以看到所有已下载的插件，新增插件只需要加入 plugins 就可以

例如 有一款名为 z 的插件，如果希望新增这个插件，那么可以修改为 plugins=(..., z)

官网 可以看到所有可用的插件

注意，有些插件如果还没有下载到插件目录，配置使用之前需要先下载

最后，推荐一些非常好用的插件，更多的可以留给大家以后慢慢去探索：

• 自动补全：zsh-autosuggestions

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

• 语法高亮：zsh-syntax-highlighting

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

安装之后，进行配置，打开 ~/.zshrc 文件，修改 plugins 栏目，新增进去就好

plugins = (
  ...,
  zsh-autosuggestions,
  zsh-syntax-highlighting
)
1
2
3
4
5

修改之后，激活修改

source ~/.zshrc
1

---

好啦，本文到此结束，感谢您的阅读！

如果你觉得这篇文章有需要修改完善的地方，欢迎在评论区留下你宝贵的意见或者建议

如果你觉得这篇文章还不错的话，欢迎点赞、收藏、关注，你的支持是对我最大的鼓励 (/ω＼)