Emmet 语法

首先,什么是 Emmet?官方给出了以下的解释:

Emmet uses syntax similar to CSS selectors for describing elements’ positions inside generated tree and elements’ attributes.

翻译过来就是:你可以使用类似于 CSS 选择器的语法来描述生成的树和元素属性中的元素位置。

那么什么是元素呢?元素指的就是我们的 div、p 标签等等。我们可以直接使用 p 加上 Tab 键就可以快速生成 <p></p>,这是极其方便的,现在的 IDE 好像都支持它。

嵌套运算符(Nesting Operator)

嵌套运算符用于在生成的树内定位缩写元素:它是否应该放置在上下文元素内部或附近。

(1)子代操作符(Child):>

就像我们使用 CSS 选择器那样,我们可以使用 > 操作符来创建我们的子代。

当我在编辑器中使用这个操作符进行如下代码的创建:

div>div>p

它的意思就是 div 下有一个子代的 div,紧接着在此子代中又有一个 p 标签。

结果如下:

 

 

很简单,而且很方便吧?


(2)兄弟操作符(Sibling):+

上面我们讲到了,创建子代的方法。但是现在,我们希望子代中的 div 不再包含 p 标签,而是与它成为同一级,都是父级 div 的子代。

那么我们就可以使用以下代码:

div>div+p

结果如下:

如此,它们就成为了同级的元素。


(3)返回上级操作符(Climb-up):^

我们在上面的代码中,创建的结果大家都看到了。那么这时候,我想要在父级元素的 div 的同级再创建一个 div 怎么办呢?如果直接使用上面的兄弟操作符,结果就成了这样:

div>div+p+div

结果如下:

 

很显然,这不是我们想要的结果。这时候,我们就需要用到返回上级选择器了。

代码如下:

div>div+p^div

结果如下:

 

 

不错,达到了我们想要的目标。但是遇到更复杂的场景呢?一层层的嵌套后,这时候要怎么才能返回到最初的父级元素呢?

这时候我们就可以多次的使用这个操作符。
例如如下代码:

div>div>div>p^^^div

这时,我们使用了 3 次 ^ 操作符使其返回到了最初的父级 div 元素上,我们来看看结果吧:

 

没错了,完美!


(4)乘法操作符(Multiplication):*

我们知道,用到重复元素最多的地方要数 ul 中的 li 了。一个一个复制,这显然是很麻烦而又枯燥的一件事情。

这时,我们可以使用乘法来解决它。比如我们这时需要 5 个 li。一个个复制太累啦,我们简单的一点代码就搞定它:

ul>li*5

结果如下:

 

很好理解吧。


(5)分组操作符(Grouping):()

这个分组是什么意思呢?很好理解,比如我们在创建一个页面结构,如果一个一个往下这么写,最后再使用 ^ 一层一层的返回上去,恐怕数数都要数晕了吧。

那么使用这个分组就轻松的解决了问题,来,我们来个布局吧。

(header>h1+div>p)+(main>p)+(footer>ul>li*3)

我不知道这个 Emmet 语法是否有点困难?但是我们可以试着分析下,就很清楚,我们将其分为了 header、main 和 footer 三个页面结构。

结果如下:

 

相信你应该是正确的。

另外,我们上面还有使用 ^ 操作符来进行返回上一级的元素,但是元素多了不就很难受了吗,这时候我们就可以使用分组,将其分为一个个的部分,省去了大量的思考。

比如:

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

结果如下:

采用分组,我们就可以不用在代码中的 a 标签处使用很多的 ^ 操作符去一级一级地返回啦。明白了吗?


属性操作符(Attribute Operators)

属性运算符用于修改输出元素的属性。

(1)ID 和 Class(ID and CLASS)

想必在我们写代码的时候,不可能没有这两个属性吧?在 Emmet 语法中,我们可以快速生成它们。

例如下列代码:

div#header>p.news*3

这样我们就快速的创建了它们,还是使用我们最熟的 # 和 . 来写。

结果如下:

我知道,这时候你会问,如果我们的 Class 属性不止一个呢?怎么办啊!

没关系,我们使用并列书写的原则就可以啦。

div#wrapper>div.news.news-tip.+div.news.news-content

结果如下:


(2)定制属性(Custom attributes)

定制的属性,我们就不可以使用简单的写法啦,这时候,我们就需要使用中括号[] 来将其括起来。

比如我们的 a 标签,它默认只有 href 属性,如果我们还需要别的呢:

a[target='' title='hello world']*3

结果如下:

 

这样,我们就给其添加了别的属性了。


(3)数值计算操作符(Item numbering):$

