跳到主要内容

4 篇博文 含有标签「工具」

查看所有标签

· 阅读需 8 分钟

Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性。

元素

可以使用元素名(如 div 或者 p)来生成 HTML 标签。Emmet 没有预定义的有效元素名的集合,可以把任何单词当作标签来生成和使用:div → <div></div>foo → <foo></foo>  等。

嵌套运算符

嵌套运算符用于以缩写的方式安排元素在生成文档树中的位置:将其放在内部或成为相邻的元素。

子: >

可以使用 >  运算符指定嵌套元素在另一个元素内部:

div>ul>li

生成的结果为:

<div>
<ul>
<li></li>
</ul>
</div>

兄弟: +

使用  +  运算符将相邻的其它元素处理为同级:

div+p+bq

生成的结果为:

<div></div>
<p></p>
<blockquote></blockquote>

上升: ^

使用  >  运算符将会降低所有后续所有元素在生成树中的级别,每一级的兄弟元素也被解析成相同深度的元素:

div+div>p>span+em

将生成:

<div></div>
<div>
<p><span></span><em></em></p>
</div>

使用  ^  运算符,能够提升元素在生成树中的一个级别,并同时影响其后的元素:

div+div>p>span+em^bq

将生成:

<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>

可以连续使用多个  ^  运算符,每次提高一个级别:

div+div>p>span+em^^^bq

将生成:

<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>

重复: *

使用  *  运算符可以定义一组元素:

ul>li*5

将生成:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

分组: ()

括号用于在复杂的 Emmet 缩写中处理一组子树:

div>(header>ul>li*2>a)+footer>p

将生成:

<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>

如果想与浏览器 DOM 协同工作,可能想要对文档片段分组:每个组包含一个子树,所有的后续元素都插入到与组中第一个元素相同的级别中。

能够在组中嵌套组并且使用  *  运算符绑定它们:

(div>dl>(dt+dd)*3)+footer>p

将生成:

<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>

使用分组,可以使用单个缩写逐个写出整页的标签,不过尽量不要这么做。

属性运算符

属性运算符用于编辑所生成的元素的属性,在 HTML 和 XML 中可以快速地为生成元素添加  class  属性。

ID 和 CLASS

在 CSS 中,可以使用  elem#id  和  elem.class  注解来达到为元素指定  id  或  class 属性的目的。在 Emmet 中,可以使用几乎相同的语法来为指定的元素添加这些属性:element:

div#header+div.page+div#footer.class1.class2.class3

生成:

<div></div>
<div></div>
<div></div>

自定义属性

可以使用  [attr]  注解(就像在 CSS 中一样)来为元素添加自定义属性:


将生成:

<td title="Hello world!" colspan="3"></td>
  • 能够在方括号中放置许多属性,
  • 可以不为属性指定值: td[colspan title]  将生成  <td colspan="" title=""> ,如果你的编辑器支持,可以使用 tab 来跳到每个空属性中填写。
  • 属性可以用单引号或双引号作为定界符。
  • 如果属性不包含空格,不需要用定界符括住它:td[title=hello colspan=3]  是正确的。

编号: $

使用  *  运算符可以重复生成元素,如果带  $  就可以为它们编号。把  $  放在元素名、属性名或者属性值中,将为每个元素生成正确的编号:

ul>li.item$*5

将生成:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

使用多  $  可以填充前导的零:

ul>li.item$$*5

将生成:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

改变编号的基数和方向

使用  @ ,可以改变数字的走向(升序或降序)和基数(例如起始值)。

在  $ 后添加 @- 来改变数字走向:

ul>li.item$@-*5

将生成:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

在  $ 后面添加 @N 改变编号的基数:

ul>li.item$@3*5

将生成:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

这些附加的运算符可以同时使用:

ul>li.item$@-3*5

将生成:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

文本: {}

可以用花括号向元素中添加文本:

a{Click me}

将生成:

<a href="">Click me</a>

注意,这个  {text}  是被当成独立元素解析的(类似于  divp ),但当其跟在其它元素后面时则有所不同。例如, a{click}  和  a>{click}  产生相同的输出,但是  a{click}+b{here}  和  a>{click}+b{here}  的输出就不同了:

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

在第二示例中, <b>  元素放在了  <a>  元素的里面。差别如下:当  {text}  写在元素的后面,它不影响父元素的上下文。下面是展示这种差别的重要性的较复杂的例子:

p>{Click }+a{here}+{ to continue}

生成:

<p>Click <a href="">here</a> to continue</p>

在这个例子里, 我们用  > 运算符明确的将  Click here to continue  下移一级,放在  <p>  元素内,但对于  a  元素的内容就不需要了,因为  <a>  仅有  here  这一部分内容,它不改变父元素的上下文。

作为比较,下面是不带有 > 运算符的相同缩写:

p{Click }+a{here}+{ to continue}

生成:

<p>Click</p>
<a href="">here</a> to continue

缩写格式的注意事项

当熟悉了 Emmet 的缩写语法后,可能会想要使用一些格式来生成更可读的缩写。例如,在元素和运算符之间使用空格间隔:

(header > ul.nav > li*5) + footer

但是这种写法是错误的,因为空格是 Emmet 停止缩写解析的标识符

请多用户误以为每个缩写都应写在新行上,但是他们错了:可以在文本的任意位置键入和扩展缩写。

这也就是为什么当想要停止解析和扩展时,Emmet 需要一些标志的原因。如果你仍然认为复杂的缩写需要一些格式使其更易读:

  • 缩写不是模板语言,它们不需要”易读 “,它们必须” 可快速扩展和移动“。
  • 不需要写复杂的缩写。不要认为在 web 编程中” 键入 “是最慢的运算。想快速找出构建单个的复杂缩写比构造和键入一些较短较简单的缩写更慢。

