效率系列(八) 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
安装完成之后，可以输入以下命令查看当前用的 Command Line Tools 路径
xcode-select -p # /Library/Developer/CommandLineTools
若想深入看看 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
其本质就是下载 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
最后 重新激活配置文件即可
source ~/.zshrc
3、conda
conda 是 python 环境管理包，可以很方便地管理多个 python 环境，按照官网说明，安装步骤如下：
- 创建安装目录
mkdir -p ~/.miniconda3
- 下载安装脚本
curl https://repo.anaconda.com/miniconda/Miniconda3-latest-MacOSX-arm64.sh -o ~/.miniconda3/miniconda.sh
- 执行安装脚本
bash ~/.miniconda3/miniconda.sh -b -u -p ~/.miniconda3
- 删除安装脚本
rm -rf ~/.miniconda3/miniconda.sh
- 配置环境变量
~/miniconda3/bin/conda init zsh # macOS 默认终端目前是 zsh，如果是其它终端，可以用其它参数
本质上就是将以下文本写入 ~/.zshrc
# >>> conda initialize >>> # !! Contents within this block are managed by 'conda init' !! __conda_setup="$('/Users//.miniconda3/bin/conda' 'shell.zsh' 'hook' 2> /dev/null)" if [ $? -eq 0 ]; then eval "$__conda_setup" else if [ -f "/Users//.miniconda3/etc/profile.d/conda.sh" ]; then . "/Users//.miniconda3/etc/profile.d/conda.sh" else export PATH="/Users//.miniconda3/bin:$PATH" fi fi unset __conda_setup #
- 配置环境变量
- 删除安装脚本
- 执行安装脚本
- 下载安装脚本
- 创建安装目录
- 如果你是用 VSCode 打开的，那么按 command + option + f 即可打开替换
-
