最近新购入了一台Mac，记录了前端开发环境的一些安装配置过程。

基于MacBook Air M4芯片进行开发环境配置

1. 安装Git

在中终端输入 git -v 如果有版本号，这说明，系统中已经存在git，如果没有，系统会弹出一个对话框，确认后，会自动下载git。当然也可以使用HomeBrew使用 brew install git 来进行git的安装。

设置全局信息

git config --global user.name 'Jerry'

git config --global user.name 'Jerry@example.com'

2. 安装HomeBrew

可以参考官网的安装方式macOS（或 Linux）缺失的软件包的管理器 — Homebrew。或者使用下文中的方式

2.1 终端执行/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"（国内镜像，需要git，请安装git，任意镜像源均可）会进行自动安装

​
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

​

2.2 安装完成之后，终端执行source ~/.zshrc 或者重新开启终端使配置生效。

2.3 执行brew -v ，验证是否安装成功。

3. 使用HomeBrew安装NVM（node版本管理工具）

没有使用NVM之前一直是手动安装Nodejs，公司项目中会用到12的版本和20的版本，效率真的很差。后来使用NVM一行代码直接切换nodejs的版本，也不需要添加额外的配置操作，方便滴很！

3.1 执行brew install nvm

3.2 执行下边的代码内容

mkdir ~/.nvm
echo "export NVM_DIR=~/.nvm\nsource \$(brew --prefix nvm)/nvm.sh" >> .zshrc
source ~/.zshrc

3.3 执行 nvm -v 验证是否安装成功

3.4 安装成功后，执行open .zshrc 打开配置文件，添加配置。添加之后，在终端执行source ~/.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
# 添加环境变量, 值为国内的淘宝镜像源
export NVM_NODEJS_ORG_MIRROR=http://npmmirror.com/mirrors/node
export NVM_IOJS_ORG_MIRROR=http://npmmirror.com/mirrors/iojs

4. 使用nvm下载node

4.1 终端执行 nvm install node（安装最新的node版本）

或者执行 nvm install Node.js的版本号

4.2 nvm 常用命令

• nvm install [<version>]  指定版本下载
• nvm uninstall <version> 指定版本卸载
• nvm use [<version>]  指定使用版本
• nvm ls 查看存在的nodejs版本
• 其他常用命令可参考nvm命令 nvm命令使用 - nvm中文官网（NVM官网）

5. vscode安装

vscode官网下载

5.1 版本对应的芯片类型

• Inter chip：inter芯片
• Apple silicon：M系列芯片
• Universal： 通用版本

5.2 下载好的.zip文件直接时应用程序，需要在访达中，将下载好的文件拖动到应用程序中，此时才真正的完成了vscode的安装。

5.3 运行程序是，询问是否打开，打开即可。

5.4 安装插件

• Chinese（中文汉化包）
• Auto Close Tag（自动闭合标签）
• Auto Rename Tag（标签重命名，在更改开始标签是会同步更改结束标签）