· 阅读需 3 分钟

1.SCSSSass

SassSCSS 其实是同一种东西,我们平时都称之为 Sass他们都是用Ruby开发 Css 预处理器,boostrap4已经将less换成了sass

不同之处:

  • 文件拓展名:分别是sassscss
  • 缩进:sass严格缩进(类似 python 和 ruby),scss是 css 的缩进样式
  • 是否兼容 css 语法:显然,由于缩进的不同,scss是兼容原生的 css 写法。

总的来说,scsssass升级版,兼容 css 语法,并且有着自己的独立语法。

2.环境配置

  1. 安装 ruby:windows 注意添加注册表路径
  2. 安装 sass:利用 ruby 的包管理器gem安装,命令行运行:gem install sass
  3. 升级和删除 sass:gem update/uninstall sass

如果国外源过慢?

gem sources -a https://ruby.taobao.org/
gem sources -l #查看是不是淘宝源

3.编译

编译指的是:将 scss 文件编译为 css 文件的过程。

3.1 源文件编译

单文件编译

scss scss.scss:css.css

实时自动编译

使用--watch参数即可,scss 会在源文件改动时候,自动重新编译。


3.2 输出文件风格

命令行编译时候,使用--style参数。

一段 scss 代码:

  h1 {
color : red;
}
}

默认:嵌套输出方式 nested

body h1 {
color: red; }

展开输出方式 expanded

body h1 {
color: red;
}

紧凑输出方式 compact

body h1 { color: red; }

压缩输出方式 compressed

body h1{color:red}

4.注意

最新的 scss 开启了sourcemap功能,--sourcemap参数默认添加。

· 阅读需 34 分钟

1. 简介

Vim(Vi[Improved])编辑器是功能强大的跨平台文本文件编辑工具,继承自 Unix 系统的 Vi 编辑器,支持 Linux/Mac OS X/Windows 系统,利用它可以建立、修改文本文件。进入 Vim 编辑程序,可以在终端输入下面的命令:

$vim [filename]

其中filename是要编辑器的文件的路径名。如果文件不存在,它将为你建立一个新文件。Vim 编辑程序有三种操作模式,分别称为 编辑模式插入模式命令模式,当运行 Vim 时,首先进入编辑模式。

2. 编辑模式

Vim 编辑方式的主要用途是在被编辑的文件中移动光标的位置。一旦光标移到到所要的位置,就可以进行剪切和粘贴正文块,删除正文和插入新的正文。当完成所有的编辑工作后,需要保存编辑器结果,退出编辑程序回到终端,可以发出ZZ命令,连续按两次大写的Z键。

2.1 跳转

如果键盘上有上、下、左、右箭头的导航键,就由这些键来完成光标的移动。另外,可以用下面的键完成同样的 按字符移动 功能:

k                上移;
j 下移;
h 左移;
l 右移。

上面这4个键将光标位置每次移动一行或一个 字符 。Vim 还提供稍大范围移动光标的命令:

ctrl+f        在文件中前移一页(相当于 page down);
ctrl+b 在文件中后移一页(相当于 page up);

更大范围的移动:

*          当光标停留在一个单词上,* 键会在文件内搜索该单词,并跳转到下一处;
# 当光标停留在一个单词上,# 在文件内搜索该单词,并跳转到上一处;
(/) 移动到 前/后 句 的开始;
{/} 跳转到 当前/下一个 段落 的开始。
g_ 到本行最后一个不是 blank 字符的位置。
fa 到下一个为 a 的字符处,你也可以fs到下一个为s的字符。
t, 到逗号前的第一个字符。逗号可以变成其它字符。
3fa 在当前行查找第三个出现的 a。
F/T 和 f 和 t 一样,只不过是相反方向;
gg 将光标定位到文件第一行起始位置;
G 将光标定位到文件最后一行起始位置;
NG或Ngg 将光标定位到第 N 行的起始位置。

在屏幕中找到需要的 一页 时,可以用下面的命令快速移动光标:

H                将光标移到屏幕上的起始行(或最上行);
M 将光标移到屏幕中间;
L 将光标移到屏幕最后一行。

同样需要注意字母的大小写。HL 命令还可以加数字。如 2H 表示将光标移到屏幕的第2行,3L 表示将光标移到屏幕的倒数第 3 行。 当将光标移到所要的行是,行内移动 光标可以用下面的命令来实现:

w                右移光标到下一个字的开头;
e 右移光标到一个字的末尾;
b 左移光标到前一个字的开头;
0 数字0,左移光标到本行的开始;
$ 右移光标,到本行的末尾;
^ 移动光标,到本行的第一个非空字符。

2.2 搜索匹配

和许多先进的编辑器一样,Vim 提供了强大的字符串搜索功能。要查找文件中指定字或短语出现的位置,可以用 Vim 直接进行搜索,而不必以手工方式进行。搜索方法是:键入字符 / ,后面跟以要搜索的字符串,然后按回车键。编辑程序执行正向搜索(即朝文件末尾方向),并在找到指定字符串后,将光标停到该字符串的开头;键入 n 命令可以继续执行搜索,找出这一字符串下次出现的位置。用字符 ? 取代 / ,可以实现反向搜索(朝文件开头方向)。例如:

/str1                正向搜索字符串 str1;
n 继续搜索,找出 str1 字符串下次出现的位置;
N 继续搜索,找出 str1 字符串上一次出现的位置;
?str2 反向搜索字符串 str2 。

无论搜索方向如何,当到达文件末尾或开头时,搜索工作会循环到文件的另一端并继续执行。 Vim 中执行搜索匹配最强大的地方是结合 正则表达式 来搜索,后续将会介绍。

2.3 替换和删除

