Wrapper around babel.js (ES2015, React, ...)
Switch branches/tags
Nothing to show
Clone or download
Failed to load latest commit information.



Babel shows how the current file or a snippet of Javascript will be transformed by Babel.

:[RANGE] Babel [vert[ical]] [WINDOW-SIZE]

Calling :Babel without a range compiles the whole file:


Calling it with a range, like in visual mode, compiles only the selected snippet:


Each file gets its own Babel buffer, and the same buffer is used for all future calls of :Babel on that file. It can be quickly closed by hitting q in normal mode.

Using vert opens the Babel buffer vertically instead of horizontally

:Babel vert

By default the Babel buffer splits the source buffer in half, but this can be overridden by passing in a WINDOW-SIZE:

:Babel 4

Quick syntax checking

If compiling a snippet results in a compiler error, Babel adds that error to the quickfix list.

Syntax Checking

You can use this to quickly check the syntax of a snippet.

Note: Did you find this plugin useful? Please star it and share with others.

About the babel invocation

Out of the box Babel doesn't do anything. In order to actually do anything to your code you need to enable plugins and set some presets. This vim plugin looks for the existence of a .babelrc in the directory of the open buffer and in every parent directory. If found, it will set that directory and presets as arguments to babel-cli. Otherwise, it will just invoke babel-cli with no options whatsoever.


Plugin managers

The most common plugin managers include vim-plug, NeoBundle, Vundle and pathogen.vim.

With pathogen.vim, just clone this repository inside ~/.vim/bundle:

git clone https://github.com/jbgutierrez/vim-babel.git ~/.vim/bundle/vim-babel
git clone https://github.com/mattn/webapi-vim.git ~/.vim/bundle/webapi-vim

With the other plugin managers, just follow the instructions on the homepage of each plugin. In general, you just have to add a line to your ~/.vimrc:

" vim-plug
Plug 'jbgutierrez/vim-babel'
Plug 'mattn/webapi-vim'
" NeoBundle
NeoBundle 'jbgutierrez/vim-babel'
NeoBundle 'mattn/webapi-vim'
" Vundle
Plugin 'jbgutierrez/vim-babel'
Plugin 'mattn/webapi-vim'

Manual installation

Copy the contents of each directory in the respective directories inside ~/.vim.

You need to install webapi-vim also:


If you want to use latest one:



Please report any bugs you may find on the GitHub issue tracker.


Think you can make VimBabel better? Great!, contributions are always welcome.

Fork the project on GitHub and send a pull request.


I've borrow the core idea from the amazing vim-coffee-script plugin.


VimBabel is licensed under the MIT license. See http://opensource.org/licenses/MIT

Happy hacking!