Giter Site home page Giter Site logo

emmet-vim's Introduction

Emmet-vim

Build Status

emmet-vim is a vim plug-in which provides support for expanding abbreviations similar to emmet.

screenshot

Installation

Download zip file:

cd ~/.vim
unzip emmet-vim.zip

To install using pathogen.vim:

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

To install using Vundle:

" add this line to your .vimrc file
Plugin 'mattn/emmet-vim'

To install using Vim-Plug:

" add this line to your .vimrc file
Plug 'mattn/emmet-vim'

To checkout the source from repository:

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

or:

git clone https://github.com/mattn/emmet-vim.git
cd emmet-vim
cp plugin/emmet.vim ~/.vim/plugin/
cp autoload/emmet.vim ~/.vim/autoload/
cp -a autoload/emmet ~/.vim/autoload/

Quick Tutorial

Open or create a New File:

vim index.html

Type ("_" is the cursor position):

html:5_

Then type <c-y>, (Ctrly,), and you should see:

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	_
</body>
</html>

More Tutorials

Enable in different mode

If you don't want to enable emmet in all modes, you can use set these options in vimrc:

let g:user_emmet_mode='n'    "only enable normal mode functions.
let g:user_emmet_mode='inv'  "enable all functions, which is equal to
let g:user_emmet_mode='a'    "enable all function in all mode.

Enable just for html/css

let g:user_emmet_install_global = 0
autocmd FileType html,css EmmetInstall

Redefine trigger key

To remap the default <C-Y> leader:

let g:user_emmet_leader_key='<C-Z>'

Note that the trailing , still needs to be entered, so the new keymap would be <C-Z>,.

Adding custom snippets

If you have installed the web-api for emmet-vim you can also add your own snippets using a custom snippets.json file.

Once you have installed the web-api add this line to your .vimrc:

let g:user_emmet_settings = webapi#json#decode(join(readfile(expand('~/.snippets_custom.json')), "\n"))

You can change the path to your snippets_custom.json according to your preferences.

Here you can find instructions about creating your customized snippets.json file.

Snippet to add meta tag for responsiveness

Update this in your .vimrc file.

let g:user_emmet_settings = {
\  'variables': {'lang': 'ja'},
\  'html': {
\    'default_attributes': {
\      'option': {'value': v:null},
\      'textarea': {'id': v:null, 'name': v:null, 'cols': 10, 'rows': 10},
\    },
\    'snippets': {
\      'html:5': "<!DOCTYPE html>\n"
\              ."<html lang=\"${lang}\">\n"
\              ."<head>\n"
\              ."\t<meta charset=\"${charset}\">\n"
\              ."\t<title></title>\n"
\              ."\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n"
\              ."</head>\n"
\              ."<body>\n\t${child}|\n</body>\n"
\              ."</html>",
\    },
\  },
\}

Project Authors

Yasuhiro Matsumoto

FAQ

  • Pressing ctrl+y+, doesn't work

    Probably you set timeoutlen=0. Most of Vim plugins which using key-mappings does not work with timeoutlen=0.

Links

Emmet official site:

zen-coding official site:

emmet.vim:

development repository:

my blog posts about zencoding-vim:

Japanese blog posts about zencoding-vim:

A Chinese translation of the tutorial:

emmet-vim's People

Contributors

ashfinal avatar baxter2 avatar cade-forester avatar chazmcgarvey avatar crazymaster avatar d8660091 avatar deepflame avatar doy avatar dpino avatar eight04 avatar eugene-p avatar jugend avatar mattn avatar mikewadsten avatar minimul avatar mrtazz avatar nkalvi avatar ogra avatar ohac avatar resolritter avatar serjan-nasredin avatar shaabhishek avatar shlomif avatar snowmantw avatar songz avatar taylorzr avatar ubrmnsh avatar vais avatar yeshiqing avatar zytron avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

emmet-vim's Issues

Problem width bg+ when edit the css file

zen_settings default:
bg - background:|;
bg+ - background:#FFF url(|) 0 0 no-repeat;

But, when i enter "bg+" and <ctrl-y-,>
the code is: background:; the same as "bg", not the "background:#FFF url(|) 0 0 no-repeat;"

Joining/splitting xsl tags

Hi! Given I am editing an xsl file. And I print par and press , then I see the following:

<xsl:param select="" name=""></xsl:param>

