highlights JavaScript's Template Strings in other FileType syntax rule
Switch branches/tags
Nothing to show
Clone or download
Quramy Merge pull request #13 from MathieuDebit/master
One-line installation for Pathogen
Latest commit dcdfe45 Sep 22, 2017
Permalink
Failed to load latest commit information.
autoload Support JSX filetypes Aug 31, 2017
plugin Add JsPreTmplClear command Jul 23, 2015
.gitignore first commit Jul 13, 2015
LICENSE.txt Modify Jul 13, 2015
README.md Update README.md Sep 22, 2017
screencast01.gif Add screencast Jul 27, 2015

README.md

vim-js-pretty-template

A Vim plugin 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>
`;

capture

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:

git clone https://github.com/Quramy/vim-js-pretty-template.git ~/.vim/bundle/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

Tagged Template Literal

You can override the default rule defined :JsPreTml command with another rule using jspretmpl#register_tag() function. For example,

" Register tag name associated the filetype
call jspretmpl#register_tag('gql', 'graphql')

autocmd FileType javascript JsPreTmpl html

Then your JavaScript codes are Highlighted as the following:

// HTML way default
const template = `
  <div>html</div>
`;

// GraphQL way if gql tagged
const query = gql`
  fragment on User {
    name
  }
`;

For alternative JavaScript users

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

  • TypeScript
  • Dart
  • 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 dart JsPreTmpl xml

then:

var 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.