vim-js-pretty-template

A Vim plgin to highlight JavaScript's Template Strings contents in other FileType syntax rule which you want.

var htmlTempl = `
<div class="row">
  <div class="col-md-12">
    <span>{{ctrl.message}}</span>
  </div>
</div>
`;

Template Strings is available with Babel, google/traceur-compile and TypeScript.

How to install

Vundle

Place this in your .vimrc:

Plugin 'Quramy/vim-js-pretty-template'

then run the following in Vim:

:source %
:PluginInstall

NeoBundle

NeoBundle 'Quramy/vim-js-pretty-template'

then run the following in Vim:

:source %
:NeoBundleInstall

Pathogen

Run the following in a terminal:

cd ~/.vim/bundle
git clone https://github.com/Quramy/vim-js-pretty-template

Usage

This plugin provides the :JsPreTmpl command. For example:

:JsPreTmpl html

executing the above, a template string is highlighted with HTML way.

This command requires an argument. It's a FileType name which you can apply into templates in your JavaScript code.

If you want to apply automatically, you can append the following to your .vimrc:

autocmd FileType javascript JsPreTmpl html

For alternative JavaScript users

vim-js-pretty-template is also compatible for TypeScript and CoffeeScript.

• TypeScript
• CoffeeScript

For example:

autocmd FileType typescript JsPreTmpl markdown
autocmd FileType typescript syn clear foldBraces " For leafgarland/typescript-vim users only. Please see #1 for details.

then the following template string is highlighted:

var tmpl: string = `
## Title
*Highlighted in Markdown way.*
`;

or for example:

autocmd FileType coffee JsPreTmpl xml

then:

tmpl = """
<!-- highlighted in XML way -->
<svg:svg xmlns:svg="http://www.w3.org/2000/svg">
  <svg:circle cx="100" cy="100" r="50"></svg:circle>
</svg:svg>
"""

License

This plugin is released under the MIT license, see LICENSE.txt.