Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/mattn/emmet-vim

emmet for vim: http://emmet.io/
https://github.com/mattn/emmet-vim

css emmet html javascript vim

Last synced: about 2 months ago
JSON representation

emmet for vim: http://emmet.io/

Lists

README 

        
# Emmet-vim



[![Build Status](https://travis-ci.org/mattn/emmet-vim.svg?branch=master)](https://travis-ci.org/mattn/emmet-vim)



[emmet-vim](https://mattn.github.io/emmet-vim/) is a vim plug-in

which provides support for expanding abbreviations similar to

[emmet](http://emmet.io/).



![screenshot](https://raw.githubusercontent.com/mattn/emmet-vim/master/doc/screenshot.gif)



## Installation



[Download zip file](http://www.vim.org/scripts/script.php?script_id=2981):



```sh

cd ~/.vim

unzip emmet-vim.zip

```



To install using [pathogen.vim](https://github.com/tpope/vim-pathogen):



```sh

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

```



To install using [Vundle](https://github.com/gmarik/vundle):



```vim

" add this line to your .vimrc file

Plugin 'mattn/emmet-vim'

```



To install using [Vim-Plug](https://github.com/junegunn/vim-plug):



```vim

" add this line to your .vimrc file

Plug 'mattn/emmet-vim'

```



To checkout the source from repository:



```sh

cd ~/.vim/bundle

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

```



or:



```sh

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:



```sh

vim index.html

```



Type ("\_" is the cursor position):



    html:5_



Then type `,` (Ctrly,), and you should see:



```html



	

	



	_



```



[More Tutorials](https://raw.githubusercontent.com/mattn/emmet-vim/master/TUTORIAL)



## Enable in different mode



If you don't want to enable emmet in all modes,

you can use set these options in `vimrc`:



```vim

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



```vim

let g:user_emmet_install_global = 0

autocmd FileType html,css EmmetInstall

```



## Redefine trigger key

To remap the default `` leader:



```vim

let g:user_emmet_leader_key=''

```



Note that the trailing `,` still needs to be entered, so the new keymap would be `,`.



## Adding custom snippets

If you have installed the [web-api](https://github.com/mattn/webapi-vim) for **emmet-vim** you can also add your own snippets using a custom **snippets.json** file.



Once you have installed the [web-api](https://github.com/mattn/webapi-vim) 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](http://docs.emmet.io/customization/snippets/) 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': "\n"

	\              ."\n"

	\              ."\n"

	\              ."\t\n"

	\              ."\t\n"

	\              ."\t\n"

	\              ."\n"

	\              ."\n\t${child}|\n\n"

	\              ."",

	\    },

	\  },

	\}



## Project Authors



[Yasuhiro Matsumoto](http://mattn.kaoriya.net/)



## 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:



*