前端开发必备环境安装（Mac OS）

前语

发现自己一年多没更新博客了(/＼)，最近有学弟、学妹问作为前端运用Mac需求建立哪些环境。问的次数多了，干脆整理了一套较为通用和简练的建立流程，假如对你有帮忙的话，欢迎点赞和收藏❤️~

Xcode

必备的App端开发调试浏览器哪个好东西，App St源码之家ore查找下载即可

Homebrew

Homebrew是一款Mac OS平台下的软件包处理东西，具有设备、卸载、更新、检查、查找等许多有用的功用，简略来说便是装软件包的神器。

# 引荐运用清华源
/bin/z浏览器怎样翻开网站sh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrgithub打不开ew.sh)"
​源码编辑器
# 设备完成后记住重启下终端
​
# 验证是否设备成功
brew --version

iTerm2

下载

相比于变量是什么意思原生bash更为好用的终端

1. 官网下载，www.iterm2.com/
2. 运用b源码本钱rew进行设备

brew cask install iterm2

切换shell

# 检查体系其时的shell
cat /etc/shells
​
# 切github官网换shell
chsh -s /bin/zsh

Oh My Zsh

让iTerm2的主题愈加美丽

下载

sh -c "$(curl -fsSL https:ESLint//raw.gigithub镜像thub.com/robbyrussell/github官网oh-my-zsh/eslint文档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 insteslint配置all git
​
# 装备环境变量
vim ~源码资源站/.zshrc  # 添加
export GIT=/usr/local/Cellar/gi浏览器哪个好t/2变量与函数.1.3 #这儿写你自己下载的git版别地址
export PATH=$GIT/bin:$PATH
​
# 保存github镜像
source ~./zshrc

Node

下载nvm

nvm是用于处理node版别的（node version manager）

# 下载
curl -o- https://raw.github变量是什么意思usercontent.com/neslint关闭vm-sh/nvm/v0.38.0/install.sh | bash
​
# 装备环境变量
export NVM_DIR="$([ -z "eslint是什么${XDGgithub中文官网网页_Cgithub直播平台永久回家ONFIG_HOME-}" ] && printf %s "${HOME}/.nv浏览器翻开网页显示不了图片m" || printf %s "${XDG_CONFIG_HOeslint报错ME}/nvm")"
[ -s "$NVM_DIgithub是干什么的R/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
​
# 保存
~/.zshrc

M1芯片运用nvm设备低版别node报错的解决方案

M1芯片在过渡变量和常量的区别期间苹果给出的对应X86芯片的兼容性方案

# 设备
softwareupdate --install-rosetta
​
# 发起
arch -x86_64变量是什么意思 zsh
​
# 指定nod浏览器历史记录设置e 版别
# nvm install 14.15.0

运用nvm控制node版别（np浏览器怎样翻开链接m会跟着nodeslint语法e进行设备）

# 检查全部可用版别
nvm ls-remote
​
# 设备最新稳定版 node
nvm install浏览器约束访问网站 stable 
​
# 设备指定版别
nvm install <version>
​
# 删去已设备的指定版别
nvm uninstall <version>
​
# 切换运用指定的版别
nvm use <version>  切换运用指定的版别node
​
# 指定默许版别
nvm alias defaultgithub官网 <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  registry https://registry.npm.taobao.org

vs code好用的插件

 # 中文简体
Chinese
​
# 标签自闭和
Auto Close源码本钱 Tag
​
# 标签字段重命名
Auto Rename Tag
​
# 更好的注释
Better Coeslint文档mments
​
# 打标签东西，检查源码必备
Bookmarks
​
# 代码静态检查东西
Eslineslint规范t
​
# 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-route变量r Snipp源码年代ets
Typescript React code snippets
Vetur
​
# 检查文件巨细
filesize变量名的命名规矩
​
# 在浏览器中翻开
Open in Browser
​
# Git神器，能够检查每行代码浏览器翻开网页显示不了图片的提交eslint报错人，提交时间等信息
GitLens
​
# SVG代码提示
svg
​
# 主题
One Dark Pro
​
# 文件图标主题
vscode-icons