【20200328】Mac从0到1安装前端开发环境

[zhongxia245]

Mac从0到1安装前端开发环境

笔者：zhongxia

时间：2020-03-27 20:50:09

虽然看起来没几样东西，但是查找资料和整体安装下来，花了我半天的时间。

刚拿到一台新的Mac Pro 电脑，第一步都是要安装开发环境，这里记录下需要安装的软件和安装的步骤。

1. 编辑器
   1. Vscode 和 相关插件
   2. Typora
2. 命令行相关工具
   1. HomeBrew
   2. iterm2 和 zsh 以及相关插件
   3. nvm , node , nrm
   4. mysql 和 可视化客户端
3. 其他工具
   1. 输入法
   2. spectacle 分屏软件

一、编辑器

这两个没啥好说的，直接网上下载软件，直接安装即可，这里主要记录一下 Vscode 需要安装的插件。

1. Auto Close Tag : 自动闭合标签
2. Beautiful ： 格式化代码
3. CSScomb：样式规则按照指定顺序排
4. IntelliSense for css classname：自动不全classname
5. npm intellisense：自动补全npm
6. Path Intellisense：自动补全路径
7. Prettier：代码格式化
8. React Code Snippets：React代码片段
9. Vscode-icons：Icon图标

二、命令行相关工具

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

我们可以利用HomeBrew 安装 Nvm, Node , Mysql ,Iterm2 等等。

2.1、HomeBrew安装

https://juejin.im/post/5c738bacf265da2deb6aaf97

在国内安装这个非常慢，经常会卡着半天不动，具体可以参照这个文章来安装。

官网安装 HomeBrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

可能存在问题

卡在这个状态，

==> Tapping homebrew/core

Cloning into '/usr/local/Homebrew/Library/Taps/homebrew/homebrew-core'...

出现这个原因是因为源不通，代码来不下来，解决方法就是更换国内镜像源：

手动执行下面这句命令，更换为中科院的镜像：

git clone git://mirrors.ustc.edu.cn/homebrew-core.git/ /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core --depth=1

然后把homebrew-core的镜像地址也设为中科院的国内镜像

cd "$(brew --repo)"

git remote set-url origin https://mirrors.ustc.edu.cn/brew.git

cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"

git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git

# 执行成功，成功
brew update

# 最后用这个命令检查无错误：
brew doctor

同理，如果 homebrew-cask 也出现卡住，也可以用这种方式来解决。 只需要修改 git clone homebrew-core 的名称和下载下来存放的路径即可。

2.2、Iterm2 和 Zsh

Iterm2 是一个用来替换 系统自带 Terminal 的更现代化的命令行工具。

安装 Iterm2 有两种方式

1. 直接去《官网》下载 Iterm2 的软件包，解压开，放到 Application 即可
2. brew install Iterm2

如果上一步 HomeBrew安装完成，可以直接用 brew 来安装，简单又方便。

Zsh 安装

目前常用的 Linux 系统和 OS X 系统的默认 Shell 都是 bash。但是真正强大的 Shell 是深藏不露的 zsh，史称『终极 Shell』，由于与 bash 相似，功能又有所加强，zsh 在 Linux 社区获得了关注。但因配置过于复杂，所以初期无人问津。直到国外有个程序员开发出了一个能够快速上手的 zsh 项目，叫做「oh my zsh」。

具体安装看这里，这就不在赘述了。 https://www.zrahh.com/archives/118.html. Zsh 安装

on-my-zsh 插件的安装

1. autojump：快速跳转到某个访问过的目录
2. zsh-autosuggestion：自动补全命令行
3. zsh-syntax-highlighting：语法高亮

具体安装看这里 ，https://www.zrahh.com/archives/167.html Zsh 插件安装

2.3、安装node环境

前端开发最重要的就是node环境的安装了，但是node有很多个版本，因此我们需要一个管理node版本的工具， nvm。

如何安装nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

安装node

nvm install stable #安装最新稳定版 node，现在是 5.0.0
nvm install 4.2.2 #安装 4.2.2 版本
nvm install 0.12.7 #安装 0.12.7 版本

nvm alias default 0.12.7 #设置默认 node 版本为 0.12.7

具体看这里 https://www.cnblogs.com/kaiye/p/4937191.html

nrm 是什么东西？

前端使用的包基本都是npm来下载，但是国内从npm官方源去下载包比较慢，因此需要切换到国内的一些镜像源。

nrm 就是一个管理镜像源的工具。

npm install -g nrm

## 查看支持的镜像源
nrm ls 

# 使用指定镜像源
nrm use taobao

2.4、安装mysql 和 可视化客户端工具

安装 mysql

brew install mysql

推荐的客户端工具

sequel Pro 是一个开源免费的 Mysql 客户端工具，整体还是很好用的。《下载地址》

三、其他工具

输入法属于个人需求，看要不要了。

spectacle 这个分屏软件，如果你是用多屏幕进行开发，建议还是安装下，贼好用。

[bihell]

东西少了点，可以看看我的 https://bigdata.bihell.com/tools/li-qi.html