總結：Mac前端開發環境的搭建（配置）
現在是2018年1月26日星期五，原文寫於2016年1月，時隔兩年，文章內的很多內容插件或多或少都有更新，
很多人在參考配置的時候也或多或少的遇到些問題，我這里在重新走一遍流程並將文檔更新下，如果遇到什么問題可聯系我。
新年新氣象，在2016年的第一天，我入手了人生中第一台自己的電腦（大一時好友贈送的電腦在一次無意中燒壞了主板，此后便不斷借用別人的或者網站的）。macbook air，身上已無分文。。。接下來半年的房租都不知道該怎么半了，都怪消費太沖動。
不過，眼下需要解決的不是房租問題，而是在新電腦上搭建開發環境，正好在搭建的時候總結一下：
1、科學上網工具：lantern
科學上網工具不是必須的，如果你想安裝的話下面是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）
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，也已經用了兩年多的時間，編輯器之間沒有誰好誰壞，適合自己的就是最好的。