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 15 hours ago
JSON representation
emmet for vim: http://emmet.io/
- Host: GitHub
- URL: https://github.com/mattn/emmet-vim
- Owner: mattn
- License: mit
- Created: 2010-02-18T13:29:20.000Z (almost 15 years ago)
- Default Branch: master
- Last Pushed: 2024-08-10T02:07:49.000Z (5 months ago)
- Last Synced: 2024-10-29T14:55:57.226Z (3 months ago)
- Topics: css, emmet, html, javascript, vim
- Language: Vim Script
- Homepage: http://mattn.github.io/emmet-vim
- Size: 1.27 MB
- Stars: 6,433
- Watchers: 107
- Forks: 411
- Open Issues: 132
-
Metadata Files:
- Readme: README.mkd
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-vim-setting - mattn/emmet-vim
- my-awesome-starred - emmet-vim - emmet for vim: http://emmet.io/ (VimL)
- my-awesome-github-stars - mattn/emmet-vim - emmet for vim: http://emmet.io/ (Vim Script)
- awesome-list - emmet-vim
README
# Emmet-vim
[](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/).
## 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:
*