我们有时候在给 class 添加它的属性时,我们希望它是按照一定的数字进行排列,那么我们就可以使用这个操作符。

比如:

div>ul>li.item-$*3

结果如下:

如果你想倒着写数值的话呢,可以在 $ 操作符后面再加上 @-,也就是这样:

div>ul>li.item-$@-*3

结果如下:

 

不过这种情况我们很少会遇到。

最后还有一种情况,那就是你想指定数字是从几开始,那么你需要在 $ 后面加上 @N,这里的 N 为开始的数值。

div>ul>li.item-$@3*3

结果如下:


(4)文本操作符(Text):{}

我们可以使用大括号 {} 来对其输入一定的内容。这个操作符就很简单啦。

div#news>p{Hello,World!}

结果就是这样啦:

 

这个不难,就不再多举例了。当然你也可以连着别的标签写。

p{What's your name?}+p{My name is Alice}

结果如下:


总结

以上就是 Emmet 写法的全部内容了。当然了,还有 CSS 相关的几个写法,我觉得没必要讲了,那都是对浏览器前缀的写法,现在的现代浏览器都已经不再需要使用前缀来识别属性了。

本文转载于:https://www.jianshu.com/p/9e2f55776bc0

Emmet.vim 教程

Emmet 项目原来叫 Zen Coding。由俄罗斯前端开发工程师 Sergey Chikuyonok 开发,后来在 Google Code 上释出 Zen Coding 项目。2012年的时候,项目启用新名称 Emmet

Emmet 官方支持很多软件,比如 Sublime Text、Notepad++、Dreamweaver、Eclipse、Adobe Brackets 等。Emmet.vim 并非 Emmet 亲生,它由日本 Yasuhiro Matsumoto 开发。

下载 Emmet.vim

你可以从两个地址下载,一是 Vim 插件站点,一是 Github

安装 Emmet.vim

将下载的压缩包解压到 .vim 目录下:

cd ~/.vim
unzip emmet-vim.zip

如果你使用 pathogen.vim 管理 Vim 插件:

cd ~/.vim/bundle
unzip /path/to/emmet-vim.zip

或者直接从 Github 库克隆一份:

cd ~/.vim/bundle
git clone http://github.com/mattn/emmet-vim.git

个人建议通过 Pathogen 或 Vundle 来安装管理 Vim 插件。

使用 Emmet.vim

以下内容译自 Emmet.vim tutorial,感谢作者

1. 展开缩略词

键入缩略词组 div>p#foo$*3>a 然后按快捷键 <c-y>, – 指按 <Ctrl-y> 后再按逗号

<div>
    <p id="foo1">
        <a href=""></a>
    </p>
    <p id="foo2">
        <a href=""></a>
    </p>
    <p id="foo3">
        <a href=""></a>
    </p>
</div>

2. 包入

如下内容:

test1
test2
test3

按大写的 V 进入 Vim 可视模式,“行选取”上面三行内容,然后按键 ‘<c-y>,‘,这时 Vim 的命令行会提示 Tags:,键入ul>li*,然后按 Enter

<ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
</ul>

而假如输入的 tag 是 ‘blockquote’,则结果会变成下面这样。

<blockquote>
    test1
    test2
    test3
</blockquote>

3.插入模式下根据光标位置选中整个标签

按 ‘<c-y>d

4.插入模式下根据光标位置选中整个标签内容

按 ‘<c-y>D

5.跳转到下一个编辑点

插入模式下按 ‘<c-y>n

6.跳转到上一个编辑点

插入模式下按 ‘<c-y>N

7.更新图片大小

移动光标到 img 标签。

<img src="foo.png" />

然后按 ‘<c-y>i

<img src="foo.png" width="32" height="48" />

注:这个据个人使用经历,仅适用本地图片,互联网上的图片并无法取得其大小。

8.合并行

选择包含 ‘<li>’ 的行

<ul>
    <li class="list1"></li>
    <li class="list2"></li>
    <li class="list3"></li>
</ul>

然后按 ‘<c-y>m

<ul>
    <li class="list1"></li><li class="list2"></li><li class="list3"></li>
</ul>

9.移除标签对

移动光标到块中

<div class="foo">
    <a>cursor is here</a>
</div>

在插入模式下按 ‘<c-y>k‘。

<div class="foo">

</div> 

再次按 ‘<c-y>k‘ 则上述连 div 标签块都没了。

10.分割/合并标签

移动光标到块中

<div class="foo">
    cursor is here
</div>

在插入模式下按 ‘<c-y>j‘。

<div class="foo"/>

再次按 ‘<c-y>j‘。

<div class="foo">

</div>

11.切换注释

移动光标到块中

<div>
    hello world
</div>

插入模式中按 ‘<c-y>/‘。

<!-- <div>
    hello world
</div> -->

再按 ‘<c-y>/‘。

<div>
    hello world
</div>

12.从 URL 地址生成锚

将光标移至 URL

http://www.google.com/

按 ‘<c-y>a

<a href="http://www.google.com"></a>

13.从 URL 地址生成引用文本

移动光标到 URL

http://github.com/

按 ‘<c-y>A

<blockquote class="quote">
    <a href="http://github.com/"></a><br />
    <p>...</p>
    <cite>http://github.com/</cite>
</blockquote>

14.安装 Emmet.vim

见文章头部。

15.为你所用的语言启用 Emmet.vim

你可以为你用的语言自定义行为。

# cat >> ~/.vimrc
let g:user_emmet_settings = {
\ 'php' : {
\ 'extends' : 'html',
\ 'filters' : 'c',
\ },
\ 'xml' : {
\ 'extends' : 'html',
\ },
\ 'haml' : {
\ 'extends' : 'html',
\ },
\}

余话

除开以上帮助,你还可以按冒号进入 Vim 命令行模式,然后输入 help emmet 在新窗口中调用 Emmet 的帮助内容。

Emmet 在其他编辑器的触发快捷键一般是 TabCtrl+e,如果你更习惯它们,也可以在 .vimrc 文件中加入下一行命令来修改它的触发快捷键:

let g:user_emmet_expandabbr_key = '<Tab>'

这样就可以按 Tab 来扩展了。

 

本文转载自:https://www.zfanw.com/blog/zencoding-vim-tutorial-chinese.html

vim的复制粘贴小结

    用 vim这么久了,始终也不知道怎么在vim中使用系统粘贴板,通常要在网上复制一段代码都是先gedit打开文件,中键粘贴后关闭,然后再用vim打开编 辑,真的不爽;上次论坛上有人问到了怎么在vim中使用系统粘贴板,印象里回复很多,有好几页的回复却没有解决问题,今天实在受不了了又在网上找办法,竟 意外地找到了,贴出来分享一下。

    如果只是想使用系统粘贴板的话直接在输入模式按Shift+Inset就可以了,下面讲一下vim的粘贴板的基础知识,有兴趣的可以看看,应该会有所收获的。

    vim帮助文档里与粘贴板有关的内容如下:

    vim有12个粘贴板,分别是0、1、2、…、9、a、“、+;用:reg命令可以查看各个粘贴板里的内容。在vim中简单用y只是复制到“(双引号)粘贴板里,同样用p粘贴的也是这个粘贴板里的内容;

    要将vim的内容复制到某个粘贴板,需要退出编辑模式,进入正常模式后,选择要复制的内容,然后按”Ny完成复制,其中N为粘贴板号(注意是按一下双引号然后按粘贴板号最后按y),例如要把内容复制到粘贴板a,选中内容后按”ay就可以了,有两点需要说明一下:

    “号粘贴板(临时粘贴板)比较特殊,直接按y就复制到这个粘贴板中了,直接按p就粘贴这个粘贴板中的内容;

    +号粘贴板是系统粘贴板,用”+y将内容复制到该粘贴板后可以使用Ctrl+V将其粘贴到其他文档(如firefox、gedit)中,同理,要把在其他地方用Ctrl+C或右键复制的内容复制到vim中,需要在正常模式下按”+p;

    要将vim某个粘贴板里的内容粘贴进来,需要退出编辑模式,在正常模式按”Np,其中N为粘贴板号,如上所述,可以按”5p将5号粘贴板里的内容粘贴进来,也可以按”+p将系统全局粘贴板里的内容粘贴进来。

Vim相关链接收集

vimrc

vimrc.html
史上最强的Vim 配置文件(修正版)

介绍:

Vim7 的新功能
(有一些不错的介绍和资源链接,有时间整理到本页)
EMACS 对 vi:永无止境的圣战 2 en
贫穷的VIM作者Bram Moolenaar en

系统资料

大家來學 Vim 2

技巧:

Vim 实用技术,第 1 部分: 实用技巧
Vim 实用技术,第 2 部分: 常用插件
Vim 实用技术,第 3 部分: 定制 Vim
使用脚本编写 Vim 编辑器,第 1 部分: 变量、值和表达式
使用脚本编写 Vim 编辑器,第 2 部分: 用户定义函数
技巧:Vimdiff 使用
神奇的VIM
Best of Vim Tips 中文
自動去除不必要的空白
面向前端开发者和TextMate粉丝的vim配置 – 混沌海狂想
进行有效编辑的七种习惯
手把手教你把Vim改装成一个IDE编程环境(图文)

编码:

Vim中输入法与编码设置的FAQ – 碎碎念需翻墙

字体:

Windows下的Gvim使用微软雅黑字体
可以使用任何字体的gvim for windows
苹果的 Courier 字体不错
Windows 下 gVim 的雅黑字体配置

外观:

隐藏 gvim 的工具栏和菜单
Vim for Windows 的全屏插件
Vim Color Scheme Test
color sampler pack

半透明效果

VimTweak : The tweaking dll for GVim.exe.
Linux下可以在终端使用Vim。

Doxygen注释:

VIM 小技巧 (2): Doxygen Syntax
Doxygen syntax coloring in Vim
doxygen+VIM文档实用指南for C/C-liked Programmers
Doxygen

html:

VIM syntax highlight para HTML 5

翻译取词:

vim中支持stardict取词
修改版GVIM:支持金山词霸屏幕取词
读者来稿:VIM 也玩取词翻译

文档:

VIM的精品资料下载
Vim Chinese Docs vimdoc

正则表达式:

vim正则表达式
Vi中的正则表达式
vim正则参考 1

自动补全

pysmell – Autocomplete helper for Python
perl completion

PPT:

Vim Hacks (林佑安)
Perl.Hacks.On.Vim (林佑安)
Vim Editor in English
Kim Schulz Hacking Vim
Vim para Desenvolver
[20081118] How To Trace Code Like Source Insight Through Vim
VIM for (PHP) Programmers
Vim For Php

Video

7 Habits For Effective Text Editing 2.0

PDF:

利用 Vim 來編修 PDF 檔

集合:

善用佳软 (hashtags#gvim)
Gracecode (hashtags#vim)
vim那点儿事儿
Vim编辑器vim编辑器的技巧、经验、资源等收集。
vim使用进阶
碎碎念 (hashtags#vim)
AutoComplPop : Automatically opens popup menu for completions
DoxyGen Syntax : DoxyGen Highlighting on top of c/c++/java
DoxygenToolkit.vim : Simplify Doxygen documentation in C, C++, Python.
Fork of hallettj/jslint.vim @see JSLint的Vim插件,支持高亮显示错误代码以及Quickfix模式。Fork过来打了个读取~/.jslintrc的小补丁。
ctags
maycode.com (linuxdevelop)
文章列表 – vim点滴
紅塵一隅間拾得 – vim
JDany’s World (hashtags#vim)
牧马志 (hashtags#vim)
searun的专栏 (hashtags#Hacking VIM)
星光居士的工作室 (hashtags#vim)
good coder code, great reuse (hashtags#vim)
Swaroop CH (hashtags#vim)

社区

Vim-cn
豆瓣Vim小组
Vim-Taiwan
水木社区VIM版

插件(Plugins)File Type

xmledit : A filetype plugin to help edit XML, HTML, and SGML documents

搜索(Search)

MultipleSearch : Highlight multiple searches at the same time, each with a different color.
MultipleSearch2.vim : Improve Multiple search

注释文档(Comments Docs)

PDV – phpDocumentor for Vim : Provides really comfortable generation of phpDocumentor doc blocks for PHP4 & 5.
The NERD Commenter : A plugin that allows for easy commenting of code for many filetypes.
comments.vim : To Comment/Un-Comment single/multiple lines of code for different source files

Java

Vim JDE : Vim – Just a Development Envirement (Java/C++) site 2
javacomplete : Omni Completion for JAVA

YUI

YUI: Vim Syntax and AutoComplete

jQuery

jQuery : Syntax file for jQuery

Blog

Vimpress : Manage wordpress blog posts from Vim 用vim来写wordpress

Twitter

Vim Script – Twitter (Patched)
Twitter : A simple client for Twitter (script#1853)

IME

VimIM —— Vim 中文输入法
VimIM —— Vim 中文输入法
VimIM : Vim Input Method — Vim 中文输入法
ywvim : Another input method(IM) for VIM, supports all modes.

第三方应用Eclipse

Eclim (Eclipse + Vim)

PDF

apvlv (a PDF Viewer which behaves like Vim)

Firefox

Vimperator Addons 用gvim编辑firefox的文本框内容
jv-extension (A Firefox extension that emulates Vim in all html textareas) Addons
Textarea viEditor
Firefox with vi(m) keybindings

Office

ViEmu – Vi/vim emulation for Visual Studio, Word, Outlook and SQL Server
ViWord

File Explorer

Vifm

Vim 脚本开发

编写 Vim 脚本