Vim 常规的删除命令是 dx (前者删除 ,后者删除 字符 ),结合 Vim 的其他特性可以实现基础的删除功能。将光标定位于文件内指定位置后,可以用其他字符来替换光标所指向的字符,或从当前光标位置删除一个或多个字符或一行、多行。例如:

rc                 用 c 替换光标所指向的当前字符;
nrc 用 c 替换光标所指向的前 n 个字符;
5rA 用 A 替换光标所指向的前 5 个字符;
x 删除光标所指向的当前字符;
nx 删除光标所指向的前 n 个字符;
3x 删除光标所指向的前 3 个字符;
dw 删除光标右侧的字;
ndw 删除光标右侧的 n 个字;
3dw 删除光标右侧的 3 个字;
db 删除光标左侧的字;
ndb 删除光标左侧的 n 个字;
5db 删除光标左侧的 5 个字;
dd 删除光标所在行,并去除空隙;
ndd 删除(剪切) n 行内容,并去除空隙;
3dd 删除(剪切) 3 行内容,并去除空隙;

其他常用的删除命令有:

d$                从当前光标起删除字符直到行的结束;
d0 从当前光标起删除字符直到行的开始;
J 删除本行的回车符(CR),并和下一行合并。

Vim 常规的替换命令有 cs ,结合 Vim 的其他特性可以实现基础的替换功能,不过替换命令执行以后,通常会由 编辑模式 进入 插入模式

s                用输入的正文替换光标所指向的字符;
S 删除当前行,并进入编辑模式;
ns 用输入的正文替换光标右侧 n 个字符;
nS 删除当前行在内的 n 行,并进入编辑模式;
cw 用输入的正文替换光标右侧的字;
cW 用输入的正文替换从光标到行尾的所有字符(同 c$ );
ncw 用输入的正文替换光标右侧的 n 个字;
cb 用输入的正文替换光标左侧的字;
ncb 用输入的正文替换光标左侧的 n 个字;
cd 用输入的正文替换光标的所在行;
ncd 用输入的正文替换光标下面的 n 行;
c$ 用输入的正文替换从光标开始到本行末尾的所有字符;
c0 用输入的正文替换从本行开头到光标的所有字符。

2.4 复制粘贴

从正文中删除的内容(如字符、字或行)并没有真正丢失,而是被剪切并复制到了一个内存缓冲区中。用户可将其粘贴到正文中的指定位置。完成这一操作的命令是:

p               小写字母 p,将缓冲区的内容粘贴到光标的后面;
P 大写字母 P,将缓冲区的内容粘贴到光标的前面。

如果缓冲区的内容是字符或字,直接粘贴在光标的前面或后面;如果缓冲区的内容为整行正文,执行上述粘贴命令将会粘贴在当前光标所在行的上一行或下一行。 注意上述两个命令中字母的大小写。Vim 编辑器经常以一对大、小写字母(如 pP)来提供一对相似的功能。通常,小写命令在光标的后面进行操作,大写命令在光标的前面进行操作。

有时需要复制一段正文到新位置,同时保留原有位置的内容。这种情况下,首先应当把指定内容复制(而不是剪切)到内存缓冲区。完成这一操作的命令是:

yy              复制当前行到内存缓冲区;
nyy 复制 n 行内容到内存缓冲区;
5yy 复制 5 行内容到内存缓冲区;
“+y 复制 1 行到操作系统的粘贴板;
“+nyy 复制 n 行到操作系统的粘贴板。

2.5 撤销和重复

在编辑文档的过程中,为消除某个错误的编辑命令造成的后果,可以用撤消命令。另外,如果用户希望在新的光标位置重复前面执行过的编辑命令,可用重复命令。

u               撤消前一条命令的结果;
. 重复最后一条修改正文的命令。

3. 插入模式

3.1 进入插入模式

在编辑模式下正确定位光标之后,可用以下命令切换到插入模式:

i            在光标左侧插入正文
a 在光标右侧插入正文
o 在光标所在行的下一行增添新行
O 在光标所在行的上一行增添新行
I 在光标所在行的开头插入
A 在光标所在行的末尾插入

3.2 退出插入模式

