前端Mac从零到一搭建开发环境

最近由于某些原因需要对两个Mac设备进行环境搭建，结合现有的环境搭建文章进行整理汇总，希望能帮助到使用Mac设备的前端开发节省环境搭建的时间

一、设备配置

手势配置

Mac的触摸板根据不同的手势有很多功能，可以替代日常的鼠标使用，可以按照个人使用习惯优先配置

键盘快捷方式

设置键盘快捷方式实现"快速"唤起设备的特定功能

程序坞配置

修改程序坞的设置，包括位置、外形大小、动画特效

设置用户文件快捷路径

在 Finder 后右键顶部文件名称，在弹出框中点击当前用户的 Home 文件夹（路径如 /Users/用户名/），然后使用快捷键"command + shift + ."显示隐藏的文件夹，可以看到.zshrc配置文件，可以将这个文件夹拖拽到左侧列表添加快捷方式，后续直接在左侧文件列表中点击即可实现跳转

二、安装常用软件

这里提供一个常用的软件列表，利用浏览器下载安装即可

谷歌浏览器：建议优先安装后设置为默认浏览器
vscode：代码编辑软件
postman：网络请求测试工具
raycast：办公提效工具（常用"粘贴历史"、"文件搜索"功能）

三、环境变量配置

3.1 安装homebrew

homebrew是Mac系统的软件包管理工具，可以帮助用户快速安装和更新各种开发工具、库和依赖项，从而提高开发效率和便捷性，所以优先安装这个工具

考虑到部分用户没有VPN，这里提供两种安装

外网源安装

bash 复制代码

/bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"

国内源安装

bash 复制代码

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

Homebrew 安装后需要在"用户Home文件夹"中编辑.zshrc文件，添加其路径到 PATH 环境变量中（可以把下面的代码直接复制粘贴到配置文件中）

bash 复制代码

export PATH="/opt/homebrew/bin:$PATH"

然后在zsh终端中执行source ~/.zshrc来激活刚刚的zsh配置，这样就能正常使用homebrew了

额外提一下，虽然建议使用zsh作为终端工具，但如果有人想用bash的话，这里也给出对应的安装方式：编辑.bash_profile文件，在配置文件中添加export PATH="/opt/homebrew/bin:$PATH，最后在bash终端中执行source ~/.bash_profile进行激活

3.2 安装iterm2

bash 复制代码

brew install --cask iterm2

3.3 安装oh-my-zsh

oh-my-zsh用于管理 Zsh 配置，捆绑了很多有用功能、助手、插件和主题，可以大大提高工作效率

bash 复制代码

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

安装语法高亮插件

作用：让命令行更加易读易懂

bash 复制代码

brew install zsh-syntax-highlighting

在终端中激活插件

bash 复制代码

source /opt/homebrew/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

source ~/.zshrc

安装自动补全插件

作用：根据历史命令和当前输入内容，自动推荐可能的命令

bash 复制代码

git clone <https://github.com/zsh-users/zsh-autosuggestions> ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions

添加.zshrc配置

bash 复制代码

plugins=(zsh-autosuggestions)

激活配置

bash 复制代码

source ~/.zshrc

安装git插件

git 插件是 Oh My Zsh 自带的插件，只需要在 ~/.zshrc 文件中添加以下内容即可：

bash 复制代码

plugins=(zsh-autosuggestions git)

激活配置

bash 复制代码

source ~/.zshrc

3.4 安装git

bash 复制代码

brew install git

配置git信息

bash 复制代码

git config --global [user.name](http://user.name/) "xxx" // 设置用户名
git config --global user.email "xxx" // 设置邮箱

配置git秘钥

bash 复制代码

# 第一步：生成秘钥，可以成功多个秘钥
ssh-keygen -t rsa -C "xxx.com" -f ~/.ssh/id_rsa
ssh-keygen -t rsa -C "xxx.com" -f ~/.ssh/id_rsa_my

# 第二步：打开配置文件，没有config文件可以在ssh目录下执行此命令生成
touch config

# 第三步：添加配置信息，支持添加多组配置信息
# 配置信息1
gitlab one xxx Host git.XXX.net # 这里名称可以随意取，和下面那个Host的不一样就行
HostName git.XXXu.net # 公司 gitlab 的域名
User git IdentityFile ~/.ssh/id_rsa

# 配置信息2
gitlab two xxx Host github.com
HostName github.com
User git IdentityFile ~/.ssh/id_rsa_my

# 第四步：去对应的网站上配置公钥

上面配置了 oh-my-zsh，所以可以使用 git 命令缩写来操作，缩写配置文件目录如下： ~/.oh-my-zsh/plugins/git/.git.plugin.zsh，有很多默认的缩写命令，支持二次修改

alias | grep 'git' // 查看所有git命令别名
ga git add // 添加到暂存区
gaa git add -all // 添加所有改变到暂存区

3.5 安装nvm

bash 复制代码

brew install nvm

在.zshrc添加配置

bash 复制代码

export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"
[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"

然后使用source ~/.zshrc激活配置既可使用nvm，下面列几个nvm的常用命令

命令	作用
nvm ls	列出所有node版本
nvm install <node的版本>	下载指定的node版本
nvm use <node的版本>	使用指定的node版本
nvm alias default <node版本号>	设置默认的node版本号
nvm uninstall <node版本号>	卸载指定的node版本

四、vscode配置

快捷键配置：Command + K & Command + S 打开快捷键绑定可以看到所有的快捷键

插件配置：下面列举几个常用的插件

Chinese (Simplified)：将编辑器显示为中文语言
Prettier - Code formatter：代码格式化工具
Path Intellisense：路径自动提示工具
Npm Intellisense：自动补全npm包
MDX
Markdown All in One
Live Server
GitLens：git工具
GitHub Copilot
ESLint：语法规范工具
ES7+ React/Redux/React-Native snippets：语法提示工具
Auto Rename Tag：自动重命名html标签
Auto Close Tag：自动闭合html标签
Tailwind CSS IntelliSense：tailwind css的语法提示工具

五、浏览器插件配置

在谷歌浏览器插件市场按需配置