澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站:前端开发工具系列,插

Vim常用插件——前端开发工具系列

2015/08/16 · HTML5 · vim, 插件

原文出处: AlloyTeam   

作为一名开发者,应该对编辑器之神Vim)与神之编辑器Emacs有所耳闻吧。编辑器之战的具体细节有兴趣的童鞋可以google之。

Vim最大的特点是打开速度快,功能强大,一旦掌握了其中的命令,编程过程双手就不需要离开键盘了。

用习惯了Vim的另一个好处是在linux下可以很轻松地用vi来处理文件,当然emacs也可以做默认编辑器,但是不是每台机器都有安装Emacs。

今天主要给大家介绍Vim在前端领域的一些常用插件:

NERD_tree.vim
[NERD_tree.vim]-主要功能是一款文件浏览器,可以查看文件目录结构打开相应的文件

澳门新浦京娱乐场网站 1vim_cheat_sheet_for_programmers.png

<pre>

Ubuntu 16.04 下安装Vim

默认已经安装了VIM-tiny

linuxidc@linuxidc:~$ locate vi | grep 'vi$' |xargs ls -al
lrwxrwxrwx 1 root root   17 12月  9 21:12 /etc/alternatives/vi -> /usr/bin/vim.tiny
lrwxrwxrwx 1 root root   20 12月  9 21:13 /usr/bin/vi -> /etc/alternatives/vi
-rw-r--r-- 1 root root   59 12月 23  2015 /usr/lib/x86_64-linux-gnu/espeak-data/voices/asia/vi
-rw-r--r-- 1 root root 1415 11月 11  2015 /usr/share/bash-completion/completions/ldapvi
-rw-r--r-- 1 root root  475 4月  21  2016 /var/lib/dpkg/alternatives/vi

下面我们以Ubuntu14.04(Unity)安装完整版VIM(VIM-basic)为例:

在终端输入以下命令,则会自动安装:

sudo apt-get install vim

自动安装完之后,可以使用以下命令进行查看:

已经添加到系统

update-alternatives --display vi

查看版本

vim --version

1.mark.vim

mark.vim主要的功能是变量的高亮。

选中要高亮的词,使用 m 来使其高亮,多个词的高亮会显示为不同的颜色,在不需要查找的时候以及代码review的时候使用效果还是挺不错的,

使用n可以去除所选的词的高亮。

更多详情可以点击插件主页了解。

ps: 查找单词可以使用 * 这个命令来进行快速搜索

下面总结一些命令
ctrl w h 光标 focus 左侧树形目录ctrl w l 光标 focus 右侧文件显示窗口ctrl w w 光标自动在左右侧窗口切换 ctrl w r 移动当前窗口的布局位置

常言道:工欲善其事,必先利其器 ,作为一个程序员,一个常用的工具就是编辑器,我选择一个能极大提高自己开发效率的编辑器vim(有些人可能选择emacs)。而vim编辑器方面具有以下几种特性:

<h2>NERD_tree.vim </h2>
<pre><h5>[NERD_tree.vim]-主要功能是一款文件浏览器,可以查看文件目录结构打开相应的文件</h5></pre>

VIM配置

注:只对各个用户在自己的当前目录下的.vimrc修改的话,修改内容只对本用户有效,要想全部有效,可以修改/etc/vim/vimrc.

在终端下使用vim进行编辑时,默认情况下,编辑的界面上是没有显示行号、语法高亮度显示、智能缩进等功能的。为了更好的在vim下进行工作,需要手动设置一个配置文件:.vimrc。

启动vim时,当前用户根目录下的.vimrc文件会被自动读取,该文件可以包含一些设置甚至脚本,所以,一般情况下把.vimrc文件创建在当前用户的根目录下比较方便,即创建的命令为

$vi ~/.vimrc

设置完后 :x或者:x或者wq 进行保存退出即可。

下面给出一个例子,其中列出了经常用到的设置,详细的设置信息请参照参考资料

2.zencoding.vim

zencoding.vim 后来改名为Emmet.vim,主要功能是实现代码的快速编写。

具体教程可以参见官方的网站

个人感受是做页面重构的时候用得比较多,通过命令可以快速生成html的结构,提高了前端开发的生产力。

