【记录贴】拿到一台新 Mac 后如何配置前端开发环境

471 阅读2分钟

一、登录 Apple ID,将一些数据同步过来。再根据自己的需要更新系统。再根据自己的喜好调整系统设置。

可以在 App Store 里安装 New File Menu,让创建文件变得简单。

这里建议搞个🪜,免得后面安装东西的时候装不上。

准备工作:

1、访达 - 前往 - 前往文件夹 - 输入/private后回车 - 找到etc文件夹右键 - 显示简介 - 共享与权限里全部开放读与写
2、进入etc文件夹,同样操作一下hosts文件

ps:如果遇到终端被墙了,为避免连不上github,(1)可以安装 proxifier(这玩意在传输层),将 application 设置为 curl; git-remote-http; ssh (2)或者打开🪜的TUN模式or增强模式

二、安装 Homebrew

这是mac系统的包管理器,用来安装你需要但是系统没装的东西。照着官网整。

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

这里可能会报错:curl: (7) Failed to connect to raw.githubusercontent.com port 443 after 3 ms: Couldn't connect to server

原因是被墙了,解决办法:

1、查出 raw.githubusercontent.com 的ip
2、添加几条hosts配置

199.232.68.133 raw.githubusercontent.com  
199.232.68.133 user-images.githubusercontent.com  
199.232.68.133 avatars2.githubusercontent.com  
199.232.68.133 avatars1.githubusercontent.com

brew -v 能查看版本即为安装成功。

现在会自动帮忙安装 Xcode Command Line Tools了,所以妈妈再也不用担心装不上git了。

三、安装 Xcode

如果不需要开发Mac应用或iOS应用,可以不装。

四、安装 Git

4.1、安装
brew install git

git --version 能查看版本即为安装成功。

4.2、配置 SSH key

mac os 13以上系统需使用ssh-keygen -t ed25519 -C "email@example.com"来生成。

生成后将~/.ssh/id_ed25519.pub里的内容复制到 GitLab 或 GitHub 中即可。

4.3、初始化
// 配置用户名
git config --global user.name "用户名"

// 配置邮箱
git config --global user.email "邮箱"

// 查看配置
git config -l

五、安装 oh-my-zsh

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

可以配置zsh的插件、主题等,让shell的体验拉满。

5.2、装上我最喜欢的主题 powerlevel10k
git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

写入 ZSH_THEME="powerlevel10k/powerlevel10k" 在 ~/.zshrc.

5.3、启用一些插件

sudo、vscodezsh-autosuggestionszsh-syntax-highlighting 等。

六、安装 nvm

6.1、安装
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

如果用 brew 来安装可能会有路径问题,所以我们通过 curl 来安装。若出现报错:

fatal: unable to access 'https://github.com/nvm-sh/nvm.git/': HTTP/2 stream 1 was not closed cleanly before end of the underlying stream

可以在 curl 后加上 --http1.1 解决。

6.2、配置

将以下指令添加到 ~/.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 -v能查看版本即为安装成功。

6.3、下载node
nvm install lts/gallium

node -vnpm -v能查看版本为安装成功。

七、其他

7.1、nrm
npm install -g nrm

安好后,报错:ERR_REQUIRE_ESM。这是由于open这个依赖使用了esm,而nrm还在使用cjs。临时解决办法:

npm install -g nrm open@8.4.2 --save

解决后使用nrm --version查看版本。

7.2、yarn

INFO:建议通过 Corepack 来使用 yarn、pnpm 而无需安装它们!

npm install --global yarn

yarn -v查看版本。

注意:若同时使用 nrm 和 yarn,那么 nrm 设置的源可能会覆盖掉 yarn 自己的源。

7.3、pnpm

INFO:建议通过 Corepack 来使用 yarn、pnpm 而无需安装它们!

如果你习惯使用pnpm作为包管理器,可以通过brew来安装。

brew install pnpm

pnpm -v查看版本。

7.4、Chrome

登录谷歌账号,将书签、插件等信息同步过来。

7.5、VS Code

官网安得慢,可以将地址切换为国内源。