emmet.snippets

Ⅰ. 插件描述

emmet for vim's UltiSnips plugin: http://emmet.io/

Ⅱ. 基本信息

创建日期：  2016-08-06
使用用户：  13
Github星：  25
插件作者：  Jan Christoph Ebersbach

Ⅲ. 安装方法

使用Vundle管理器安装

在你的.vimrc下添加: 
Plugin 'jceb/emmet-snippets'
… 然后在Vim中运行以下命令: 
:source %
:PluginInstall

对于Vundle版本 < 0.10.2，请用上面的Bundle替换Plugin。

使用NeoBundle管理器安装

在你的.vimrc下添加: 
NeoBundle 'jceb/emmet-snippets'
… 然后在Vim中运行以下命令: 
:source %
:NeoBundleInstall

使用VimPlug管理器安装

在你的.vimrc下添加: 
Plug 'jceb/emmet-snippets'
… 然后在Vim中运行以下命令: 
:source %
:PlugInstall

使用Pathogen管理器安装

在终端中运行以下命令: 
cd ~/.vim/bundle
git clone https://github.com/jceb/emmet.snippets

Ⅳ. 文档说明

# emmet.snippets

emmet.snippets provides an UltiSnips
snippet that interprets emmet's syntax
for quickly generating HTML and XML tags and attributes.

Features

  • Live generation of tags and id and class attributes
  • Fully supported syntax elements: >, +, ^, #, *, $, {..}, [..]
  • Proper indentation
  • Dynamic jumps to tags without children and attributes without values
  • First line of text is deleted automatically after the first jump
  • Reasonable amount of tests implemented
  • Default attributes that are added to tags automatically
  • Default settings and configuration for inline tags, non-block tags and
    abbreviations for tag names

Usage

html>head>title^body>h1#title+p.myclass

asciicast

Installation

  • Make sure UltiSnips is installed
  • Clone emmet.snippets repository

  • Make sure it's present in your path variable

    • I recommend using pathogen. It's
      enough to clone the repository in ~/.vim/bundle
  • Test the functionality by opening a new buffer in vim :vs. Change
    filetype to html setf html. Write et and press <Tab> to expand the

snippet and perform a self test

  • All tests should pass

Configuration

Abbreviations

Abbreviations are expanded into longer tags automatically. You can overwrite the
default configuration by assinging to the variable
g:emmet_FILETYPE_abbreviations or extend the configuration by assigning
to the variable g:emmet_FILETYPE_abbreviations_extension. FILETYPE has
to be replaced by the actual file type. Currently the following file types are
supported: html, xml, xsl, xslt and docbk.

Example, overwrite configuration:

let g:emmet_html_default_attributes = {
    \ 'bq': 'blockquote',
    \ })

Example, extend configuration:

let g:emmet_html_default_attributes_extension = {
    \ 'bq': 'blockquote',
    \ })

Default attributes

Default attributes are added to tags automatically. You can overwrite the
default configuration by assinging to the variable
g:emmet_FILETYPE_default_attributes or extend the configuration by assigning
to the variable g:emmet_FILETYPE_default_attributes_extension. FILETYPE has
to be replaced by the actual file type. Currently the following file types are
supported: html, xml, xsl, xslt and docbk.

Example, overwrite configuration:

let g:emmet_html_default_attributes = {
    \ 'a': {'href': '', 'id': 'ID'},
    \ })

Example, extend configuration:

let g:emmet_html_default_attributes_extension = {
    \ 'a': {'href': '', 'id': 'ID'},
    \ })

This will lead to the following tag and attributes when you type a in emmet:

# a
<a target="_blank" rel="nofollow" href="" id="ID"></a>

Inline tags

Inline tags show child tags without creating a new line. You can overwrite the
inline tags configuration by assinging to the variable
g:emmet_FILETYPE_inline_tags or extend the configuration by assigning to the
variable g:emmet_FILETYPE_inline_tags_extension. FILETYPE has to be
replaced by the actual file type. Currently the following file types are
supported: html, xml, xsl, xslt and docbk.

Example, overwrite configuration:

let g:emmet_html_inline_tags = [
    \ 'a',
    \ ])

Example, extend configuration:

let g:emmet_html_inline_tags_extension = [
    \ 'a',
    \ ])

Example inline vs. block tag:

Inline tag span:
<span><a target="_blank" rel="nofollow" href=""></a></span>

Block tag p:
<p>
    <a target="_blank" rel="nofollow" href=""></a>
</p>

Self closing tags

Self closing tags are abbreviated by avoiding the closing tag. You can
overwrite the self closing tags configuration by assinging to the variable
g:emmet_FILETYPE_self_closing_tags or extend the configuration by assigning to
the variable g:emmet_FILETYPE_self_closing_tags_extension. FILETYPE has to
be replaced by the actual file type. Currently the following file types are
supported: html, xml, xsl, xslt and docbk.

Example, overwrite configuration:

let g:emmet_html_self_closing_tags = [
    \ 'br',
    \ ])

Example, extend configuration:

let g:emmet_html_self_closing_tags_extension = [
    \ 'br',
    \ ])

Example inline vs. block tag:

Self closing tag br:
<br />

Non-self closing tag p:
<p>
</p>

Item Numbering

Item numbering, $, can behave in two ways when combined with multiplication,
*. Stacked multiplication combines all previous modifiers while non-stacked
multiplication just takes the tags direct multiplier into account. The variable
g:emmet_stacked_multiplication controls the behavior.

To enable non-stacked multiplication execute `let
g:emmet_stacked_multiplication=0` (default).

# ul.list$*3>li.item$$*3
<ul class="list1">
    <li class="item01"></li>
    <li class="item02"></li>
    <li class="item03"></li>
</ul>
<ul class="list2">
    <li class="item01"></li>
    <li class="item02"></li>
    <li class="item03"></li>
</ul>
<ul class="list3">
    <li class="item01"></li>
    <li class="item02"></li>
    <li class="item03"></li>
</ul>

To enable stacked multiplication execute let g:emmet_stacked_multiplication=1.

# ul.list$*3>li.item$$*3
<ul class="list1">
    <li class="item01"></li>
    <li class="item02"></li>
    <li class="item03"></li>
</ul>
<ul class="list2">
    <li class="item04"></li>
    <li class="item05"></li>
    <li class="item06"></li>
</ul>
<ul class="list3">
    <li class="item07"></li>
    <li class="item08"></li>
    <li class="item09"></li>
</ul>

Known Issues

  • Not all syntax elements are supported yet. The following are missing:

    • Grouping: (..)
    • Changing numbering base and direction: @- and @N
  • Almost no error handling implemented
  • Python 3 only
  • No support for CSS, SASS and other syntaxes

Related Works

添加新评论