快捷键
o 在已有窗口中打开文件、目录或书签,并跳到该窗口go 在已有窗口 中打开文件、目录或书签,但不跳到该窗口t 在新 Tab 中打开选中文件/书签,并跳到新 TabT 在新 Tab 中打开选中文件/书签,但不跳到新 Tabi split 一个新窗口打开选中文件,并跳到该窗口gi split 一个新窗口打开选中文件,但不跳到该窗口s vsplit 一个新窗口打开选中文件,并跳到该窗口gs vsplit 一个新 窗口打开选中文件,但不跳到该窗口! 执行当前文件O 递归打开选中 结点下的所有目录x 合拢选中结点的父目录X 递归 合拢选中结点下的所有目录e Edit the current dif双击 相当于 NERDTree-o中键 对文件相当于 NERDTree-i,对目录相当于 NERDTree-eD 删除当前书签P 跳到根结点p 跳到父结点K 跳到当前目录下同级的第一个结点J 跳到当前目录下同级的最后一个结点k 跳到当前目录下同级的前一个结点j 跳到当前目录下同级的后一个结点C 将选中目录或选中文件的父目录设为根结点u 将当前根结点的父目录设为根目录,并变成合拢原根结点U 将当前根结点的父目录设为根目录,但保持展开原根结点r 递归刷新选中目录R 递归刷新根结点m 显示文件系统菜单 #!!!然后根据提示进行文件的操作如新建,重命名等cd 将 CWD 设为选中目录I 切换是否显示隐藏文件f 切换是否使用文件过滤器F 切换是否显示文件B 切换是否显示书签q 关闭 NerdTree 窗口? 切换是否显示 Quick Help
命令模式
:tabnew [ opt选项] [+cmd] 文件 建立对指定文件新的tab:tabc 关闭当前的 tab:tabo 关闭所有其他的 tab:tabs 查看所有打开的 tab:tabp 前一个 tab:tabn 后一个 tab标准模式下:
gT 前一个 tabgt 后一个 tabMacVim 还可以借助快捷键来完成 tab 的关闭、切换cmd w 关闭当前的 tabcmd { 前一个 tabcmd } 后一个 tab

  • 跨平台及统一环境无论是在windows还是在*nix,vim是一个很完美的跨平台文本编辑器,甚至可以直接在服务器平台CentOS,Ubuntu等直接配置使用,配置文件大同小异,操作习惯基本相同。

  • 定制化及可扩展vim提供一个vimrc的配置文件来配置vim,并且自己可以定制一些插件来实现文件浏览(NERD Tree),代码补全(YouCompleteMe,语法检查(syntastic),文件模糊搜索,显示vim状态栏(Vim Powerline),主题颜色,显示文件结构等多种功能。

  • 高效命令行使用vim编辑文本,只需在键盘上操作就可以,根本无需用到鼠标。就拿光标移动来说,与重复击键、一个字符一个字符或一行一行移动相比,按一次键就能以词、行、块或函数为单位移动,效率高得多。有时一些重复删除、粘帖的操作,也只需一条命令就可以完成,甚至你可以用键映射来简化或组合多种命令来提高效率。

下面总结一些命令

ctrl   w   h  光标 focus 左侧树形目录
ctrl   w   l  光标 focus 右侧文件显示窗口
ctrl   w   w  光标自动在左右侧窗口切换 
ctrl   w   r  移动当前窗口的布局位置

基本配置[1] [2]

"开启语法高亮
syntax on
"依文件类型设置自动缩进
filetype indent plugin on

"显示当前的行号列号:
set ruler
"在状态栏显示正在输入的命令
set showcmd

"关闭/打开配对括号高亮
"NoMatchParen
DoMatchParen
行号的显示与隐藏[3]:

"显示行号:
set number
"为方便复制,用<F2>开启/关闭行号显示:
nnoremap <F2> :set nonumber!<CR>:set foldcolumn=0<CR>

启用Modeline(即允许被编辑的文件以注释的形式设置Vim选项,详见Vim Wiki: Modeline magic)[4]:

set modeline

如果终端使用的是深色背景:

"为深色背景调整配色
set background=dark

3.ctrlp.vim

ctrlp.vim主要功能是对文件以及buffer进行模糊查询,快速打开文件。

操作实例如下图所示:

澳门新浦京娱乐场网站 2

澳门新浦京娱乐场网站 3

在知道文件名的情况下,使用ctrl p打开此插件,输入文件名,实则是文件名开头几个字母就可以快速打开文件。

ps:如果当前的文件已经保存好,那么会直接替换成搜索到的文件,如果没有保存的,会进行窗口的分隔类似与sp的命令。

所以在对比文件的情况下我一般会用vsp来分割窗口或者tabnew一个新的tab,再打开新的文件。

如果需要查其他目录或者忘记了文件名的话,就可以使用下面的插件NERD_tree了。

mark.vim
[mark.vim]-主要的功能是变量的高亮,允许你在文本中放置自定义的标记
在编辑的时候,你忽然想起来需要修改同一个文档的另一个地方,但又想记住当前的位置,以便稍后再回来编辑。应该怎么做呢?vim中我们可以对文本进行标记,这个概念类似于visual studio中的书签,目的是方便vim编辑器在文档的不同位置间跳转。正常情况下,这意味着要移动到那个位置,编辑,然后再移回来。这样很费事,也容易忘记刚才所在的位置。有更聪明的办法。移动光标到下述文本的第5行(John Lennon的名言)。用ma创建一个名为'a'的标记。移动光标到任一地方,比如,4j。按下’a(即,单引号加上标记的名字),瞧Vim跳到了刚才做标记的那一行的行首。如果要跳到做标记的位置,按下‘a(即,上排数字键1左边那个键)。可以使用任一字母(a-zA-Z)去命名一个标记,意味着一个文件里最多可以有52个命名标记。 添加标记 将光标移到某一行,使用 ma 命令添加标记。其中,m 是标记命令,a 是所做标记的名称。可以使用小写字母 a-z 或大写字母 A-Z 中的任意一个做为标记名称。小写字母的标记,仅用于当前缓冲区;而大写字母的标记,则可以跨越不同的缓冲区。例如,你正在编辑 File1,但仍然可以使 用'A 命令,移动到 File2 中创建的标记A。跳转标记 创建标记后,可以使用 'a 命令,跳转到指定标记行的首个非空字符。这里 ' 是单引号。也可以使用 'a 命令,移到所做标记时的光标位置。这里'是反引号(也就是数字键1左边的那一个)。列出标记 利用:marks命令,可以列出所有标记。这其中也包括一些系统内置的特殊标记(Special marks):. ——最近编辑的位置0-9——最近使用的文件∧ ——最近插入的位置' ——上一次跳转前的位置" ——上一次退出文件时的位置[ ——上一次修改的开始处] ——上一次修改的结尾处删除标记 如果删除了做过标记的文本行,那么所做的标记也就不存了。我们不仅可以利用标记来快速移动,而且还可以使用标记来删除文本,例如:在某一行用ma做了标记,然后就可以使用d'a来删掉这一行。当然,我们也可以使用y'a命令就可以来复制这一行了。使用:delmarks a b c命令,可以删除某个或多个标记;而:delmarks! 命令,则会删除所有标记。利用:help mark-motions命令,可以查看关于标记的更多帮助信息。命令小结m ——创建标记' ——移动到标记的文本行首 ——移动到标记的光标位置:marks ——列示所有标记:delmarks ——删除指定标记:delmarks! ——删除所有标记

如果你需要配置vim,只需在Home目录创建一个~/.vimrc文件即可以配置vim了,可以参考我的vimrc配置文件。由于我需要安装插件,并且将需要安装的插件列表分离到另外一个文件~/.vimrc.bundles,这个文件也是存放在Home目录,文件内容可以参考vimrc.bundles。若想加载~/.vimrc.bundles文件,必须在~/.vimrc文件加入以下代码片段:

快捷键

<pre>
o 在已有窗口中打开文件、目录或书签,并跳到该窗口
go 在已有窗口 中打开文件、目录或书签,但不跳到该窗口
t 在新 Tab 中打开选中文件/书签,并跳到新 Tab
T 在新 Tab 中打开选中文件/书签,但不跳到新 Tab
i split 一个新窗口打开选中文件,并跳到该窗口
gi split 一个新窗口打开选中文件,但不跳到该窗口
s vsplit 一个新窗口打开选中文件,并跳到该窗口
gs vsplit 一个新 窗口打开选中文件,但不跳到该窗口! 执行当前文件
O 递归打开选中 结点下的所有目录
x 合拢选中结点的父目录
X 递归 合拢选中结点下的所有目录
e Edit the current dif
双击 相当于 NERDTree-o中键 对文件相当于 NERDTree-i,对目录相当于 NERDTree-eD 删除当前书签
P 跳到根结点
p 跳到父结点
K 跳到当前目录下同级的第一个结点
J 跳到当前目录下同级的最后一个结点
k 跳到当前目录下同级的前一个结点
j 跳到当前目录下同级的后一个结点
C 将选中目录或选中文件的父目录设为根结点
u 将当前根结点的父目录设为根目录,并变成合拢原根结点
U 将当前根结点的父目录设为根目录,但保持展开原根结点
r 递归刷新选中目录R 递归刷新根结点
m 显示文件系统菜单 #!!!然后根据提示进行文件的操作如新建,重命名等
cd 将 CWD 设为选中目录I 切换是否显示隐藏文件
f 切换是否使用文件过滤器
F 切换是否显示文件
B 切换是否显示书签
q 关闭 NerdTree 窗口
? 切换是否显示 Quick Help
</pre>

<pre>
<h5>命令模式</h5>
:tabnew [ opt选项] [+cmd] 文件 建立对指定文件新的tab
:tabc 关闭当前的 tab
:tabo 关闭所有其他的 tab
:tabs 查看所有打开的 tab
:tabp 前一个 tab
:tabn 后一个 tab
<br />
<h4>标准模式下:</h4>
gT 前一个 tab
gt 后一个 tab
<br />
<p> MacVim 还可以借助快捷键来完成 tab 的关闭、切换cmd w 关闭当前的 tabcmd { 前一个 tabcmd } 后一个 tab</p>
</pre>
</pre>

<pre>
<h2>mark.vim </h2>
<pre><h5>[mark.vim]-主要的功能是变量的高亮,允许你在文本中放置自定义的标记</h5> 在编辑的时候,你忽然想起来需要修改同一个文档的另一个地方,但又想记住当前的位置,以便稍后再回来编辑。应该怎么
做呢?vim中我们可以对文本进行标记,这个概念类似于visual studio中的书签,目的是方便vim编辑器在文档的不同位置
间跳转。正常情况下,这意味着要移动到那个位置,编辑,然后再移回来。这样很费事,也容易忘记刚才所在的位置。
有更聪明的办法。移动光标到下述文本的第5行(John Lennon的名言)。用ma创建一个名为'a'的标记。移动光标
到任一地方,比如,4j。按下’a(即,单引号加上标记的名字),瞧Vim跳到了刚才做标记的那一行的行首。如果要跳到做标记
的位置,按下‘a(即`,上排数字键1左边那个键)。可以使用任一字母(a-zA-Z)去命名一个标记,意味着一个文件里最多可以
有52个命名标记。
</pre>
<pre>
<h5>添加标记</h5>
将光标移到某一行,使用 ma 命令添加标记。其中,m 是标记命令,a 是所做标记的名称。
可以使用小写字母 a-z 或大写字母 A-Z 中的任意一个做为标记名称。小写字母的标记,仅用于当前缓冲区;而大写字母的
标记,则可以跨越不同的缓冲区。例如,你正在编辑 File1,但仍然可以使 用'A 命令,移动到 File2 中创建的标记A。<br />
<h5>跳转标记</h5>
创建标记后,可以使用 'a 命令,跳转到指定标记行的首个非空字符。这里 ' 是单引号。也可以使用 'a 命令,移到所做
标记时的光标位置。这里'是反引号(也就是数字键1左边的那一个)。
<br />
<h5>列出标记</h5>
利用:marks命令,可以列出所有标记。这其中也包括一些系统内置的特殊标记(Special marks):

. ——最近编辑的位置
0-9——最近使用的文件
∧ ——最近插入的位置
' ——上一次跳转前的位置
" ——上一次退出文件时的位置
[ ——上一次修改的开始处
] ——上一次修改的结尾处
<br />
<h5>删除标记</h5>
如果删除了做过标记的文本行,那么所做的标记也就不存了。我们不仅可以利用标记来快速移动,而且还可以使用标记来删除
文本,例如:在某一行用ma做了标记,然后就可以使用d'a来删掉这一行。当然,我们也可以使用y'a命令就可以来复制这一行
了。
使用:delmarks a b c命令,可以删除某个或多个标记;而:delmarks澳门新浦京娱乐场网站:前端开发工具系列,插件和使用技巧。! 命令,则会删除所有标记。
利用:help mark-motions命令,可以查看关于标记的更多帮助信息。

命令小结

m ——创建标记
' ——移动到标记的文本行首
` ——移动到标记的光标位置
:marks ——列示所有标记
:delmarks ——删除指定标记
:delmarks! ——删除所有标记
</pre>
</pre>
<pre>
<h2>commentary.vim </h2>
<h5>[commentary.vim]-主要功能是可以批量注释单行或多行以及去除注释;</h5>
gc:Visual模式下可以注释选中的行
gcc:普通模式下可以快速注释一行
gcu:可以撤销注释
</pre>

<pre><h2>multiple_cursors.vim</h2><br /><h5>[multiple_cursors.vim]-多行、多光标编辑</h5>
通过按 Ctrl n 来多重选取。一旦选取完成,便可配合 Vim 既有的命令对其进行编辑处理。最后按 Esc 可以退出多重选取<br />状态。此外,你也可以使用 MultipleCursorsFind 命令通过正则表达式来进行多重选取和编辑。
</pre>

<pre><h2>ctrlp.vim</h2><h5>[ctilp.vim]-主要功能是对系统文件进行搜索</h5>
ctrl j/k 进行上下选择
ctrl x 在当前窗口水平分屏打开文件
ctrl v 同上, 垂直分屏
ctrl t 在tab中打开
</pre>
<pre><h2>neocomplcache</h2><h5>[neocomplcache.vim]-自动补全插件</h5>
ctrl n-对补全代码向下选择
ctrl p-对补全代码向上选择
</pre>
<pre><h2>emmet.vim</h2><h5>[emmet.vim]-HTML超级编写利器,利用简写语法达到编写目的。</h5>
Emmet的基本用法:先写简写形式,然后用"<Ctrl y>,"将其转成HTML代码
基本规则:
(1):E 代表HTML标签
(2):E#id 代表标签E有id属性
(3):E.class 代表E有class属性
(4):E[attr=foo] 代表某个特定属性
(5):E{info} 代表标签E包含的内容是info
(6):E>N 代表N是E的子元素
(7):E N 代表N是E的同级元素
(8):E^N 代表N是E的上级元素
</pre>

<pre><h2>vim-surround</h2><h5>[vim-surround]-这个插件可以快速的为字符串包围/改变或去除引号/括号或者HTML标签</h5>
<h5>为单个单词包围</h5>
ysiw '/"/(/[/{ :在命令模式下, 就可以为光标下的一个单词包围上 '/"/(/[/{

比如
ysiw' :为光标下的单词包围上单引号
ysiw" :为光标下单词包围上双引号, 依此类推.
vim-surround 同时还支持包围html标签, 将光标放到某单词试试下面指令:ysiw<p>ysiw<p class="meta">
yssb :包围一行,可以快速为一行包围圆括号,.
yss '/"/(/[/{ : 可以为正行快速包围相应的引号/括号
比如
yss" :为一行包围双引号
<br />
<h5>更改包围</h5>
cs :可以更改包围,

比如
cs'" :是将单引号变成双引号
cs"( :是将双引号变成圆括号
vim-surround支持将括号或者引号变更为html标签, 试试命令cs'<p> :将单引号换成 <p>标签
<br />
<h5>去除包围</h5>
ds:指令可以取出包围, 后面需跟包围的内容,
ds":是去除双引号包围, ``
</pre>

插件管理

下文的配置很多都依赖于第三方开发的 Vim 插件。为了方便地安装和维护这些插件,推荐先安装一种插件管理工具,目前较为流行的是 Vundle 和 pathogen。二者功能类似,但 Vundle 的配置更灵活, pathogen 则相对简洁。二者都能很好地与Git结合,安装插件十分方便。

如果你使用 Git 管理你的配置文件,那么还可以将 Pathogen 或 Vundle 与 Git 的 Submodule 功能管理插件结合[5],使得在多台电脑间同步插件及在本地更新插件变得十分便捷。

# 在存放配置文件的主文件夹下,添加一个 submodule
git submodule add https://github.com/gmarik/vundle.git .vim/bundle/vundle

# 用类似的办法添加多个插件后,以后升级插件只需:
git submodule update

# 如果其它电脑 checkout 出配置文件后,要先:
git submodule init

插件管理工具无需通过系统的包管理系统安装,只要将需要的文件放在 ~/.vim/目录中即可。这样,一套配置文件也可以方便地用在多个不同的系统环境中。

4.NERD_tree.vim

NERD_tree.vim主要功能是一款文件浏览器,可以查看文件目录结构打开相应的文件。

具体演示如下图所示:

澳门新浦京娱乐场网站 4

我是使用绑定的快捷键F4来打开文件浏览器,光标在文件浏览器中可以用jk来移动,回车键可以打开文件,按q可以退出文件浏览器。

commentary.vim
[commentary.vim]-主要功能是可以批量注释单行或多行以及去除注释;
gc:Visual模式下可以注释选中的行gcc:普通模式下可以快速注释一行gcu:可以撤销注释
multiple_cursors.vim
[multiple_cursors.vim]-多行、多光标编辑
通过按 Ctrl n 来多重选取。一旦选取完成,便可配合 Vim 既有的命令对其进行编辑处理。最后按 Esc 可以退出多重选取状态。此外,你也可以使用 MultipleCursorsFind 命令通过正则表达式来进行多重选取和编辑。
ctrlp.vim
[ctilp.vim]-主要功能是对系统文件进行搜索
ctrl j/k 进行上下选择ctrl x 在当前窗口水平分屏打开文件ctrl v 同上, 垂直分屏ctrl t 在tab中打开
neocomplcache
[neocomplcache.vim]-自动补全插件
ctrl n-对补全代码向下选择ctrl p-对补全代码向上选择
emmet.vim
[emmet.vim]-HTML超级编写利器,利用简写语法达到编写目的。
Emmet的基本用法:先写简写形式,然后用"<Ctrl y>,"将其转成HTML代码基本规则:(1):E 代表HTML标签(2):E#id 代表标签E有id属性(3):E.class 代表E有class属性(4):E[attr=foo] 代表某个特定属性(5):E{info} 代表标签E包含的内容是info(6):E>N 代表N是E的子元素(7):E N 代表N是E的同级元素(8):E^N 代表N是E的上级元素
vim-surround
[vim-surround]-这个插件可以快速的为字符串包围/改变或去除引号/括号或者HTML标签
为单个单词包围
ysiw '/"/(/[/{ :在命令模式下, 就可以为光标下的一个单词包围上 '/"/(/[/{比如ysiw' :为光标下的单词包围上单引号ysiw" :为光标下单词包围上双引号, 依此类推.vim-surround 同时还支持包围html标签, 将光标放到某单词试试下面指令:ysiwysiw<p class="meta">yssb :包围一行,可以快速为一行包围圆括号,.yss '/"/(/[/{ : 可以为正行快速包围相应的引号/括号比如yss" :为一行包围双引号
更改包围
cs :可以更改包围,比如cs'" :是将单引号变成双引号cs"( :是将双引号变成圆括号vim-surround支持将括号或者引号变更为html标签, 试试命令cs':将单引号换成
标签
去除包围
ds:指令可以取出包围, 后面需跟包围的内容,ds":是去除双引号包围, ``

if filereadable(expand("~/.vimrc.bundles")) source ~/.vimrc.bundlesendif

代码补全

Vim 7已经内置了代码补全功能[6],补全操作可分为两种:

5.neocomplcache.vim

neocomplcache.vim主要功能是进行代码补全,

优点是对上下文进行索引,结果保存到缓存中,自动补全的效率比较高,另外匹配的也比较精准。

补全效果如下图展示:

澳门新浦京娱乐场网站 5

澳门新浦京娱乐场网站 6

im中的代码补全插件比较多,一般补全的智能性依赖于插件的字典,变量缓存机制。

从这点看neocomplcache也是挺不错的,另外智能读读取路径的功能也是挺赞的。

插件管理工具vunble

vundle是vim的插件管理工具,它能够搜索、安装、更新和移除vim插件,再也不需要手动管理vim插件。

  1. Home目录创建~/.vim目录和.vimrc文件(可复制我的vimrc文件)
  2. 安装vundle
git clone https://github.com/gmarik/vundle.git ~/.vim/bundle/vundle
  1. 在.vimrc配置文件中添加vundle支持
filetype offset rtp =~/.vim/bundle/vundle/call vundle#rc()

但实际上我是添加一个~/.vimrc.bundles文件来保存所有插件的配置,必须在~/.vimrc文件加入以下代码片段:

if filereadable(expand("~/.vimrc.bundles")) source ~/.vimrc.bundlesendif

~/.vimrc.bundles文件内容必须包含:

 filetype offset rtp =~/.vim/bundle/vundle/call vundle#rc()

你可以复制到我~/.vimrc.bundles文件到Home目录。

关键字补全

即简单地补全到文档中已有的词,快捷键为 Ctrl-N 或 Ctrl-P。

6.multiple_cursors.vim

multiple_cursors.vim的主要功能是多光标多行编辑。

主要效果可以见下面的图片:

澳门新浦京娱乐场网站 7

澳门新浦京娱乐场网站 8

在没有这款插件前,原生命令一般是进行块操作,在可视模式下对多行进行操作。步骤比较冗长,也容易出错,

这款插件可真谓利器啊,同时它还支持正则的操作呢。

安装插件

bundle分为三类,比较常用就是第二种

  1. 在Github vim-scripts 用户下的repos,只需要写出repos名称
  2. 在Github其他用户下的repos, 需要写出”用户名/repos名”
  3. 不在Github上的插件,需要写出git全路径

澳门新浦京娱乐场网站 9Bundle Type.png将安装的插件在~/.vimrc配置,但是我是将插件配置信息放在~/.vimrc.bundles

" Define bundles via Github reposBundle 'christoomey/vim-run-interactive'Bundle 'Valloric/YouCompleteMe'Bundle 'croaky/vim-colors-github'Bundle 'danro/rename.vim'Bundle 'majutsushi/tagbar'Bundle 'kchmck/vim-coffee-script'Bundle 'kien/ctrlp.vim'Bundle 'pbrisbin/vim-mkdir'Bundle 'scrooloose/syntastic'Bundle 'slim-template/vim-slim'Bundle 'thoughtbot/vim-rspec'Bundle 'tpope/vim-bundler'Bundle 'tpope/vim-endwise'Bundle 'tpope/vim-fugitive'Bundle 'tpope/vim-rails'Bundle 'tpope/vim-surround'Bundle 'vim-ruby/vim-ruby'Bundle 'vim-scripts/ctags.vim'Bundle 'vim-scripts/matchit.zip'Bundle 'vim-scripts/tComment'Bundle "mattn/emmet-vim"Bundle "scrooloose/nerdtree"Bundle "Lokaltog/vim-powerline"Bundle "godlygeek/tabular"Bundle "msanders/snipmate.vim"Bundle "jelera/vim-javascript-syntax"Bundle "altercation/vim-colors-solarized"Bundle "othree/html5.vim"Bundle "xsbeats/vim-blade"Bundle "Raimondi/delimitMate"Bundle "groenewege/vim-less"Bundle "evanmiller/nginx-vim-syntax"Bundle "Lokaltog/vim-easymotion"Bundle "tomasr/molokai"Bundle "klen/python-mode"

打开vim,运行:BundleInstall或在shell中直接运行vim BundleInstall qall

澳门新浦京娱乐场网站 10Install Bundle.png

安装完插件之后,可能还有一个问题:就是vim版本不够高

澳门新浦京娱乐场网站 11Vim版本不够高.png

可以使用以下命令更新vim版本

brew install macvim --override-system-vim

然后运行以下命令符号连接到/Application

brew linkapps macvim

最后在.zshrc配置文件中使用别名来使用更新后的vim

#setup macvim aliasalias vim='/usr/local/opt/macvim/MacVim.app/Contents/MacOS/Vim'

智能补全

Vim 7中引入 Omni Complete,可根据语义补全,快捷键为 Ctrl-X Ctrl-O。
Vim的补全菜单操作方式与一般IDE的方式不同,可加入如下设置[7]:

"让Vim的补全菜单行为与一般IDE一致(参考VimTip1228)
set completeopt =longest

"离开插入模式后自动关闭预览窗口
autocmd InsertLeave * if pumvisible() == 0|pclose|endif

"回车即选中当前项
inoremap <expr> <CR>       pumvisible() ? "<C-y>" : "<CR>"

"上下左右键的行为
inoremap <expr> <Down>     pumvisible() ? "<C-n>" : "<Down>"
inoremap <expr> <Up>       pumvisible() ? "<C-p>" : "<Up>"
inoremap <expr> <PageDown> pumvisible() ? "<PageDown><C-p><C-n>" : "<PageDown>"
inoremap <expr> <PageUp>   pumvisible() ? "<PageUp><C-p><C-n>" : "<PageUp>"

如需自动补全,可安装AutoComplPop插件,安装后如需在补全是显示文档(预览),可加入设置:

let g:acp_completeoptPreview = 1

7.commentary.vim

commentary.vim主要功能是可以批量注释单行或多行以及去除注释;

绑定退格键,选择多行可以直接以/**/的形式注释代码

 

最后,几款插件都是在前端开发中经常用到的,还有很多功能,原生的一些命令还是可以做的,

另外用Vim还有一个好处是从写C到写PHP再到写JS,都可以用同一个编辑器,还是挺方便的。

快捷键神马的自己在vimrc中配置即可,

打造自己的IDE的过程虽然折腾,但是之后使用的过程还是挺爽的呢~~~~

1 赞 5 收藏 评论

澳门新浦京娱乐场网站 12

常用插件

注释管理

经常要将一段代码注释掉或取消注释,而尤其对于某些只支持单行注释的语言来说,逐行加注释很麻烦,这时快速注释(或取消注释)代码的插件就显得很有用了。

常见的注释管理插件为The NERD Commenter,默认支持多种语言,使用方法也很简单:只需在可视(V)模式中选择一段代码,按下cc加逐行注释,cu取消注释,cm添加块注释。

如有其它需求,也可考虑comments、EnhCommentify等插件。

NERD Tree

NERD Tree是一个树形目录插件,方便浏览当前目录有哪些目录和文件。

澳门新浦京娱乐场网站 13NERD Tree Plugin Bundle.png我在~/.vimrc文件中配置NERD Tree,设置一个启用或禁用NERD Tree的键映射

nmap <F5> :NERDTreeToggle<cr>

澳门新浦京娱乐场网站 14NERD Tree Configuration.png所以你只需按F5键就能启用或禁用NERD Tree,NERD Tree提供一些常用快捷键来操作目录:

  • 通过hjkl来移动光标
  • o打开关闭文件或目录,如果想打开文件,必须光标移动到文件名
  • t在标签页中打开
  • si可以水平或纵向分割窗口打开文件
  • p到上层目录
  • P到根目录
  • K到同目录第一个节点
  • P到同目录最后一个节点

缩进

使用自动缩进可能需要设置,vim中对自动缩进的详细设置办法见Vim代码缩进设置。

在不同的模式中调整缩进的方法不同:

YouCompleteMe & syntastic

YouCompleteMe是一个快速、支持模糊匹配的vim代码补全引擎。由于它是基于Clang引擎为C/C /Objective-C提供代码提示,也支持其他语言代码提示的引擎,例如基于Jedi的Python代码补全,基于OmniSharp的C#代码补全,基于Gocode的Go代码补全。

澳门新浦京娱乐场网站 15YouCompleteMe.gif只需敲入代码,就自动提示想输入的代码列表,你可以选择其中一个,然后tab键就可以补全代码。

YouCompleteMe已经集成了Syntastic,所以一旦你编写代码时语法错误,就会有红色错误提示

澳门新浦京娱乐场网站 16syntastic.png

插入模式

Ctrl-T增加缩进,Ctrl-D减小缩进。

ctrlp

不知道你有没有遇到这样一种情况:在大规模的工程项目中,目录和文件嵌套比较深,打开一个文件要逐个逐个进入目录才能打开,这样的话,比较耗时间和效率很低,ctrlp重新定义打目录和文件方式,特别适用于大规模项目文件的浏览。

启用ctrlp

  • 运行命令:CtrlP:CtrlP [starting-directory]来以查找文件模式来启用** ctrlp**
  • 运行命令:CtrlPBuffer:CtrlPMRU来以查找缓冲或最近打开文件模式来启用ctrlp
  • 运行命令CtrlPMixed来查找文件、查找缓冲和最近打开文件混合模式来启动** ctrlp**

基本使用

  • <c-f><c-b>在三种查找模式中互相切换
  • <c-y>来创建新文件和对应的父目录
  • <c-d>来切换到只查找文件名而不是全路径
  • <c-j><c-k>或箭头方向键来移动查找结果列表
  • <c-t><c-v><c-x>来以新标签或分割窗口的方式来打开文件
  • <c-z>来标识或取消标识文件,然后按<c-o>来打开文件
  • <c-n><c-p>来在提示历史中选择下一个/上一个字符串

演示视频具体如何使用ctrlp,请参考happypetterd的演示视频,讲解非常清楚。

命令模式

>> 右缩进, << 左缩进,注意n<< 或 n>>是缩进多行,如4>>
Vim Powerline

Vim Powerline是一个显示vim状态栏插件,它能够显示vim模式、操作环境、编码格式、行数/列数等信息

澳门新浦京娱乐场网站 17Vim Powerline.png

可视模式

< 、 > 用于左右缩进, n< 、 n> 可做多节缩进,如 2> 。
另外,= 可对选中的部分进行自动缩进;]p可以实现p的粘贴功能,并自动缩进。

Molokai

Molokai是vim颜色主题,效果如下

澳门新浦京娱乐场网站 18Molokai Color Scheme for Vim.png

对于入门vim基本命令可以参考 简明 Vim 练级攻略,以下是本人关于移动光标插入/修改删除复制粘帖撤销和恢复等常用命令

  • 移动光标
  1. 对于在行内移动,通过使用f/F 字符来移动到特定的字符,然后再使用. 来重复执行命令;f表示向前移动,F表示向后移动。如果想直接移动到行首或行尾,使用^$
  2. 对于在多行移动,就有多种选择:第一种是通过ggG行数 G指定行数来移动,gg表示移动文件的第一行,G表示移动文件的最后一行,行数 G表示移动到特定的行。第二种就是通过正则搜索的方式来移动,/string表示正向查找,?string表示反向查找,n查找下一个匹配的结果,N表示上一个匹配的结果,按up/down可以浏览搜索历史。第三种就是使用标记来移动,m {a-z}标记位置(适用于单个文件,如果是多个文件,使用大写字母{A-Z}),``{mark}移动到标记位置的列,'{mark}移动到标记位置的行首,还有一些特殊的标记,'`表示跳转前光标的位置
  • 选择文本v不规则选择V按行选择Ctrl V按列选择

  • 插入/修改i在当前字符前面插入I在行首插入a在当前字符后面插入A在行尾插入o在当前行的下一行插入O在当前行的上一行插入

r更改当前的字符R更改多个字符cw/caw更改单词cf 字符更改从当前字符到指定字符c$更改从当前字符到行尾cc更改整行

  • 删除x删除字符df 字符删除从当前字符到指定字符dw/daw删除单词d$删除从当前光标到行尾dd删除一行

  • 剪切与粘帖dd pdelete一行,然后放在当前光标下方dd Pdelete一行,然后放在当前光标上方dw p delete单词,然后放在当前光标后面dw P delete单词,然后放在当前光标前面p/P可接受计数前缀,重复粘贴

  • 复制yw复制单词yf复制从当前字符到指定字符y$复制当前光标到行尾yy复制整行

  • 撤销和恢复u撤销ctrl r重做

  • 重复操作数字 action表示执行某个操作多少次.重复上一个操作

  • 宏录制q 寄存器开始录制录制动作``q停止录制@ 寄存器 / @@replay被录制的宏

  • Vim配置从零搭建和配置OSX开发环境将你的Vim 打造成轻巧强大的IDE
  • Vim插件vim中的杀手级插件: vundle谁说Vim不是IDE?vim中的杀手级插件: YouCompleteMe
  • Vim入门和使用技巧简明 Vim 练级攻略

代码浏览与跳转

代码跳转类似于IDE中的Ctrl 点击功能。与代码补全类似,代码浏览工具亦可分为基于文本分析的和基于代码理解的两类。

简单代码跳转

在命令模式下可直接使用下述指令:[8]

跳转到定义

gd到局部变量的定义,gD到全局变量的定义

搜索
*, # 可对光标处的词向前/向后做全词搜索,g*, g# 做相对应的非全词匹配搜索
代码块首尾

[[, ]] 可跳到当前代码块起始或结束的大括号处。

括号首尾

% 可在配对的括号、块首尾之前跳转。

位置历史

Ctrl-O 在历史记录中后台,Ctrl-I 则为前进。

基于代码理解的跳转

该功能依赖于ctags工具。[9]安装好ctags后,在存放代码的文件夹运行

ctags -R .

即可生成一个描述代码结构的tags文件。

提示: ctags的功能很强大,更详细的配置请参考其文档。

建议在~/.vimrc中添加如下配置以使Vim在父目录中寻找tags文件[10]:

set tags=tags;/

设置好后,可在Vim中使用如下功能:Ctrl-]转至最佳匹配的相应Tag,Ctrl-T返回上一个匹配。如果有多个匹配,g Ctrl-]可显示所有备选的tags。如有需要,可互换Ctrl-]和g Ctrl-] [11]:

"在普通和可视模式中,将<c-]>与g<c-]>互换
nnoremap <c-]> g<c-]>
vnoremap <c-]> g<c-]>

nnoremap g<c-]> <c-]>
vnoremap g<c-]> <c-]>

就地编译和错误处理

使用:make可调用make命令编译程序,配合Vim内置的QuickFix功能,可以像IDE一样打开一个窗口展示编译错误和警告,通过它还可以方便地跳转到各编译错误的产生位置。

常用的命令有:cw[indow](如有错误打开quickfix窗口)、:cn(跳到下一个错误)、:cp(跳到前一个错误)等,具体可:help quickfix。

如果想在有错时自动打开quickfix窗口[12]:

" 编译后,如有错误则打开quickfix窗口。(光标仍停留在源码窗口)
"
" 注意:需要开启netsting autocmd
autocmd QuickFixCmdPost [^l]* nested cwindow
autocmd QuickFixCmdPost    l* nested lwindow

默认情况下,:mak[e]会跳转到第一个错误,如果不想启用这个功能,请使用:make!。

代码折叠

代码较长时可启用代码折叠功能,如按语法高亮元素折叠:

set foldmethod=syntax
"默认情况下不折叠
set foldlevel=99

随后即可使用z系列命令管理代码折叠。如za会翻转当前位置的折叠状态,zA会递归翻转当前层所有代码的折叠状态等。当然也可以把功能键映射到za:

map <F3> za

查看文档

K 键可用于查看当前函数的文档。

其它插件

近来仍被积极维护的代码托管在 GitHub 上的插件[13]:

  1. Fugitive 让 Vim 更好地与 Git 整合。
  2. Powerline 炫丽实用的状态
  3. Tagbar 比 taglist 更现代的代码结构浏览工具
  4. The NERD tree 以树形结构浏览文件夹中的文件
  5. Syntastic 语法检查
  6. surround.vim 快速删除/修改光标周围配对的括号
    其它常用插件[14]:

Project
方便管理工程中的文件

snipmate.vim
在编辑中实现模板展开

a.vim
在.cpp/.h等文件对中跳转

matchit.zip
增强%的功能

winmanager
将文件管理窗口和taglist堆叠起来。

Vim 8.0 释出  http://www.linuxidc.com/Linux/2016-09/135178.htm

Linux下编译安装Vim8.0  http://www.linuxidc.com/Linux/2017-01/139210.htm

Vim学习指南 http://www.linuxidc.com/Linux/2013-08/89096.htm

Vim编辑器配置 http://www.linuxidc.com/Linux/2016-09/135460.htm

Vim编辑器使用 http://www.linuxidc.com/Linux/2016-09/135043.htm

快速学会 Vi编辑器 http://www.linuxidc.com/Linux/2013-08/88586.htm

强大的Vim 编辑器 http://www.linuxidc.com/Linux/2013-07/87544.htm

Linux文本编辑器Vim的一般用法  http://www.linuxidc.com/Linux/2016-11/137263.htm

把Vim打造成优秀的C IDE  http://www.linuxidc.com/Linux/2016-06/132262.htm

Ubuntu 14.04升级Vim7.4到8.0  http://www.linuxidc.com/Linux/2016-11/136816.htm

Vim安装youcompleteme自动补全插件  http://www.linuxidc.com/Linux/2016-11/137665.htm

Linux Vim编辑器使用简单讲解  http://www.linuxidc.com/Linux/2016-12/138930.htm

本文永久更新链接地址:http://www.linuxidc.com/Linux/2017-01/139564.htm

澳门新浦京娱乐场网站 19

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:澳门新浦京娱乐场网站:前端开发工具系列,插