工欲善其事,必先利其器!
本文将从一个 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 | plugins=( |
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 | export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" |
重启终端或 source .zshrc。
NRM 安装
相比与 NVM, NRM 知名度不是很高,它的作用也非常简单:随时切换node 仓库源。
例子:
1 | npm install -g nrm |
Python PIP 源
Mac OS 已自动 python2、3,所以只需要切换一下源就ok 了
1 | 清华源 |
其他可用源: