Mac前端开发环境搭建

Original
253 阅读4分钟 
📌 按照排序先后安装即可

iTerm2

介绍

比 macOS 自带的默认终端好用，主要是好看:)，安装了以后就不要使用系统默认终端了

安装

如果无法翻墙，可以先通过安装下面 homebrew 后使用 brew install iterm2 来进行安装

iterm2

Homebrew

介绍

macOS（or Linux）缺失的软件包管理器

安装

❗ 需要在代理环境下安装，否则下载速度感人

直接官网 brew.sh/ 安装

安装 Homebew 遇到问题或者无法翻墙可参考这篇博客

oh-my-zsh

介绍

Oh My Zsh 是一个开源、社区驱动的框架，用于管理zsh配置

安装

mac 自带zsh，但不是最新，先更新一下

brew install zsh

切换到 zsh

chsh -s /bin/zsh

重启 iTerm2 ，切换 zsh 完成，然后安装 oh-my-zsh，如果速度慢可以使用国内源

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

# gitee
sh -c "$(curl -fsSL https://gitee.com/mirrors/oh-my-zsh/raw/master/tools/install.sh)"
    
# 清华源克隆
git clone https://mirrors.tuna.tsinghua.edu.cn/git/ohmyzsh.git ~/.oh-my-zsh

使用

通过 brew install xxx 安装一些插件，之后运行下面的 echo 后重启终端使配置生效

📌 以下是建议安装的插件
  • autojump(快速跳转插件，记录曾经访问过的目录，通过关键词匹配快速跳转目录)
echo "[ -f /opt/homebrew/etc/profile.d/autojump.sh ] && . /opt/homebrew/etc/profile.d/autojump.sh" >> ~/.zshrc
  • zsh-autosuggestions(命令历史智能提示插件，会记录使用过的命令，可以快速补全)
echo "source /opt/homebrew/share/zsh-autosuggestions/zsh-autosuggestions.zsh" >> ~/.zshrc
  • zsh-syntax-highlighting(语法高亮，无需运行命令就能知道此命令语法是否正确，正确会显示绿色，错误显示红色，所以也可以通过输入命令来知道有没有安装过)
echo "source /opt/homebrew/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ~/.zshrc

VSCode

安装

官网直接下载有可能会遇到国内下载vscode速度慢的问题

首先在官网找到需要下载的文件，点击下载。

在浏览器下载内容中就可以看到下载地址了，将其复制下来，

image.png

然后将红框内的部分更换为国内CDN：

vscode.cdn.azure.cn <--------就是这个

点开后你会发现速度直接起飞🚀。

使用

📌 以下是建议安装的插件
  • Chinese(Simplified)(简体中文)Language Pack for Visual Studio Code
  • GitLens(查看git历史，能够具体到每一行，甩锅利器！)
  • Git Graph(配合GitLens使用，图形化展示 git commit)
  • Code Spell Checker(这个很有用，有时候半天找不到错在哪，最后发现单词拼错了😭)
  • Material Icon Theme(美化文件目录，给各种目录文件带上图标，赏心悦目)
  • GitHub Theme(一直用的 VSCode 主题，也可以安装别的)
  • React Hooks Snippets(快速生成代码片段节省时间)
  • Simple React Snippets(快速生成代码片段节省时间)

nvm

介绍

Node Version Manager，很多老项目无法在最新的 node 环境中运行，nvm 可以用来方便的切换 node 版本

安装

github.com/nvm-sh/nvm#…

如果速度慢也可以使用国内镜像进行安装，阿里云镜像：

curl -o- https:``//raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash -s -- --mirror=https://npm.taobao.org/mirrors/nvm

安装完成后运行：source ~/.zshrc

使用 brew 安装 nvm 有两个步骤。

首先使用 brew 安装应用程序： brew install nvm

然后查看 brew info 的“注意事项”部分，看看你还需要做什么： brew info nvm 你可能会看到类似的内容（可能随着版本改变）：

You should create NVM's working directory if it doesn't exist:
  mkdir ~/.nvm

Add the following to your shell profile e.g. ~/.profile or ~/.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

安装 node 版本

export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node #临时修改环境变量
nvm install v14.21.2

apple 芯片的 Macbook 使用 nvm 安装低于node16 版本的 node 可能出现长日志和安装缓慢的现象，此时需要使用 rosetta 终端：访达->终端->右键显示简介->勾选“使用 Rosetta 打开”

nrm

介绍

NPM registry manager，通过替换仓库源解决依赖下载过慢的问题

安装

npm install -g nrm

Git

Mac自带git，直接就能使用，如果要使用 git 拉取项目

  1. 先配置 name 和 email
git config --global user.name "xxxxxx"
git config --global user.email "xxxxxx@xxx.com"
  1. 生成 ssh-key

参考GitHub文档 Generating a new SSH key and adding it to the ssh-agent

avatar
文章
阅读
粉丝