从0开始配置Mac前端基本开发环境

Mac前端环境搭建

大家好，我又来了，之前在滴滴实习了几个月，这次换了个公司实习，又拿到了一台新的Mac，所以就记录了一下自己配置基本前端开发环境的过程，也可以给一些有需要的朋友做一下参考。希望可以帮助到大?

Homebrew

拿到一台新的Mac，就是需要安装各种我们平时常用到的软件了。首先建议安装的就是Homebrew(Homebrew是Mac OSX下使用的包管理工具,用来安装OS系统中没有预装的东西)

地址Homebrew官网

按command + 空格，然后输入terminal，控制台上输入/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"便可以进行安装

等到安装完成了，就会显示这个

出现安装成功提示之后，就可以配置路径了。

控制台输入echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/这里是电脑的用户名/.zprofile

然后再输入eval "$(/opt/homebrew/bin/brew shellenv)"

完成上面两步之后，控制台输入brew -v出现版本号那就是配置成功了

Git环境

安装完homebrew之后就可以使用homebrew来进行Git的安装了。Git安装官网

控制台输入brew install git

如果安装成功了，最后输入git --version可以看到版本号

初始化

安装好git之后就要进行初始化操作。第一次使用git的时候我们需要给git配置用户名和邮箱，用户和邮箱可以使用github的，也可以使用自己公司的gitlab仓库的账号

配置用户名

git config --global user.name "用户名"

配置邮箱

git config --global user.email "邮箱地址"

配置好这个以后我们输入便可以看到我们所有的配置信息了，然后可以看到user.name和user.email配置得对不对

git config -l

然后就可以配置ssh密钥了。ssh密钥允许系统和gitlab之间建立安全连接。在上传代码的时候使用https需要频繁的输入密码，而使用ssh的话可以省去这个步骤。

• 检查SSH秘钥是否存在。控制台输入：cat ~/.ssh/id_rsa.pub
• 若密钥不存在，就需要生成SSH 密钥 。执行命令ssh-keygen -t rsa -C "邮箱地址"
• 在gitlab上添加SSH key。执行命令查看公钥：cat ~/.ssh/id_rsa.pub，然后将显示出来的一大串字符串复制下来
• 打开gitlab的找到Profile Settings下的SSH Keys，在Add an SSH key中，将刚刚复制的一大串字符串密钥粘贴到Key的框框里，在Title这里给这个key设置一个响当当的名字，点击Add key就大功告成。

控制台优化

zsh

zsh（z-shell）是一款用于交互式使用的shell，也可以作为脚本解释器来使用。其包含了 bash，ksh，tcsh 等其他shell中许多优秀功能，也拥有诸多自身特色。 从 MacOS Catalina 版开始，其默认shell从bash改为zsh。)

如果机器上当前安装的zsh不是最新版本(zsh --version查看当前版本)，可以使用brew install zsh安装。

oh-my-zsh

下载官网

• 兼容bash

• 自动cd：只需输入目录的名称即可

• 命令选项补齐：比如输入git，然后按Tab，即可显示出git都有哪些命令

• 目录一次性补全：比如输入Doc/doc按Tab键会自动变成Documents/document/

  各种提效插件和美化主题的支持

看到这个的时候就表示安装成功了。

常用zsh提效插件

zsh-syntax-highlighting 语法高亮插件

依次输入以下的命令

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git 

vim ~/.zshrc

在文件里找到plugins=(git)，括号是插件列表，git是默认安装的插件。添加插件

plugins=(
  git
  zsh-syntax-highlighting
)

让插件生效

source ~/.zshrc

zsh-autosuggestions 自动路径补全

输入命令时可提示自动补全（会出现灰色的命令提示，你曾经访问过的命令），然后按键盘 → (右方向键)

git clone git://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions

vim ~/.zshrc

在文件里找到plugins，添加

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

让插件生效

source ~/.zshrc

autojump 跳转插件

实现目录间快速跳转，想去哪个目录直接 j + 目录名，或者想在Finder打开哪个目录就直接jo + 目录名，不用频繁的 cd 了

安装

brew install autojump

vim ~/.zshrc

在文件里找到plugins，添加

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

然后在zshrc文件末尾(最后一行)添加

[[ -s $(brew --prefix)/etc/profile.d/autojump.sh ]] && . $(brew --prefix)/etc/profile.d/autojump.sh
source $ZSH/oh-my-zsh.sh

让插件生效

source ~/.zshrc

Node环境安装

主要是node和常用的工具

brew install node

安装完成后输入node -v显示版本号就安装成功了

node版本管理工具安装

brew install nvm

然后按照安装提示，创建 .nvm 目录

mkdir ~/.nvm

编辑 ~/.zshrc 配置文件

vim ~/.zshrc 

在 ~/.zshrc 配置文件后添加如下内容，最后一行

export NVM_DIR="$HOME/.nvm"
  [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && . "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm
  [ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && . "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

让配置生效

source ~/.zshrc

然后输入nvm -v查看版本号，显示版本号则安装成功