0%

打造超强终端!

工欲善其事,必先利其器!

本文将从一个 MacOS 新机开始,一步步搭建一个简单、易用、强大的前端开发环境!

终端增强

iTerm2

iTerm2 是一个增强型终端,功能比自带的 Terminal 更强大,在最新的版本中 shell 环境已默认为 zsh。

可以直接在官网下载 https://iterm2.com/downloads.html

oh my zsh

Oh My Zsh 是一款 zsh 的增强工具

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

如果提示 curl 未安装,可以用 wget 来安装

1
sh -c "$(wget https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh -O -)"

如果提示网络、SSL 错误,可以单独在浏览器中打开 https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh
将 shell 脚本保存下来,在本地执行

P10K

P10K 全名 powerlevel10k, 是一款 iterm2 的主题管理工具,可以通过它来个性化你的 iTerm2

安装脚本

1
git clone --depth=1 https://gitee.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

然后 vim ~/.zshrc,搜索 ZSH_THEME,将主题设置为 powerlevel10k/powerlevel10k

1
ZSH_THEME="powerlevel10k/powerlevel10k"

完毕后,重启终端,会默认进行 p10k的配置。

后续也可以通过 p10k configure 随时修改配置。

zsh 插件

zsh-autosuggestions

一个命令自动补全插件

1
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

zsh-syntax-highlighting

一个命令行高亮插件

1
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

安装完毕后记得把插件添加到 .zshrc 配置中,zsh-syntax-highlighting 插件比较特殊,记得一定要放在最后一个

1
2
3
4
5
plugins=( 
# other plugins...
zsh-autosuggestions
zsh-syntax-highlighting
)

Brew 安装

官网文档

Brew 可以理解为 MacOS 的包、软件管理系统,底层使用 Ruby(MacOS 已自带) 实现,在日常开发中,可以通过
brew install xxx 来安装软件。

Brew 的默认资源存储在 raw.githubusercontent.com 中,国内龟速,
因此我们可以通过 gitee 的镜像来进行 Brew 的初始安装,以及通过 bottles 镜像来为 install 行为提速

详见之前的文章:如何为 Brew 提速

NVM 安装

node 版本管理工具,大家都懂~

1
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

国内镜像:https://gitee.com/mirrors/nvm/tree/master

安装完毕后,一般会自动设置node 环境,可在 .zshrc 中检查是否在末尾已添加:

1
2
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

重启终端或 source .zshrc。

NRM 安装

相比与 NVM, NRM 知名度不是很高,它的作用也非常简单:随时切换node 仓库源。

例子:

1
2
3
npm install -g nrm
nrm ls
nrm use cnpm

Python PIP 源

Mac OS 已自动 python2、3,所以只需要切换一下源就ok 了

1
2
# 清华源
pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple

其他可用源: