Hshen
人若无名 便可潜心练剑
GitHub Abou byHshen Hshen

前端环境Mac配置篇

2018年1月2日

预计阅读：7min

前端开发环境简介

本文介绍了在 Mac 下搭建高效前端开发环境的常用工具及配置方法，适合前端开发新手和有经验的开发者查阅。内容涵盖包管理、终端美化、版本管理、数据库工具等。

Homebrew

Homebrew 是一款 Mac OS 平台下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令，就可以实现包管理，而不用你关心各种依赖和文件路径的情况，十分方便快捷。

如果你 zsh 或者 nvm 连接超时，在 /etc/hosts 文件里面添加 199.232.68.133 raw.githubusercontent.com

安装 Homebrew
# 在终端输入如下命令
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
常用命令
brew install git # 安装软件
brew search git  # 搜索软件
brew remove git  # 卸载软件
brew list        # 显示已安装的软件
brew update      # 更新所有软件
brew doctor      # 诊断环境问题
替换 brew 源
# 进入 brew 安装目录
cd "$(brew --repo)"
 
# 替换源 (个人感觉比阿里云稳定)
git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git
 
# 更新 brew
brew update
 
# 可以替换的源
腾讯源: https://mirrors.cloud.tencent.com/homebrew/brew.git
阿里源: https://mirrors.aliyun.com/homebrew/brew.git
清华源: https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git
卸载 Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/uninstall.sh)"

iTerm2 + Zsh + Oh My Zsh

iTerm2：是 Mac 下终端的替代品，比自带的终端强大许多。 Zsh：Linux 的一种 shell 外壳。 Oh My Zsh：用来管理 zsh 的配置，拥有丰富的插件和主题。

安装 iTerm2
# 官网下载地址，下载的是压缩文件，解压后是执行程序文件，直接将它拖到 Applications 目录下
https://www.iterm2.com/
 
# 通过 Homebrew 安装
brew install --cask iterm2
安装 Oh My Zsh
# 在终端输入如下命令
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
 
# 安装好之后把 Zsh 设置为当前用户的默认 Shell
chsh -s /bin/zsh
推荐 Oh My Zsh 插件
# 自动建议
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
# 语法高亮
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

编辑 ~/.zshrc，plugins 数组中添加

plugins=(git zsh-autosuggestions zsh-syntax-highlighting)

使配置生效

source ~/.zshrc

升级 Oh My Zsh
omz update
iTerm2 美化与常用技巧
  • 支持分屏、标签页、搜索、配色方案等。
  • 可在 iTerm2-Color-Schemes 下载喜欢的配色方案。
  • 推荐字体：Fira Code、JetBrains Mono（支持连字和美观的代码显示）。

Git

安装 Git
# 通过 Homebrew 安装
git install git
 
# 通过官网下载
https://git-scm.com/downloads
创建 ssh key
ssh-keygen -t rsa -C "你的Email"
验证有效性
ssh -T git@github.com
常用配置
git config --global user.name "你的名字"
git config --global user.email "你的邮箱"
git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.ci commit
git config --global alias.st status
推荐 GUI 客户端

Nvm

nvm 是 Mac 下的 node 版本管理工具，可以任意切换 node 版本。相比 n，nvm 安装的 node 版本是隔离开的，每个 node 版本都有独立的文件夹。 Nvm 仓库地址

安装 Nvm
# 在终端输入如下命令
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
配置环境变量
# 编辑用户根目录下的 ~/.bash_profile 文件添加以下环境变量；如果你用的是 zsh 那么编辑 ~/.zshrc
# 打开新的窗口环境变量生效，或者执行 source ~/.bash_profile 或 source ~/.zshrc 及时生效
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
nvm 常用命令
nvm install   # 安装指定版本
nvm uninstall # 卸载已安装的 node 版本
nvm use       # 切换已安装的 node 版本
nvm ls        # 列出本机已安装的 node 版本
nvm ls-remote # 列出所有远程服务器可安装的 node 版本
nvm current   # 显示当前正在用的 node 版本
nvm alias default v8.9.0 # 默认 node 版本
nvm alias     # 给不同的 node 版本添加别名
nvm unalias   # 删除已定义的别名
卸载 Nvm
rm -rf ~/.nvm
# 删除相关环境变量配置
node 与 npm 关系说明
  • nvm 管理 node 版本，每个 node 版本自带独立的 npm。
  • 可通过 nvm use 版本号 切换 node/npm 环境。

mycli

A Terminal Client for MySQL with AutoCompletion and Syntax Highlighting.

安装
brew update && brew install mycli
常用命令
mycli -u [name] -p [password]           # 连接本地数据库
mycli -h [host] -u [name] -p [password] # 连接远程数据库
配置文件路径
  • 默认配置文件：~/.myclirc

常见问题 FAQ

  1. Homebrew 安装缓慢或失败？
    • 检查网络，建议更换国内源。
  2. iTerm2 中文乱码？
    • 设置字体为支持中文的字体，如”PingFang SC”。
  3. Oh My Zsh 插件不生效？
    • 检查 ~/.zshrc 配置，确认插件已添加并 source ~/.zshrc。
  4. nvm 安装 node 失败？
    • 检查网络，或使用 nrm 切换 npm 源。
  5. mycli 连接失败？
    • 检查数据库地址、端口、用户名和密码是否正确。

参考链接

Edit on GitHub
浙ICP备 - 20011173号