玩转iTerm

玩转iTerm

作为一个合格的程序员,不论是前端后端还是客户端,都应该掌握基本的终端操作

最近开始学习一些前端开发,一开始就纠结用什么编辑器。首推的当然是sublime,还有dreamweaver、webstorm等等,但最吸引我的还是Vim,相信有人能体会到vim编辑器的高效和优雅吧(前提是用的比较熟)。

这里肯定有人会说用Vim的程序员就是在装逼,你说对了一半。

“大师,什么才是快乐的秘诀?”
“不要和愚者争论”
“大师,我完全不同意这就是秘诀啊!”
“是的,你说的对”

先看看我的iTerm和Vim的样子:

我的iTerm与Vim

看完这个是不是有点跃跃欲试了呢?别急,我们慢慢来看如何配置这样令人舒服的开发环境。

这里涉及到以下几种配置:

  • iTerm的配色
  • 展示用户名与工作路径的样式
  • vim的配色
  • 代码自动补全
  • 快速写html/css
  • 展示当前路径目录树

更新 2018/07/05

  • Vim 快速预览Markdown、Html 文件

iTerm 打开时的配色

主要指打开iTerm时整个界面的背景色、前景色、光标颜色、各类文件显示的颜色、字体等。

我们可以自定义这些配色,方法是:

Cmd + i -> Colors -> Color Presets

iTerm配色

为了方便,我们可以直接去下载别人配置好的,比如iTerm2-Color-Schemes

下载好之后如上图操作导入就可以选中使用了。

展示用户名与工作路径的样式

这涉及到zsh的主题问题

Zsh是一个Unix Shell,它在兼容标准的POSIX Shell(以及可仿真Bash)的同时,提供了极强的可定制性和可扩展性,以及一些有趣的功能,比如:

  • 自定义提示符,可以与git等软件集成;
  • 可编程的命令补全,例如输入kill命令后按tab会自动列出进程;
  • 全局可共享、并且能以各种方式管理的命令历史;
  • 命令补全错误纠正、界面主题包、不输入cd只输入目录名直接进入目录……

安装:

brew install zsh zsh-completions

为了充分体验Zsh的强大之处,我们需要对它进行一些配置。

一个简单的方法是使用Oh-my-zsh——Oh-my-zsh是一个Zsh配置管理框架,自带上百个插件和主题。它可以通过curl或者wget来安装

  • 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

然后我们需要把系统默认使用的bash改成zsh:

chsh -s /bin/zsh

此时打开一个新的iTerm窗口就可以看到默认的主题了。但跟我的不一样,首先有些字可能显示乱码了,另外开始还是会显示用户名和hostname而不是👍,,也看不到带背景色的箭头和git分支名。

乱码问题需要一些特殊的字符集,比如PoweLine:

git clone git@github.com:powerline/fonts.git
cd fonts
./install.sh

然后选择这个字体:

PoweLine字体

关于显示用户名和hostname的问题,以前在用bash的时候我们可以在.bash_profile里这样来自定义,可以参考这里

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\]"

但是别忘记我们现在已经切换到zsh了,这一招不管用了,而应该去改我们的刚刚选择的zsh主题配置文件。

比如我用的主题是agnoster, 只需要在~/.zshrc中编辑ZSH_THEME="agnoster"这一行

然后进入~/.oh-my-zsh/themes 中,编辑agnoster.zsh-theme如下:

agnoster主题

这里你可以换成任何你想展示的内容。同时,换成了 agnoster主题之后,就有了带背景色的箭头和git分支名了。

Vim的配色

此时我们随便用vim编辑一个文件,会发现没有代码高亮以及自动缩进的功能,这样写代码会很不舒服。

关于Vim的配色,我们只需要编辑~/.vimrc文件:

syntax enable
set background=dark
colorscheme desert

这里的colorscheme我们可以自己选,系统默认的配色方案在/usr/share/vim/vim80/colors下,配色文件是.vim格式的。

另外,我们还可以下载第三方的配色方案,比如经典的Solarized配色

使用第三方配色的方法是:

  1. mkdir ~/.vim/colors
  2. 把下载的.vim文件放入其中
  3. 更新~/.vimrc 的colorscheme

代码自动补全

使用Vim如果没有代码自动补全,那真是不如使用IDE了。

这涉及到vim的插件问题,包括接下来要讲的快速编写html/css以及展示路径目录树,都是给vim安装插件的问题。

方便起见,我们使用Vundle, 它是一个Vim 的插件管理工具,类似于 Bundle 的功能。它可以让你通过配置.vimrc文件来安装多个 Vim 插件。

  1. mkdir -p ~/.vim/bundle
  2. git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim
  3. 配置.vimrc, 复制粘贴下面配置
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.我们在call vundle#begin()call vundle#end()之间添加想要的插件Plugin xxx,然后随便打开一个vim , 输入:PluginInstall 安装插件,等待done。

这里自动补全我们用到YouCompleteMe,安装方法里面也有讲到,使用Vundle就按照第3步添加Plugin 'Valloric/YouCompleteMe'

你还可以按照你的代码语言选择安装,然后可以根据不同语言来自动补全,具体可以参考这里

快速写html/css

同上,安装一个vim的插件,这个插件是Emmet

这个插件很牛逼,可以把重复无聊的html/css等代码缩短为一句很简短的代码, 看看我的演示:

emmetgif.gif

是不是很牛逼!具体还有很多快捷键功能可以参考官网或者这篇文章

安装方式也是用Vundle,添加Plugin 'mattn/emmet-vim'。 但是我这里一开始安装后快捷键根本不起作用,不知道什么原因,后来就把快捷键手动改了,居然神奇的可以了。方法如下:

vim ~/.vimrc

let g:user_emmet_expandabbr_key = '<c-e>'
let g:user_emmet_togglecomment_key = '<c-e>;'
...
//可以添加其他快捷键

展示路径的目录树

这个插件是nerdtree

安装完成后输入:NERDTree就可以展示目录树了,也可以设置快捷键,在~/.vimrc最后输入:

:map <C-f> :NERDTree<CR>

关于nerdtree强大的快捷键可以参考这里


更新 2018/07/05

Vim 快速预览Markdown文件

我们还可以使用vim直接编写markdown文件,就不需要去找mweb等软件了。

基于上述的配置,我们此时编写 .md文件的时候看起来就很像在mweb上了。为了像IDE一样支持快速预览,我们安装另外一个插件,叫做livedown

安装方法我复制过来

//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

安装完成后,打开一个窗口运行

livedown start path/to/your.md --open

就可以在浏览器上看到我们的预览文件了,而且每次更新your.md 浏览器都能看到实时的刷新

Vim 快速预览Html文件

安装插件vim-preview

这个插件不仅仅支持预览html文件 还支持markdown、rdoc、textfie等文件,但是我试了一下markdown文件使用这种方式预览效果很差,所以markdown还是推荐使用上面的livedown

安装方法:

To install the plugin just copy autoload, plugin, doc directories into your .vim directory.

github上给的快捷键是<Leader>P,这个好奇葩 ,我真不知道怎么按出来,只能手动输入 :Preview来调用。
当然还可以更改快捷键:

vim ~/.vim/plugin/preview.vim

找到最后一行改为:

:nmap <c-P> :Preview<CR>

然后就可以按 Ctrl+P就可以调用出来了。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容