---

Ⅰ. 插件描述

highlights JavaScript's Template Strings in other FileType syntax rule

Ⅱ. 基本信息

创建日期：  2015-07-13 使用用户：  284 Github星：  126 插件作者：  Yosuke Kurami

Ⅲ. 安装方法

使用Vundle管理器安装

在你的.vimrc下添加:

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

… 然后在Vim中运行以下命令:

:source %
:PluginInstall

对于Vundle版本 < 0.10.2，请用上面的Bundle替换Plugin。

使用NeoBundle管理器安装

在你的.vimrc下添加:

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

… 然后在Vim中运行以下命令:

:source %
:NeoBundleInstall

使用VimPlug管理器安装

在你的.vimrc下添加:

Plug 'quramy/vim-js-pretty-template'

… 然后在Vim中运行以下命令:

:source %
:PlugInstall

使用Pathogen管理器安装

在终端中运行以下命令:

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

Ⅳ. 文档说明

# 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>
`;

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

Tagged Template Literal

Set the highlighting of template strings with the jspretmpl#register_tag() function. For example,

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

autocmd FileType javascript JsPreTmpl
autocmd FileType javascript.jsx JsPreTmpl

Then your JavaScript codes are Highlighted as the following:

// 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
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

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.