前端开发必备环境安装（Mac OS）发现自己一年多没更新博客了(/ω＼)，最近有学弟、学妹问作为前端使用Mac需要搭建哪

前言

发现自己一年多没更新博客了(/ω＼)，最近有学弟、学妹问作为前端使用Mac需要搭建哪些环境。问的次数多了，索性整理了一套较为通用和简洁的搭建流程，如果对你有帮助的话，欢迎点赞和收藏❤️~

Xcode

必备的App端开发调试工具，App Store搜索下载即可

Homebrew

Homebrew是一款Mac OS平台下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等很多实用的功能，简单来说就是装软件包的神器。

# 推荐使用清华源
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

# 安装完成后记得重启下终端

# 验证是否安装成功
brew --version

iTerm2

下载

相比于原生bash更为好用的终端

官网下载，www.iterm2.com/
使用brew进行安装

brew cask install iterm2

切换shell

# 查看系统当前的shell
cat /etc/shells

# 切换shell
chsh -s /bin/zsh

Oh My Zsh

让iTerm2的主题更加漂亮

下载

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

设置主题

open ~/.zshrc

# 找到 ZSH_THEME
# robbyrussell 是默认的主题
ZSH_THEME="robbyrussell"

# ZSH_THEME="样式名称"
# 更多主题 https://github.com/ohmyzsh/ohmyzsh/wiki/Themes

# 修改配置项后记得使其生效
source ~/.zshrc

升级自带的Git

# 下载
brew install git

# 配置环境变量
vim ~/.zshrc  # 添加
export GIT=/usr/local/Cellar/git/2.1.3 #这里写你自己下载的git版本地址
export PATH=$GIT/bin:$PATH

# 保存
source ~./zshrc

Node

下载nvm

nvm是用于管理node版本的（node version manager）

# 下载
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

# 配置环境变量
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

# 保存
~/.zshrc

M1芯片使用nvm安装低版本node报错的解决方案

M1芯片在过渡期间苹果给出的对应X86芯片的兼容性方案

# 安装
softwareupdate --install-rosetta

# 启动
arch -x86_64 zsh

# 指定node 版本
# nvm install 14.15.0

使用nvm控制node版本（npm会随着node进行安装）

# 查看所有可用版本
nvm ls-remote

# 安装最新稳定版 node
nvm install stable  

# 安装指定版本
nvm install <version>

# 删除已安装的指定版本
nvm uninstall <version>

# 切换使用指定的版本
nvm use <version>  切换使用指定的版本node

# 指定默认版本
nvm alias default <version>

使用yarn进行下载包

yarn和npm的对比

brew install yarn

设置npm镜像源

 # npm

 # 获取镜像源地址
npm get registry

 # 设置镜像源
npm set registry https://registry.npm.taobao.org


 # yarn

 # 获取镜像源地址
yarn config get registry

 # 设置镜像源
yarn config set registry https://registry.npm.taobao.org

vs code好用的插件

 # 中文简体
Chinese

 # 标签自闭和
Auto Close Tag

 # 标签字段重命名
Auto Rename Tag

 # 更好的注释
Better Comments

 # 打标签工具，查看源码必备
Bookmarks

 # 代码静态检查工具
Eslint

 # HTML & Css相关
CSScomb
HTML CSS Support
HTML Boilerplate
HTML Snippets

 # JS相关
ES7 React/Redux/React-Native/JS snippets
React-Native/React/Redux es6/es7
React/Redux/react-router Snippets
Typescript React code snippets
Vetur

 # 查看文件大小
filesize

 # 在浏览器中打开
Open in Browser

 # Git神器，可以查看每行代码的提交人，提交时间等信息
GitLens

 # SVG代码提示
svg

 # 主题
One Dark Pro

 # 文件图标主题
vscode-icons