Parameters (so as variables and xsl:with-param tags) often do not contain any data within the tag so It's a common task for me to join the tag so that it looked like this:

<xsl:param select="user" name="users/item[1]"/>

But when I'm trying to join the tag by placing the cursor inside it and typing j I get:

<xsl:param select="" name=""></xsl></xsl:param>

or in other cases it just hangs my vim on :)

inline complete bug.

            <dd>button>b>bI</dd>

"I" is cursor's position.

, to:

            <dd>
                <button><b><b>I</b></b></button>
            </dd></dd>

see the last line :-(

wrapping does not work in fluid-tags with objects

I do have tags like:

<f:form.select property="type" options="{possibleItemTypes}" />

where I want to wrap a div.selectwrap around. It becomes:

<div class="selectwrap"><f:form.select property="type" options="{possibleItemTypes</div>

Extraneous dollar sign

When I try to use this plugin in gVim on windows, it mostly works, but always includes an extra dollar sign. For instance,

typing this:
div.foo>table>tr>td.bar*2

yields this (brackets replaced with parens for visibility in github html comments)
(div class foo)
(table)
(tr)
(td class="bar")$(/td)
(td class="bar")(/td)

    (/tr)
(/table)

(/div)

Balance Tag Inward problem

According to the doc here, |ctrl-yd| should select begin of <ul> to end of </ul>. But my vim just leave the last > after '/ul' unselected. It just selects those I display under:

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

css3 & hacks browsers

Additions hack browsers.
Write:

box-shado|w: 0 0 0 # 000;

(| - Cursor)
Replaced by:

-webkit-box-shadow: 0 0 0 # 000;
-moz-box-shadow: 0 0 0 0 # 000;
box-shadow: 0 0 0 # 000;

About this (bxsh: w) I know - is slow)

possible bug in visual mode

my .vimrc

let g:user_zen_settings = {
            \  'lang' : 'ja',
            \  'haml' : {
            \    'filters' : 'haml',
            \    'indentation' : ' '
            \  },
            \}

im trying to surround a visual block with tag, so im selecting a text and press C-Y, then i type %tr.test and it's expanding to a regular html tag, but not a haml tag.

Code style

