总结：Mac前端开发环境的搭建（配置）

现在是2018年1月26日星期五，原文写于2016年1月，时隔两年，文章内的很多内容插件或多或少都有更新，

很多人在参考配置的时候也或多或少的遇到些问题，我这里在重新走一遍流程并将文档更新下，如果遇到什么问题可联系我。

新年新气象，在2016年的第一天，我入手了人生中第一台自己的电脑（大一时好友赠送的电脑在一次无意中烧坏了主板，此后便不断借用别人的或者网站的）。macbook air，身上已无分文。。。接下来半年的房租都不知道该怎么半了，都怪消费太冲动。

不过，眼下需要解决的不是房租问题，而是在新电脑上搭建开发环境，正好在搭建的时候总结一下：

1、工具：

*工具不是必须的，如果你想安装的话下面是Git地址，可进入安装

地址：蓝灯(*)最新版本下载

2、命令行工具：iterm2

建议安装该命令行工具，前端开发中会遇到各种通过命令行的形式来完成操作的工具，所以一款好的命令行工具是非常必须的。

官网：iterm2

虽然mac自带终端，也不是很难看，但功能不是很多，term2是mac上非常好的一款命令行工具，可以完全替代系统自带的终端。term2具有很多优点：

1、选中即复制，不用command＋c了；
2、全文查找并高亮显示：command＋f
3、方便的分屏显示：垂直分屏：command＋d，水平分屏：command＋shift＋d
4、自定义快捷键
5、强大的界面自定义，设置配色方案，透明背景，等等
6、其他功能，我还没有体验到的

我主要做了两个配置如下（如下是我的界面截图）：

打开全屏（Preferences - Profiles - Window - Settings For New Windows）
背景透明度（Preferences - Profiles - Window - transparency）

总结：Mac前端开发环境的搭建（配置）

3、终端软件包管理工具：brew

homebrew工具建议安装，因为后面会有一些工具的安装就是使用的brew

官网：Homebrew

就和ubuntu下的apt－get功能类似，可以很方便的管理软件。

安装方式，直接在终端里输入：

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

运行完即可安装软件了，安装方式和apt－get相同：

sudo brew install xxx

4、终端复用工具：tmux

tmux是一款终端复用软件，我第一次发现他的神奇之处是在实习的时候，别人在电脑上敲的命令在我的屏幕上竟然可以同步显示，就和直播一样，简直不可思议。后来换了单位以后用到的较少了，分屏切换主要在iterm2上进行了，不过，该工具依然特别好用。

官网：tmux

可以直接通过brew安装：

sudo brew install tmux

以下是tmux的部分优点：

可横向和纵向分割窗口
窗格可以*移动和调整大小，或直接利用四个预设布局之一
可在多个缓冲区进行复制和粘贴
可通过交互式菜单来选择窗口、会话及客户端
提供了强劲的、易于使用的命令行界面

5、安装node、npm、git

这三款工具是必安装的，大部分前端工具都依赖Node，npm是node自带的包管理器，git是版本管理工具

直接通过brew安装即可，我没有尝试，我是通过官网下载的程序安装的。安装node自带npm，git貌似系统自带。

brew install node

brew install git

6、zsh安装on my zsh

建议安装，可以让命令行界面更美观，此外配合autojump使用功能会更强大。

有时候会发现执行命令时前面一串系统自带的字符串很长，想移去，此时久可以用zsh

wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | sh

zsh的强大之处在于可以自定义快捷键。比我，我要执行webpack，但是每次都要输入webpack太麻烦了，就算为了节省力气，使用webpack －－watch，也要输入很长的命令，而通过wp则简单的很：

只需在～/.zshrc中输入以下规则即可。

alias wp='webpack'

alias wpw='webpack --progress --colors --watch'

alias wps='webpack-dev-server --progress --colors'

这样，我们直接在命令行中输入wp就是执行的webpack，输入wpw，即启动了观察模式，输入wps，则启动了服务器，是不是很简单？！

7、autojump

强烈建议安装使用

和zsh结合使用，功能更强大，比如如果我要进入一个很深的目录，我需要不断的cd才可以，但是通过autojump，我可以直接使用如下命令：

比如目录机构为：

a/b/c/d/e

强大的跳转命令：

j e

这样搞是不是很爽？

备注：下面是Vim的配置，如果对vim不熟悉也可以不用vim，本地开发直接使用相应的编辑器就可以了，但是如果是服务器开发的话，vim就是必须品了，建议大家熟悉一些vim命令，技多不压身啊。

8、vim包管理工具vunble

看个人喜好安装。相信大家也都听说过Vim的名气，如果是在本地开发的话可以不用安装vim的各种插件及配色方案，当然如果你习惯使用vim除外

接下来就是配置vim编辑器，首先是Vundle,即bundle，vim的插件管理工具

Ggithub：Vundle.vim

安装vunble：

$ git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim

然后，在～目录下新建.vimrc，输入：

set nocompatible

filetype off

set rtp+=~/.vim/bundle/Vundle.vim

call vundle#begin()

Plugin 'VundleVim/Vundle.vim'

然后，退出vim的编辑模式，输入：BundleInstall（注意前面要有冒号），此时插件开始安装。

9、配置vim

这里推荐一下我收集的一个前端VIM配置方案https://github.com/Gavin-YYC/vimrc

前面已经安装了vunble，那么其他的插件安装变得更简单，先来进行一些简单的vim配置：

set nu              " 显示行号

syntax on           " 语法高亮

autocmd InsertLeave * se nocul  " 用浅色高亮当前行

autocmd InsertEnter * se cul    " 用浅色高亮当前行

set ruler           " 显示标尺

colorscheme molokai " 设置配色方案 molokai

set autoindent      " 设置自动缩进

set backspace=2

set nowrap          " 不自动换行

set tabstop=4       " tab相当于四个字符

set softtabstop=4   " 按一次tab前进4个字符

set expandtab       " 用空格代替tab

set ai!             " 设置自动缩进

set cindent shiftwidth=4 " 缩进的字符个数

set hlsearch        " 高亮搜索的关键字

set ignorecase      " 搜索忽略大小写

set history=100     " 设置命令历史行数

10、vim配色方案molokai

Github：molokai

配置很简单，在～/.vim/colors下，复制进去molokai.vim即可。

11、vim安装插件

通过vunble安装：

在.vimrc中，输入：Bundle 'mattn/emmet-vim'，然后退出编辑模式，输入：BunbleInstall即可，如果没有，则推出vim重新进入，在执行安装命令。

12、编辑器的选择

前端开发中最常用的编辑器如下：

我本人用过其中的三个，最后使用的是Atom，也已经用了两年多的时间，编辑器之间没有谁好谁坏，适合自己的就是最好的。