Emmet Vim
| Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
|---|---|---|---|---|---|---|---|---|---|---|
| Emmet Vim | 5,789 | 2 years ago | 113 | mit | Vim script | |||||
| emmet for vim: http://emmet.io/ | ||||||||||
| Webapi Vim | 665 | a year ago | 3 | Vim Script | ||||||
| vim interface to Web API | ||||||||||
| Vim Github Comment | 163 | 7 years ago | 1 | mit | VimL | |||||
| Comment commits on GitHub using Vim | ||||||||||
| Vim Giphy | 52 | 7 years ago | mit | VimL | ||||||
| Giphy in your vim | ||||||||||
| Hateblo.vim | 47 | 8 years ago | 9 | VimL | ||||||
| This plugin provides some functions of Hatena-Blog by using AtomPub API. | ||||||||||
| Airline Weather.vim | 38 | 8 years ago | 1 | other | VimL | |||||
| Vim-airline extension to show weather in the status line. | ||||||||||
| Webapp Vim | 28 | 8 years ago | Go | |||||||
| Vim Webapp | 21 | 5 years ago | Vim script | |||||||
| Ref Sources.vim | 11 | 12 years ago | 1 | VimL | ||||||
| vim-ref 用の追加ソース (javascript, jquery, kotobank, wikipedia) | ||||||||||
| Poshcomplete Vim | 11 | 8 years ago | 1 | VimL | ||||||
| Omni Completion for PowerShell | ||||||||||
Emmet-vim
emmet-vim is a vim plug-in which provides support for expanding abbreviations similar to emmet.
Installation
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>
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
FAQ
-
Pressing ctrl+y+, doesn't work
Probably you set
timeoutlen=0. Most of Vim plugins which using key-mappings does not work withtimeoutlen=0.