Think would be nice to have ability to customize a code style more deeply like:

  1. to have '' or "" in the braces: background: #fff ('|' or "|" or ) no-repeat 0 0;
  2. set px or em or whatever as a default measurement: font-size: |px or |em or |whatever
  3. set whether i want to have Space before { or not: .classname { or .classname{
  4. set whether i want to have extra new line after } or not:
.classname {
  position: relative;
}

.classname2 {...}

or

.classname {
  position: relative;
}
.classname2 {...}
  1. After i leave current {} scope would be nice to sort all rules alphabetically:
.classname {
  position: relative;
  background: #fff;
}|

will become =>

.classname {
  background: #fff;
  position: relative;
}

Where | is the cursor position

new error of zencoding-expandabbr

type

a

and expandabbr with c - y ,

result is

<a href=""></a>

and use "o" to open a new line
and type "a" or anyother tag
then expandabbr with c - y ,

you can see it.
the output will cover the early line

Expand ${charset} as 'fileencoding' and use it in HTML snippets

Vim has the 'fileencoding' buffer option that specifies in which encoding the file is written.
It would be useful if zenencoding could use this value for in HTML/XHTML snippets.

Note 1: this value may be empty for a new file if the user hasn't set it global (setglobal fenc). In this case, the first charset in 'fileencodings' could be used. 'ucs-bom' must be ignored in the list. As a last fallback, use UTF-8.
Note 2: the Vim encodings names are not standard ones, so it may require sanitization. For example, 'utf-8' should be translated to 'UTF-8', 'cp1252' to 'windows-1252', 'latin1' or 'iso88591' to 'iso-8859-1'.

Problem when Wrapping With Abbreviation

wrap this abbreviation div#header>ul#navigation>li.item$*>a>span around this text…

About Us
Products
News
Blog
Contact Up

and something wrong will happen.

Rebinding

Doesn't seem to work using Janus + MacVim.

In my .gvimrc.local

let g:user_zen_expandabbr_key = '<D-e>'

Trying to bind to Command + E. But it doesn't seem to be working at all even I try to rebind in the command mode inside of mac vim. Any feedback?

Thanks!

| in JS or PHP

I added some nice HTML snippets to the file, but I've a problem. The | in a snippet is used to be replaced with the cursor, but if you use || (or) in JS(or something else) it will be seen as the | for the cursor.

Not only in JS, but if you use conditional comments and you are doing something like this:

The | is also used to replace for the cursor.

I've tried to escape the character |, but that don't work.

Error while using the balance tag function

VIM (Debian & GVIM (WinXP) 7.1.314, zencoding-vim 0.46

Error detected while processing function zencoding#balanceTag:
line    2:
E117: Unknown function: abs
E15: Invalid expression: abs(a:flag) == 2

Greets, Marko

ZC error on load with vim 7.3.46?

Hi matnn, I cannot use ZC with Vim version 7.3.46. I have installed ZC for vim according to the guide from "doc" folder - placed 'zencoding.vim' in /vimfiles/plugin. However, when I start up gVim or Vim, following message appears and I cannot use ZC after skipping the error popup.
I wonder if I have done something wrong. I used Windows 7 Professional, 32-bit.

***** Error message on gVim *****

Error detected while processing C:\Program Files\Vim\vimfiles\plugin\zencoding.vim:
line 6:
E477: No ! allowed:
line 7:
E488: Trailing characters:
line 8:
E488: Trailing characters:
line 9:
E488: Trailing characters:
line 10:
E488: Trailing characters: <meta http-equiv=
line 11:
E488: Trailing characters: <title>autoload/zencoding.vim at master from
mattn/zencoding-vim - GitHub</title>
line 12:
E488: Trailing characters: <link rel=
line 13:
E488: Trailing characters: <link rel=
line 15:
E488: Trailing characters: <link href=
line 16:
E488: Trailing characters: <link href=
line 19:
E488: Trailing characters: <script type=
line 20:
E121: Undefined variable: typeof
E15: Invalid expression: (typeof console == "undefined" || typeof console.log ==
"undefined")
line 2943:
E171: Missing :endif

***** Error message on Vim *****

line 20:
E121: Undefined variable: typeof
E15: Invalid expression: <typeof console =="undefined" || typeof console.log == "undefined">
line 2943:
E171: Missing: endif

Merge Lines Incorrect performance

see https://raw.github.com/mattn/zencoding-vim/master/TUTORIAL

8.Merge Lines

select the lines included '<li>'

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

and type 'J'

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

But I am here this:

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

There are spaces in the '<li>'

error of h${sometext}*3

output is :

<h></h>
sometextsometextsometext

but it should be:

<h1>sometext</h1>
<h2>sometext</h2>
<h3>sometext</h3>

autoloading

Now loading zencoding.vim is too heavy.
I'll change the way to loading zencoding.vim to 'autoload' type.

write called function instead of executing it

Hi. I'm trying to make it work but when i'm calling it "," it write the function called instead of executing it. example :

div#foo$*2>div.bar

becomes :

div#foo$*2>div.bar<Plug>ZenCodingExpandAbbr

Can you help me ?

Generate <li> elements as a single line when containing <a>

Currently if you do this

 ul>li*5>a

You get this

<ul>
    <li>
        <a href=""></a>
    </li>
    <li>
        <a href=""></a>
    </li>
    <li>
        <a href=""></a>
    </li>
    <li>
        <a href=""></a>
    </li>
    <li>
        <a href=""></a>
    </li>
 </ul>

Which is hideous, and a waste of space. When really it should render:

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

Which is much cleaner, and much more the standard.

Any plans on fixing this? Or pointers on how I might go about adding the edit myself?

I should also note that Zen Coding plugins in other editors seem to perform the latter, rather than the former (space waster version).

can't wrap with input

the example in help file works fine.But if I use input tag rather than li tag,zencoding won't wrap them automatic,like

test1
test2
test3

And if I choose these lines and type tag : form>input*,zencoding will create html like that:

<input type="">test1</input><input type="">test2</input><input type="">test3</input>

You can find that the different lines become one whole line.It looks ugly and hard to recongised.Could you fix this problem please?
Thank you very much

Bad $ replacement

div#id-$*5>div#id2-$
gives :

<div id="id-1">
<div id="id2-$"></div>
</div>
<div id="id-2">
<div id="id2-$"></div>
</div>
<div id="id-3">
<div id="id2-$"></div>
</div>
<div id="id-4">
<div id="id2-$"></div>
</div>
<div id="id-5">

while it should be :


<div id="id-1">
<div id="id2-1"></div>
</div>
<div id="id-2">
<div id="id2-2"></div>
</div>
<div id="id-3">
<div id="id2-3"></div>
</div>
<div id="id-4">
<div id="id2-4"></div>
</div>
<div id="id-5">
<div id="id2-5"></div>
</div>

$#が使えるようになりませんか?

mattn様、zen-codingプラグイン、大変便利に使っています。ありがとうございます。

自分の作業では、規定の原稿があって、それをHTML化する作業が多いため、expand abbreviation
よりは、wrap with abbreviationをよく使います。
そこで、タイトルのとおりなのですが、よければwrapしたものがバインド?されている$#が
使えるようにならないでしょうか?これが使えると、一層記述が柔軟にできます。

よければご一考願います。

Error on 'Go to next edit point'

I am on a Windows 7 and use this script in vim. I have updated the latest version and now I can't use <c-Y>n. Because I am on a windows I am using <c-E>n.

img_ press

<img src="_" alt="" />
<img src="foo.png_" alt="" />

press n

<img src="n" alt="" />
<source></source>" alt="" />

Taking 100% CPU when toggling comment

Hi,I'm new to zencoding. Today when I try toggling comment in insert-mode without selecting any text(I wanted to toggle comment for the whole text in the line), vim suddenly became frozen,it was taking 100% CPU usage.

OS version: Mac OS X 10.7.2
Vim version: 7.3 Included patches: 1-244, 246-353
Vim is installed by using macports

bugs in css zencoding

css code:

.pagesearch {
  padding: 0 0 15px; h|}

| -cursor. zencoding to:

.pagesearch {
  <padding:></padding:>
  <px></px>
  height: ;}

also not working css style example:

 .class_ex { h|}

windows 7 problem?

is this working on Windows 7?

  1. div>p
  2. CTRL-Y,

nothing happens

I tried to remap it in _vimrc with:

let g:user_zen_leader_key = 'c-e'

Again, no action triggered.

Not possible to wrapping inline?

VIM (Debian & GVIM (WinXP) 7.1.314, zencoding-vim 0.46

Trying to wrap something around a part of a line causes a wrap around the hole line.

For example:

<p>This is a sample text</p>

trying to wrap a link around "sample" causes this:

<a href=""><p>This is a sample text</p></a>

Greets, Marko

Preexisting mappings fail

Do you know why after I installed zencoding.vim that pre-existing maps no longer work? The NERDTree plugin maps to no longer works, and I've defined the following in my .vimrc file
map :bp
map :bn
Both fail to work.
Windows XP, VIM 7.2

error of toggle and close comment

<*asdfasdf>
    <asdfasdf>
        <asdfasd></asdfasd>
    </asdfasdf>
</asdfasdf>

If cursor is at '*', use / toggle comment

give:

<!-- <asdfasdf>
    <asdfasdf>
        <asdfasd></asdfasd>
    </asdfasdf> -->
</asdfasdf>

but it should be:

<!-- <asdfasdf>
    <asdfasdf>
        <asdfasd></asdfasd>
    </asdfasdf>
</asdfasdf> -->

and close comment also has errors

{cursor} in haml

ubuntu 10.04, vim 7.3, zencoding-vim 0.5

a*5

produce:
%a{:href=>"1{cursor}"}
%a{:href=>"2{cursor}"}
%a{:href=>"3{cursor}"}
%a{:href=>"4{cursor}"}
%a{:href=>"5{cursor}"}

should it just be
%a{:href=>""}
%a{:href=>""}
%a{:href=>""}
%a{:href=>""}
%a{:href=>""}

new global variable to point the location of curl

function! s:get_content_from_url(url)
  silent! new
  silent! exec '0r!'.g:zencoding_curl.' -s -L "'.substitute(a:url, '#.*', '', '').'"'
  let ret = join(getline(1, '$'), "\n")
  silent! bw!
  return ret
endfunction

error of Wrap with Abbreviation

  test1
  test2
  test3

do visual select

type C-Y,
type ul>li

give:

  <ui>

      test1
      test2
      test3
    <li></li>
  </ui>

but it should be:

<ul>
    <ll>
        test
        test
        test
    </ll>
</ul>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.