退出插入模式的方法是,按 ESC 键或组合键 Ctrl+[ ,退出插入模式之后,将会进入编辑模式 。

4. 命令模式

在 Vim 的命令模式下,可以使用复杂的命令。在编辑模式下键入 : ,光标就跳到屏幕最后一行,并在那里显示冒号,此时已进入命令模式。命令模式又称 末行模式 ,用户输入的内容均显示在屏幕的最后一行,按回车键,Vim 执行命令。

4.1 打开、保存、退出

在已经启动的 Vim 中打开一个文件需要用 :e 命令:

:e path_to_file/filename

保存当前编辑的文件需要用 :w 命令(单词 write 的缩写):

:w

将当前文件另存为 file_temp 则:

:w file_temp

在编辑模式下可以用 ZZ 命令退出 Vim 编辑程序,该命令保存对正文所作的修改,覆盖原始文件。如果只需要退出编辑程序,而不打算保存编辑的内容,可用下面的命令:

: q                在未作修改的情况下退出;
: q! 放弃所有修改,退出编辑程序。

保存并退出则可以讲两条命令结合起来使用(注意命令顺序,先保存,后退出):

:wq

4.2 行号与文件

编辑中的每一行正文都有自己的行号,用下列命令可以移动光标到指定行(效果与 编辑模式 下的 nggnG 相同):

: n             将光标移到第 n 行

命令模式下,可以规定命令操作的行号范围。数值用来指定绝对行号;字符“.”表示光标所在行的行号;字符符“\$”表示正文最后一行的行号;简单的表达式,例如“.+5”表示当前行往下的第 5 行。例如:

:345                  将光标移到第 345 行
:345w file 将第 345 行写入 file 文件
:3,5w file 将第 3 行至第 5 行写入 file 文件
:1,.w file 将第 1 行至当前行写入 file 文件
:.,$w file 将当前行至最后一行写入 file 文件
:.,.+5w file 从当前行开始将 6 行内容写入 file 文件
:1,$w file 将所有内容写入 file 文件,相当于 :w file 命令

在命令模式下,允许从文件中读取正文,或将正文写入文件。例如:

:w                 将编辑的内容写入原始文件,用来保存编辑的中间结果
:wq 将编辑的内容写入原始文件并退出编辑程序(相当于 ZZ 命令)
:w file 将编辑的内容写入 file 文件,保持原有文件的内容不变
:a,bw file 将第 a 行至第 b 行的内容写入 file 文件
:r file 读取 file 文件的内容,插入当前光标所在行的后面
:e file 编辑新文件 file 代替原有内容
:f file 将当前文件重命名为 file
:f 打印当前文件名称和状态,如文件的行数、光标所在的行号等

4.3 字符串搜索

编辑模式 讲过字符串的搜索,此处的 命令模式 也可以进行字符串搜索,给出一个字符串,可以通过搜索该字符串到达指定行。如果希望进行正向搜索,将待搜索的字符串置于两个 / 之间;如果希望反向搜索,则将字符串放在两个 ? 之间。例如:

:/str/                  正向搜索,将光标移到下一个包含字符串 str 的行
:?str? 反向搜索,将光标移到上一个包含字符串 str 的行
:/str/w file 正向搜索,并将第一个包含字符串 str 的行写入 file 文件
:/str1/,/str2/w file 正向搜索,并将包含字符串 str1 的行至包含字符串 str2 的行写

4.4 Vim 中的正则表达式

当给 Vim 指定搜索字符串时,可以包含具有特殊含义的字符。包含这些特殊字符的搜索字符串称为正则表达式(Regular Expressions)。例如,要搜索一行正文,这行正文的开头包含 struct 字。下面的命令做不到这一点:

:/struct/

因为它只找出在行中任意位置包含 struct的第一行,并不一定在行的开始包含 struct 。解决问题的办法是在搜索字符串前面加上特殊字符^:

:/^struct/

^ 字符比较每行开头的字符串。所以上面的命令表示:找出以字符串 struct 开头的行。 也可以用类似办法在搜索字符串后面加上表示行的末尾的特殊字符 $ 来找出位于行末尾的字:

:/^struct/

下表给出大多数特殊字符和它们的含义:

^                放在字符串前面,匹配行首的字;
$ 放在字符串后面,匹配行尾的字;
\< 匹配一个字的字头;
\> 匹配一个字的字尾;
. 匹配任何单个正文字符;
[str] 匹配 str 中的任何单个字符;
[^str] 匹配任何不在 str 中的单个字符;
[a-b] 匹配 a 到 b 之间的任一字符;
* 匹配前一个字符的 0 次或多次出现;
\ 转义后面的字符。

简单介绍这么多,正则表达式知识可以参考 《正则表达式 30 分钟入门》:http://deerchao.net/tutorials/regex/regex.htm 另外,进阶的 Vim 正则表达式还有对 Magic 模式的介绍,可以参考 《Vim 正则表达式详解》: http://blog.csdn.net/salc3k/article/details/8222397

4.5 正文替换

利用 :s 命令可以实现字符串的替换。具体的用法包括:

:%s/str1/str2/        用字符串 str2 替换行中首次出现的字符串 str1
:s/str1/str2/g 用字符串 str2 替换行中所有出现的字符串 str1
:.,$ s/str1/str2/g 用字符串 str2 替换正文当前行到末尾所有出现的字符串 str1
:1,$ s/str1/str2/g 用字符串 str2 替换正文中所有出现的字符串 str1
:g/str1/s//str2/g 功能同上
:m,ns/str1/str2/g 将从m行到n行的str1替换成str2

从上述替换命令可以看到:

  1. g 放在命令末尾,表示对搜索字符串的每次出现进行替换,不止匹配每行中的第一次出现;不加 g,表示只对搜索字符串的首次出现进行替换;g 放在命令开头,表示对正文中所有包含搜索字符串的行进行替换操作;
  2. s 表示后面跟着一串替换的命令;
  3. % 表示替换范围是所有行,即全文。

另外一个实用的命令,在 Vim 中统计当前文件中字符串 str1 出现的次数,可用替换命令的变形:

:%s/str1/&/gn

4.6 删除正文

在命令模式下,同样可以删除正文中的内容。例如:

:d                              删除光标所在行
:3d 删除 3 行
:.,$d 删除当前行至正文的末尾
:/str1/,/str2/d 删除从字符串 str1 到 str2 的所有行
:g/^\(.*\)$\n\1$/d 删除连续相同的行,保留最后一行
:g/\%(^\1$\n\)\@<=\(.*\)$/d 删除连续相同的行,保留最开始一行
:g/^\s*$\n\s*$/d 删除连续多个空行,只保留一行空行
:5,20s/^#//g 删除5到20行开头的 # 注释

总之,Vim 的初级删除命令是用 d ,高级删除命令可以用 正则替换 的方式执行。

4.7 恢复文件

Vim 在编辑某个文件时,会另外生成一个临时文件,这个文件的名称通常以 . 开头,并以 .swp 结尾。Vim 在正常退出时,该文件被删除,若意外退出,而没有保存文件的最新修改内容,则可以使用恢复命令 :recover 来恢复文件,也可以在启动 Vim 时用 -r 选项。

4.8 选项设置

为控制不同的编辑功能,Vim 提供了很多内部选项。利用 :set 命令可以设置选项。基本语法为:

:set option         设置选项 option

常见的功能选项包括:

autoindent        设置该选项,则正文自动缩进
ignorecase 设置该选项,则忽略规则表达式中大小写字母的区别
number 设置该选项,则显示正文行号
ruler 设置该选项,则在屏幕底部显示光标所在行、列的位置
tabstop 设置按 Tab 键跳过的空格数。例如 :set tabstop=n,n 默认值为 8
mk 将选项保存在当前目录的 .exrc 文件中

4.9 Shell 切换

当处于编辑的对话过程中时,可能需要执行一些 Linux 命令。如果需要保存当前的结果,退出编辑程序,再执行所需的 Linux 命令,然后再回头继续编辑过程,就显得十分累赘。如果能在编辑的环境中运行 Linux 命令就要省事得多。在 Vim 中,可以用下面的命令来做到这一点:

:!shell_command   执行完 shell_command 后回到Vim

这称为 Shell 切换。它允许执行任何可以在标准的 Shell 提示符下执行的命令。当这条命令执行完毕,控制返回给编辑程序。又可以继续编辑对话过程。

4.10 分屏与标签页

分屏

普通的 Vim 模式,打开一个 Vim 程序只能查看一个文件,如果想同时查看多个文件,就需要用到 Vim 分屏与标签页功能。 Vim 的分屏,主要有两种方式:上下分屏(水平分屏)和左右分屏(垂直分屏),在命令模式分别敲入以下命令即可:

:split(可用缩写 :sp)            上下分屏;
:vsplit(可用缩写 :vsp) 左右分屏。

另外,也可以在终端里启动 vim 时就开启分屏操作:

vim -On file1 file2...   打开 file1 和 file2 ,垂直分屏
vim -on file1 file2... 打开 file1 和 file2 ,水平分屏

理论上,一个 Vim 窗口,可以分为多个 Vim 屏幕,切换屏幕需要用键盘快捷键,命令分别有:

Ctrl+w+h            切换到当前分屏的左边一屏;
Ctrl+w+l 切换到当前分屏的右边一屏;
Ctrl+w+j 切换到当前分屏的下方一屏;
Ctrl+w+k 切换到当前分屏的上方一屏。

即键盘上的h,j,k,l 四个 Vim 专用方向键,配合Ctrl键和w键(window的缩写),就能跳转到目标分屏。另外,也可以直接按 Ctrl+w+w 来跳转分屏,不过跳转方向则是在当前 Vim 窗口所有分屏中,按照逆时针方向跳转。 下面是改变尺寸的一些操作,主要是高度,对于宽度你可以使用 [Ctrl+W <] 或是 [Ctrl+W >] ,但这可能需要最新的版本才支持。

Ctrl+W =            让所有的屏都有一样的高度;
Ctrl+W + 增加高度;
Ctrl+W - 减少高度。

标签页

Vim 的标签(Tab)页,类似浏览器的标签页,一个标签页打开一个 Vim 的窗口,一个 Vim 的窗口可以支持 N 个分屏。 在 Vim 中新建一个标签的命令是:

:tabnew

如果要在新建标签页的同时打开一个文件,则可以在命令后面直接附带文件路径:

:tabnew filename

Vim 中的每个标签页有一个唯一的数字序号,第一个标签页的序号是0,从左向右依次加一。关于标签页有一系列操作命令,简介如下:

:tN[ext]                跳转到上一个匹配的标签
:tabN[ext] 跳到上一个标签页
:tabc[lose] 关闭当前标签页
:tabdo 为每个标签页执行命令
:tabe[dit] 在新标签页里编辑文件
:tabf[ind] 寻找 'path' 里的文件,在新标签页里编辑之
:tabfir[st] 转到第一个标签页
:tabl[ast] 转到最后一个标签页
:tabm[ove] N 把标签页移到序号为N位置
:tabnew [filename] 在新标签页里编辑文件
:tabn[ext] 转到下一个标签页
:tabo[nly] 关闭所有除了当前标签页以外的所有标签页
:tabp[revious] 转到前一个标签页
:tabr[ewind] 转到第一个标签页

4.11 与外部工具集成

Vim 可以与许多外部程序集成,功能十分强大,比如 diff , ctags , sort , xxd 等等,下面选取几个简单介绍一下。

diff

Linux 命令 diff 用来对比两个文件的内容,不过对比结果显示在终端里,可读性比较差。结合 Vim,在终端里可以直接输入命令 vimdiff,后面跟两个文件名作为参数:

vimdiff file1 file2

即可在 Vim 里分屏显示两个文件内容的对比结果,对文件内容差异部分进行高亮标记,还可以同步滚动两个文件内容,更可以实时修改文件内容,方便程度和用户体验大大提高。

vimdiff a.txt b.txt

如果直接给 -d 选项是一样的

vim -d a.txt b.txt

除了在终端里开启 vimdiff 功能,也可以在打开 Vim 后,在 Vim 的命令模式输入相关命令来开启 vimdiff 功能:

:diffsplit abc.txt

如果你现在已经开启了一个文件,想 Vim 帮你区分你的文件跟 abc.txt 有什么区别,可以在 Vim 中用 diffsplit 的方式打开第二个文件,这个时 候 Vim 会用 split(分上下两屏)的方式开启第二个文件,并且通过颜色,fold来显示两个文件的区别 这样 Vim 就会用颜色帮你区分开 2 个文件的区别。如果文件比较大(源码)重复的部分会帮你折叠起来。

:diffpatch filename

通过 :diffpatch 你的 patch 的文件名,就可以以当前文件加上你的 patch 来显示。vim 会 split 一个新的屏,显示 patch 后的信息并且用颜色标明区别。 如果不喜欢上下对比,喜欢左右(比较符合视觉)可以在前面加 vert ,例如:

:vert diffsplit abc.txt
:vert diffpatch abc.txt

看完 diff,用 :only 回到原本编辑的文件,觉得 diff 的讨厌颜色还是在哪里,只要用 :diffoff 关闭就好了。 还有个常用的 diff 中的就是 :diffu ,这个是 :diffupdate 的简写,更新的时候用。 Vim 的diff功能显示效果如下所示:

图片来自 http://www.2cto.com/net/201608/536924.html

sort

Linux 命令 sort 可以对文本内容进行按行中的字符比较、排序,但在终端里使用 sort 命令处理文件,并不能实时查看文件内容。具体用法请自查手册。

xxd

vim+xxd 是 Linux 下最常用的二进制文本编辑工具,xxd其实是 Vim 外部的一个转换程序,随 Vim 一起发布,在 Vim 里调用它来编辑二进制文本非常方便。 首先以二进制模式在终端里打开一个文件:

vim -b filename

Vim 的 -b 选项是告诉 Vim 打开的是一个二进制文件,不指定的话,会在后面加上 0x0a ,即一个换行符。 然后在 Vim 的命令模式下键入:

:%!xxd

即可看到二进制模式显示出来的文本,看起来像这样:

 0000000: 1f8b 0808 39d7 173b 0203 7474 002b 4e49  ....9..;..tt.+NI
0000010: 4b2c 8660 eb9c ecac c462 eb94 345e 2e30 K,......b..4^.0
0000020: 373b 2731 0b22 0ca6 c1a2 d669 1035 39d9 7;'1.".....i.59

然后就可以在二进制模式下编辑该文件,编辑后保存,然后用下面命令从二进制模式转换到普通模式:

:%!xxd -r

另外,也可以调整二进制的显示模式,默认是 2 个字节为一组,可以通过 g 参数调整每组字节数:

:%!xxd -g 1         表示每1个字节为1组
:%!xxd -g 2 表示每2个字节为1组(默认)
:%!xxd -g 4 表示每4个字节为1组

5. Vim 配置

最初安装的 Vim 功能、特性支持比较少,用起来比较费劲,想要稍微“好用”一点,需做一些初步的配置。Vim 的配置主要分为 Vim 本身特性的配置和外部插件的配置两部分。 Vim 的配置是通常是存放在用户主目录的 .vimrc 的隐藏文件中的。就 Vim 本身特性来说,基础的配置有编程语言语法高亮、缩进设置、行号显示、搜索高亮、TAB 键设置、字体设置、Vim 主题设置等等,稍微高级一些的有编程语言缩进、自动补全设置等,具体配置项可以自行查资料,全面详细的配置项介绍可以参考: 《Vim Options》: http://vimcdoc.sourceforge.net/doc/options.html#%27completeopt%27

6. Vim 插件

Vim“编辑器之神”的称号并不是浪得虚名,然而,这个荣誉的背后,或许近半的功劳要归功于强大的插件支持特性,以及社区开发的各种各样功能强大的插件。

平时开发人员常用插件主要是目录(文件)查看和管理、编程语言缩进与自动补全、编程语言 Docs 支持、函数跳转、项目管理等等,简单配置可以参考下面:

《Vim 插件简单介绍》: http://blog.segmentfault.com/xuelang/1190000000630547

《手把手教你把 Vim 改装成一个 IDE 编程环境(图文)》: http://blog.csdn.net/wooin/article/details/1858917

《将 Vim 改造为强大的 IDE》: http://www.cnblogs.com/zhangsf/archive/2013/06/13/3134409.html

当然,这些插件都是拜 Vim 本身的插件支持特性所赐。Vim 为了支持丰富的第三方插件,自身定义了一套简单的脚本开发语言,供程序员自行开发自己所需要的插件,插件开发介绍可以参考:

《Writing Vim Plugins》: http://stevelosh.com/blog/2011/09/writing-vim-plugins/

7. Vim 完整文档

  1. Vim 官方文档:http://vimdoc.sourceforge.net/
  2. Vim 中文用户手册 7_3.pdf :http://pan.baidu.com/s/1jGzbTBo

vim cheat-sheet

vim快捷键 vim键盘图

· 阅读需 18 分钟

Ctrl

快捷键 介绍
Ctrl + F 在当前文件进行文本查找 (必备)
Ctrl + R 在当前文件进行文本替换 (必备)
Ctrl + Z 撤销 (必备)
Ctrl + Y 删除光标所在行 或 删除选中的行 (必备)
Ctrl + X 剪切光标所在行 或 剪切选择内容
Ctrl + C 复制光标所在行 或 复制选择内容
Ctrl + D 复制光标所在行 或 复制选择内容,并把复制内容插入光标位置下面 (必备)
Ctrl + W 递进式选择代码块。可选中光标所在的单词或段落,连续按会在原有选中的基础上再扩展选中范围(必备)
Ctrl + E 显示最近打开的文件记录列表 (必备)
Ctrl + N 根据输入的 类名 查找类文件 (必备)
Ctrl + G 在当前文件跳转到指定行处
Ctrl + J 插入自定义动态代码模板 (必备)
Ctrl + P 方法参数提示显示 (必备)
Ctrl + Q 光标所在的变量 / 类名 / 方法名等上面(也可以在提示补充的时候按),显示文档内容
Ctrl + U 前往当前光标所在的方法的父类的方法 / 接口定义 (必备)
Ctrl + B 进入光标所在的方法/变量的接口或是定义处,等效于 Ctrl + 左键单击 (必备)
Ctrl + K 版本控制提交项目,需要此项目有加入到版本控制才可用
Ctrl + T 版本控制更新项目,需要此项目有加入到版本控制才可用
Ctrl + H 显示当前类的层次结构
Ctrl + O 选择可重写的方法
Ctrl + I 选择可继承的方法
Ctrl + + 展开代码
Ctrl + - 折叠代码
Ctrl + / 注释光标所在行代码,会根据当前不同文件类型使用不同的注释符号 (必备)
Ctrl + [ 移动光标到当前所在代码的花括号开始位置 Ctrl + ] 移动光标到当前所在代码的花括号结束位置
Ctrl + F1 在光标所在的错误代码处显示错误信息 (必备)
Ctrl + F3 调转到所选中的词的下一个引用位置 (必备)
Ctrl + F4 关闭当前编辑文件
Ctrl + F8 在 Debug 模式下,设置光标当前行为断点,如果当前已经是断点则去掉断点
Ctrl + F9 执行 Make Project 操作
Ctrl + F11 选中文件 / 文件夹,使用助记符设定 / 取消书签 (必备)
Ctrl + F12 弹出当前文件结构层,可以在弹出的层上直接输入,进行筛选
Ctrl + Tab 编辑窗口切换,如果在切换的过程又加按上 delete,则是关闭对应选中的窗口
Ctrl + End 跳到文件尾 Ctrl + Space 基础代码补全,默认在 Windows 系统上被输入法占用,需要进行修改,建议修改为 Ctrl + 逗 号 (必备)
Ctrl + Delete 删除光标后面的单词或是中文句 (必备)
Ctrl + BackSpace 删除光标前面的单词或是中文句 (必备)
Ctrl + 1,2,3...9 定位到对应数值的书签位置 (必备)
Ctrl + 左键单击在打开的文件标题上,弹出该文件路径 (必备)
Ctrl + 光标定位按 Ctrl 不要松开,会显示光标所在的类信息摘要
Ctrl + 左方向键光标跳转到当前单词 / 中文句的左侧开头位置 (必备)
Ctrl + 右方向键光标跳转到当前单词 / 中文句的右侧开头位置 (必备)
Ctrl + 前方向键等效于鼠标滚轮向前效果 (必备)
Ctrl + 后方向键等效于鼠标滚轮向后效果 (必备)

Alt

快捷键 介绍
Alt + ` 显示版本控制常用操作菜单弹出层 (必备)
Alt + Q 弹出一个提示,显示当前类的声明 / 上下文信息
Alt + F1 显示当前文件选择目标弹出层,弹出层中有很多目标可以进行选择 (必备)
Alt + F2 对于前面页面,显示各类浏览器打开目标选择弹出层
Alt + F3 选中文本,逐个往下查找相同文本,并高亮显示
Alt + F7 查找光标所在的方法 / 变量 / 类被调用的地方
Alt + F8 在 Debug 的状态下,选中对象,弹出可输入计算表达式调试框,查看该输入内容的调试结果
Alt + Home 定位 / 显示到当前文件的 Navigation Bar
Alt + Enter IntelliJ IDEA 根据光标所在问题,提供快速修复选择,光标放在的位置不同提示的结果也不同 (必 备)
Alt + Insert 代码自动生成,如生成对象的 set / get 方法,构造函数,toString() 等 (必备)
Alt + 左方向键 切换当前已打开的窗口中的子视图,比如 Debug 窗口中有 Output、Debugger 等子视图,用此快捷键就可 以在子视图中切换 (必备)
Alt + 右方向键 按切换当前已打开的窗口中的子视图,比如 Debug 窗口中有 Output、Debugger 等子视图,用此快捷键就 可以在子视图中切换 (必备)
Alt + 前方向键 当前光标跳转到当前文件的前一个方法名位置 (必备)
Alt + 后方向键 当前光标跳转到当前文件的后一个方法名位置 (必备)
Alt + 1,2,3...9 显示对应数值的选项卡,其中 1 是 Project 用得最多 (必备)

Shift

快捷键 介绍
Shift + F1 如果有外部文档可以连接外部文档
Shift + F2 跳转到上一个高亮错误 或 警告位置
Shift + F3 在查找模式下,查找匹配上一个
Shift + F4 对当前打开的文件,使用新 Windows 窗口打开,旧窗口保留 Shift + F6 对文件 / 文件夹 重命名
Shift + F7 在 Debug 模式下,智能步入。断点所在行上有多个方法调用,会弹出进入哪个方法 Shift + F8 在 Debug 模式下,跳出,表现出来的效果跟 F9 一样
Shift + F9 等效于点击工具栏的 Debug 按钮
Shift + F10 等效于点击工具栏的 Run 按钮
Shift + F11 弹出书签显示层 (必备)
Shift + Tab 取消缩进 (必备)
Shift + ESC 隐藏当前 或 最后一个激活的工具窗口
Shift + End 选中光标到当前行尾位置
Shift + Home 选中光标到当前行头位置
Shift + Enter 开始新一行。光标所在行下空出一行,光标定位到新行位置 (必备) Shift + 左键单击 在打开的文件名上按此快捷键,可以关闭当前打开文件 (必备) Shift + 滚轮前后滚动当前文件的横向滚动轴滚动 (必备)

Ctrl + Alt

快捷键 介绍
Ctrl + Alt + L 格式化代码,可以对当前文件和整个包目录使用 (必备)
Ctrl + Alt + O 优化导入的类,可以对当前文件和整个包目录使用 (必备)
Ctrl + Alt + I 光标所在行 或 选中部分进行自动代码缩进,有点类似格式化
Ctrl + Alt + T 对选中的代码弹出环绕选项弹出层 (必备)
Ctrl + Alt + J 弹出模板选择窗口,将选定的代码加入动态模板中
Ctrl + Alt + H 调用层次
Ctrl + Alt + B 在某个调用的方法名上使用会跳到具体的实现处,可以跳过接口
Ctrl + Alt + V 快速引进变量
Ctrl + Alt + Y 同步、刷新
Ctrl + Alt + S 打开 IntelliJ IDEA 系统设置 (必备)
Ctrl + Alt + F7 显示使用的地方。寻找被该类或是变量被调用的地方,用弹出框的方式找出来 Ctrl + Alt + F11 切换全屏模式
Ctrl + Alt + Enter 光标所在行上空出一行,光标定位到新行 (必备)
Ctrl + Alt + Home 弹出跟当前文件有关联的文件弹出层
Ctrl + Alt + Space 类名自动完成
Ctrl + Alt + 左方向键退回到上一个操作的地方 (必备)
Ctrl + Alt + 右方向键前进到上一个操作的地方 (必备)
Ctrl + Alt + 前方向键在查找模式下,跳到上个查找的文件
Ctrl + Alt + 后方向键在查找模式下,跳到下个查找的文件

Ctrl + Shift

快捷键 介绍
Ctrl + Shift + F 根据输入内容查找整个项目 或 指定目录内文件 (必备)
Ctrl + Shift + R 根据输入内容替换对应内容,范围为整个项目 或 指定目录内文件 (必备)
Ctrl + Shift + J 自动将下一行合并到当前行末尾 (必备)
Ctrl + Shift + Z 取消撤销 (必备)
Ctrl + Shift + W 递进式取消选择代码块。可选中光标所在的单词或段落,连续按会在原有选中的基础上再扩展取
消选中范围 (必备)
Ctrl + Shift + N 通过文件名定位 / 打开文件 / 目录,打开目录需要在输入的内容后面多加一个正斜杠 (必
备)
Ctrl + Shift + U 对选中的代码进行大 / 小写轮流转换 (必备)
Ctrl + Shift + T 对当前类生成单元测试类,如果已经存在的单元测试类则可以进行选择 (必备)
Ctrl + Shift + C 复制当前文件磁盘路径到剪贴板 (必备)
Ctrl + Shift + V 弹出缓存的最近拷贝的内容管理器弹出层
Ctrl + Shift + E 显示最近修改的文件列表的弹出层
Ctrl + Shift + H 显示方法层次结构
Ctrl + Shift + B 跳转到类型声明处 (必备)
Ctrl + Shift + I 快速查看光标所在的方法 或 类的定义
Ctrl + Shift + A 查找动作 / 设置
Ctrl + Shift + / 代码块注释 (必备)
Ctrl + Shift + [ 选中从光标所在位置到它的顶部中括号位置 (必备) Ctrl + Shift + ] 选中从光标所在位置到它的底部中括号位置 (必备)
Ctrl + Shift + + 展开所有代码 (必备)
Ctrl + Shift + - 折叠所有代码 (必备)
Ctrl + Shift + F7 高亮显示所有该选中文本,按 Esc 高亮消失 (必备)
Ctrl + Shift + F8 在 Debug 模式下,指定断点进入条件
Ctrl + Shift + F9 编译选中的文件 / 包 / Module
Ctrl + Shift + F12 编辑器最大化 (必备)
Ctrl + Shift + Space 智能代码提示
Ctrl + Shift + Enter 自动结束代码,行末自动添加分号 (必备)
Ctrl + Shift + Backspace 退回到上次修改的地方 (必备)
Ctrl + Shift + 1,2,3...9 快速添加指定数值的书签 (必备)
Ctrl + Shift + 左键单击 把光标放在某个类变量上,按此快捷键可以直接定位到该类中 (必备)
Ctrl + Shift + 左方向键 在代码文件上,光标跳转到当前单词 / 中文句的左侧开头位置,同时选中该单词 / 中文句
(必备)
Ctrl + Shift + 右方向键 在代码文件上,光标跳转到当前单词 / 中文句的右侧开头位置,同时选中该单词 / 中文句
(必备)
Ctrl + Shift + 前方向快捷键 介绍
Ctrl + Shift + 后方向键 光标放在方法名上,将方法移动到下一个方法前面,调整方法排序 (必备)

Alt + Shift

快捷键 介绍
Alt + Shift + N 选择 / 添加 task (必备)
Alt + Shift + F 显示添加到收藏夹弹出层 / 添加到收藏夹
Alt + Shift + C 查看最近操作项目的变化情况列表
Alt + Shift + I 查看项目当前文件
Alt + Shift + F7 在 Debug 模式下,下一步,进入当前方法体内,如果方法体还有方法,则会进入该内嵌的方法中,
依此循环进入
Alt + Shift + F9 弹出 Debug 的可选择菜单
Alt + Shift + F10 弹出 Run 的可选择菜单
Alt + Shift + 左键双击 选择被双击的单词 / 中文句,按住不放,可以同时选择其他单词 / 中文句 (必备)
Alt + Shift + 前方向键 移动光标所在行向上移动 (必备)
Alt + Shift + 后方向键 移动光标所在行向下移动 (必备)
Ctrl + Shift + Alt
Ctrl + Shift + Alt + V 无格式黏贴 (必备)
Ctrl + Shift + Alt + N 前往指定的变量 / 方法
Ctrl + Shift + Alt + S 打开当前项目设置 (必备)
Ctrl + Shift + Alt + C 复制参考信息

其他

快捷键 介绍
F2 跳转到下一个高亮错误 或 警告位置 (必备)
F3 在查找模式下,定位到下一个匹配处
F4 编辑源 (必备)
F7 在 Debug 模式下,进入下一步,如果当前行断点是一个方法,则进入当前方法体内,如果该方法体还有方 法,则不会进入该内嵌的方法中
F8 在 Debug 模式下,进入下一步,如果当前行断点是一个方法,则不进入当前方法体内
F9 在 Debug 模式下,恢复程序运行,但是如果该断点下面代码还有断点则停在下一个断点上
F11 添加书签 (必备)
快捷键 介绍 Tab 缩进 (必备)
ESC 从工具窗口进入代码文件窗口 (必备)
连按两次 Shift 弹出 Search Everywhere 弹出层