玩轉(zhuǎn)iTerm
作為一個(gè)合格的程序員畔乙，不論是前端后端還是客戶端君仆，都應(yīng)該掌握基本的終端操作
最近開始學(xué)習(xí)一些前端開發(fā)，一開始就糾結(jié)用什么編輯器牲距。首推的當(dāng)然是sublime返咱，還有dreamweaver、webstorm等等牍鞠，但最吸引我的還是Vim咖摹，相信有人能體會(huì)到vim編輯器的高效和優(yōu)雅吧（前提是用的比較熟）。
這里肯定有人會(huì)說用Vim的程序員就是在裝逼难述，你說對(duì)了一半萤晴。
“大師吐句，什么才是快樂的秘訣？”
“不要和愚者爭(zhēng)論”
“大師店读，我完全不同意這就是秘訣班率唷！”
“是的屯断，你說的對(duì)”
先看看我的iTerm和Vim的樣子：
看完這個(gè)是不是有點(diǎn)躍躍欲試了呢文虏？別急，我們慢慢來(lái)看如何配置這樣令人舒服的開發(fā)環(huán)境殖演。
這里涉及到以下幾種配置：
- iTerm的配色
- 展示用戶名與工作路徑的樣式
- vim的配色
- 代碼自動(dòng)補(bǔ)全
- 快速寫html/css
- 展示當(dāng)前路徑目錄樹
更新 2018/07/05
- Vim 快速預(yù)覽Markdown氧秘、Html 文件
iTerm 打開時(shí)的配色
主要指打開iTerm時(shí)整個(gè)界面的背景色、前景色趴久、光標(biāo)顏色丸相、各類文件顯示的顏色、字體等朋鞍。
我們可以自定義這些配色，方法是：
Cmd + i -> Colors -> Color Presets
為了方便妥箕，我們可以直接去下載別人配置好的滥酥，比如iTerm2-Color-Schemes。
下載好之后如上圖操作導(dǎo)入就可以選中使用了畦幢。
展示用戶名與工作路徑的樣式
這涉及到zsh的主題問題
Zsh是一個(gè)Unix Shell坎吻，它在兼容標(biāo)準(zhǔn)的POSIX Shell（以及可仿真Bash）的同時(shí)，提供了極強(qiáng)的可定制性和可擴(kuò)展性宇葱，以及一些有趣的功能瘦真，比如：
- 自定義提示符，可以與git等軟件集成黍瞧；
- 可編程的命令補(bǔ)全诸尽，例如輸入kill命令后按tab會(huì)自動(dòng)列出進(jìn)程；
- 全局可共享印颤、并且能以各種方式管理的命令歷史您机；
- 命令補(bǔ)全錯(cuò)誤糾正、界面主題包年局、不輸入cd只輸入目錄名直接進(jìn)入目錄……
安裝：
brew install zsh zsh-completions
為了充分體驗(yàn)Zsh的強(qiáng)大之處际看，我們需要對(duì)它進(jìn)行一些配置。
一個(gè)簡(jiǎn)單的方法是使用Oh-my-zsh——Oh-my-zsh是一個(gè)Zsh配置管理框架矢否，自帶上百個(gè)插件和主題仲闽。它可以通過curl或者wget來(lái)安裝
- via curl
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
- via wget
sh -c "$(wget https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/instal
然后我們需要把系統(tǒng)默認(rèn)使用的bash改成zsh:
chsh -s /bin/zsh
此時(shí)打開一個(gè)新的iTerm窗口就可以看到默認(rèn)的主題了。但跟我的不一樣僵朗，首先有些字可能顯示亂碼了赖欣，另外開始還是會(huì)顯示用戶名和hostname而不是??屑彻，，也看不到帶背景色的箭頭和git分支名畏鼓。
亂碼問題需要一些特殊的字符集酱酬，比如PoweLine：
git clone git@github.com:powerline/fonts.git
cd fonts
./install.sh
然后選擇這個(gè)字體：
關(guān)于顯示用戶名和hostname的問題，以前在用bash的時(shí)候我們可以在.bash_profile里這樣來(lái)自定義云矫，可以參考這里
export PS1="\[\e[32;1m\][\[\e[33;1m\]\u\[\e[31;1m\]@\[\e[33;1m\]\h \[\e[36;1m\]\w\[\e[32;1m\]]\[\e[34;1m\]\$ \[\e[0m\]"
但是別忘記我們現(xiàn)在已經(jīng)切換到zsh了膳沽，這一招不管用了，而應(yīng)該去改我們的剛剛選擇的zsh主題配置文件让禀。
比如我用的主題是agnoster, 只需要在~/.zshrc中編輯ZSH_THEME="agnoster"這一行
然后進(jìn)入~/.oh-my-zsh/themes 中挑社，編輯agnoster.zsh-theme如下：
這里你可以換成任何你想展示的內(nèi)容。同時(shí)巡揍，換成了 agnoster主題之后痛阻，就有了帶背景色的箭頭和git分支名了。
Vim的配色
此時(shí)我們隨便用vim編輯一個(gè)文件腮敌，會(huì)發(fā)現(xiàn)沒有代碼高亮以及自動(dòng)縮進(jìn)的功能阱当，這樣寫代碼會(huì)很不舒服。
關(guān)于Vim的配色糜工，我們只需要編輯~/.vimrc文件:
syntax enable
set background=dark
colorscheme desert
這里的colorscheme我們可以自己選弊添，系統(tǒng)默認(rèn)的配色方案在/usr/share/vim/vim80/colors下，配色文件是.vim格式的捌木。
另外油坝，我們還可以下載第三方的配色方案，比如經(jīng)典的Solarized配色刨裆。
使用第三方配色的方法是：
- mkdir ~/.vim/colors
- 把下載的.vim文件放入其中
- 更新~/.vimrc 的colorscheme
代碼自動(dòng)補(bǔ)全
使用Vim如果沒有代碼自動(dòng)補(bǔ)全澈圈，那真是不如使用IDE了。
這涉及到vim的插件問題帆啃，包括接下來(lái)要講的快速編寫html/css以及展示路徑目錄樹瞬女，都是給vim安裝插件的問題。
方便起見努潘，我們使用Vundle拆魏， 它是一個(gè)Vim 的插件管理工具，類似于 Bundle 的功能慈俯。它可以讓你通過配置.vimrc文件來(lái)安裝多個(gè) Vim 插件渤刃。
- mkdir -p ~/.vim/bundle
- git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim
- 配置.vimrc， 復(fù)制粘貼下面配置
set nocompatible " be iMproved, required
filetype off " required
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
Plugin 'VundleVim/Vundle.vim'
" 這里添加你自己的Plugin
call vundle#end() " required
filetype plugin indent on " required
4.我們?cè)?code>call vundle#begin()與call vundle#end()之間添加想要的插件Plugin xxx贴膘，然后隨便打開一個(gè)vim , 輸入:PluginInstall 安裝插件卖子，等待done。
這里自動(dòng)補(bǔ)全我們用到YouCompleteMe,安裝方法里面也有講到刑峡，使用Vundle就按照第3步添加Plugin 'Valloric/YouCompleteMe'
你還可以按照你的代碼語(yǔ)言選擇安裝洋闽，然后可以根據(jù)不同語(yǔ)言來(lái)自動(dòng)補(bǔ)全玄柠，具體可以參考這里
快速寫html/css
同上，安裝一個(gè)vim的插件诫舅，這個(gè)插件是Emmet羽利。
這個(gè)插件很牛逼，可以把重復(fù)無(wú)聊的html/css等代碼縮短為一句很簡(jiǎn)短的代碼刊懈， 看看我的演示：
是不是很牛逼这弧！具體還有很多快捷鍵功能可以參考官網(wǎng)或者這篇文章
安裝方式也是用Vundle，添加Plugin 'mattn/emmet-vim'虚汛。 但是我這里一開始安裝后快捷鍵根本不起作用匾浪，不知道什么原因，后來(lái)就把快捷鍵手動(dòng)改了卷哩，居然神奇的可以了蛋辈。方法如下：
vim ~/.vimrc
let g:user_emmet_expandabbr_key = '<c-e>'
let g:user_emmet_togglecomment_key = '<c-e>;'
...
//可以添加其他快捷鍵
展示路徑的目錄樹
這個(gè)插件是nerdtree
安裝完成后輸入:NERDTree就可以展示目錄樹了，也可以設(shè)置快捷鍵将谊，在~/.vimrc最后輸入:
:map <C-f> :NERDTree<CR>
關(guān)于nerdtree強(qiáng)大的快捷鍵可以參考這里
更新 2018/07/05
Vim 快速預(yù)覽Markdown文件
我們還可以使用vim直接編寫markdown文件冷溶，就不需要去找mweb等軟件了。
基于上述的配置尊浓，我們此時(shí)編寫 .md文件的時(shí)候看起來(lái)就很像在mweb上了逞频。為了像IDE一樣支持快速預(yù)覽，我們安裝另外一個(gè)插件眠砾，叫做livedown
安裝方法我復(fù)制過來(lái)
//First make sure you have [node](http://nodejs.org/) with [npm](https://www.npmjs.org/) installed.
//If you have node do
$ npm install -g livedown
//Then install this plugin with your preferred installation method. I recommend installing [pathogen.vim](https://github.com/tpope/vim-pathogen), and then simply copy and paste
$ git clone git://github.com/shime/vim-livedown.git ~/.vim/bundle/vim-livedown
安裝完成后虏劲，打開一個(gè)窗口運(yùn)行
livedown start path/to/your.md --open
就可以在瀏覽器上看到我們的預(yù)覽文件了托酸，而且每次更新your.md 瀏覽器都能看到實(shí)時(shí)的刷新
Vim 快速預(yù)覽Html文件
安裝插件vim-preview
這個(gè)插件不僅僅支持預(yù)覽html文件 還支持markdown褒颈、rdoc、textfie等文件励堡，但是我試了一下markdown文件使用這種方式預(yù)覽效果很差谷丸，所以markdown還是推薦使用上面的livedown
安裝方法：
To install the plugin just copy autoload, plugin, doc directories into your .vim directory.
github上給的快捷鍵是<Leader>P，這個(gè)好奇葩 应结，我真不知道怎么按出來(lái)刨疼，只能手動(dòng)輸入 :Preview來(lái)調(diào)用。
當(dāng)然還可以更改快捷鍵：
vim ~/.vim/plugin/preview.vim
找到最后一行改為:
:nmap <c-P> :Preview<CR>
然后就可以按 Ctrl+P就可以調(diào)用出來(lái)了鹅龄。
