总结：Mac前端开发环境的搭建（配置）
总结：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，也已经用了两年多的时间，编辑器之间没有谁好谁坏，适合自己的就是最好的。
