当前端仔拿到一台新电脑（Mac M1 环境配置）

完山
38 阅读3分钟

这周末受不了被我这几年玩得脏脏的电脑，于是重装了系统，神清气爽，现在开始装环境了。想到之前实习也总是有给新发的电脑配置环境这个环节，每次在过程中总是多少会踩坑，不如记下来，说不定对其他人和以后的自己有用呢（？

电脑通用系统设置

根据个人习惯设置

  • 登陆 Apple 账号
  • 设置系统语言为中文：左上角🍎图标-系统设置-通用-语言和地区，把简体中文拖到首选语言的最上面
  • 两指单击实现右键点击：左上角🍎图标-系统设置-触控板-光标与点按，辅助点按 设为 双指点按或轻点，并启用 轻点来点按

下载常用工具

  • 重点是要 科学上网
  • 在 App Store 下载：XCode
  • 通过各自官网下载：Chrome 浏览器、VSCode、Cursor、WebStorm、iTerm2、Warp、Typora（付费）
  • 登陆 Google 账号和 Github 账号

首先安装 Homebrew

打开终端，执行命令安装 Homebrew，然后就可以很方便地用 Homebrew 来安装别的工具

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

Homebrew 官网 也为 MacOS 提供了安装包（例如 Homebrew-5.0.11.pkg），但需要系统版本在 MacOS 14 及以上

安装和连接 Git

brew install git

通过 Homebrew 安装好 Git 之后，顺便完成基本配置

# 通过你的名字和邮箱来配置 git 账户
git config --global user.name "your-name"
git config --global user.email "your-email"

通过你的邮箱来配置 ssh，接下来的步骤可以一直按回车键直到结束

ssh-keygen -t ed25519 -C "your-email"

通过 pbcopy < ~/.ssh/id_ed25519.pub 命令或者直接手动复制刚刚生成的密钥，打开 Github，点击右上角头像，点击 settings，点击 SSH and GPG keys 目录，点击 New SSH key，把刚刚复制的密钥粘贴进去。完成以上操作后，回到终端检查是否成功

ssh -T git@github.com
# 应当看到输出 Hi your-name! You've successfully authenticated, but GitHub does not provide shell access.

安装命令行工具 ohmyzsh 和插件

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

# 安装语法高亮、自动补全、自动跳转插件
brew install zsh-syntax-highlighting zsh-autosuggestions autojump

通过 vim ~/.zshrc 命令打开 .zshrc，可以看到刚刚的过程自动加入了很多配置代码和说明

image.png

为了简单起见，可以把这些关于 ohmyzsh 的配置代码都删掉，再把下面的配置粘贴进 ~/.zshrc。想更改主题色可以参考 ohmyzsh 主题色列表

# ==================== Oh My Zsh 配置 ====================
export ZSH="$HOME/.oh-my-zsh"
# 主题色
ZSH_THEME="robbyrussell"
# 插件列表
plugins=(
    git
    autojump
)
# 加载 ohmyzsh
source $ZSH/oh-my-zsh.sh
# 加载插件
source /opt/homebrew/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh
source /opt/homebrew/share/zsh-autosuggestions/zsh-autosuggestions.zsh

p.s. 由于存在路径问题（ohmyzsh 找不到由 brew 下载的插件），所以有的插件不写在 ohmyzsh 的插件列表里，而是写在配置代码的最后。

重新加载确保配置生效

source ~/.zshrc

iTerm 配置

如果 iTerm 打开的时候命令行左侧有个很丑的箭头图标，取消选中下图选项可以让它消失

image.png

如果想切换主题色，可以在 iTerm主题色 网站里下载 zip 文件并解压，解压后的文件里有一个 schemes 文件夹。接着打开 iTerm 的设置面板，找到 Color Preset 下拉选框，找到 import 选项，导入 schemes 中的文件就可以切换刚刚下载的各种主题配置

image.png

安装 Node 相关环境

安装 nvm，并按照提示完成 nvm 的初始化配置

# 安装nvm
brew install nvm

# 如果没有 ～/.nvm ，先创建文件夹
mkdir ~/.nvm

# 添加 nvm 初始化代码到 ~/.zshrc
vim ~/.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

确认 nvm 安装完成

# 加载配置
source ~/.zshrc

# 检查nvm版本，应该输出类似于 0.40.3 的版本号
nvm --version

使用 nvm 安装 Node，个人开发可以装个最新的稳定版。手里有啥项目需要用到 18 或 20 等老版本的话也装一下对应的版本

# 重新加载配置确保生效
source ~/.zshrc

# 查看可安装的版本
nvm ls-remote

# 安装特定版本
nvm install 20.20.0
nvm install 24.13.0

# 使用某个特定版本
nvm use 20

# 验证安装，如果安装成功，会输出对应的版本号
node --version
npm --version

再安装另外俩常用包管理器

brew install pnpm
brew install yarn

还想到什么之后再补充ww

avatar
文章
阅读
粉丝