HTML Template Literals

Syntax highlighting and indentation for html inside of tagged template literals, as seen in lit-html and Polymer 3.

Supported Syntaxes inside html`...`

HTML (including CSS embedded in <style> tags)
JavaScript string interpolation (${...})
nested templates (html`${html`${}`}`)

See Configuration for support for css tagged literals (css`...` ).

Installation

This plugin requires vim-javascript (or typescript-vim if you're using typescript). If you use vim-plug for package management, installation looks like this:

Plug 'jonsmithers/vim-html-template-literals'
Plug 'pangloss/vim-javascript'

NOTE: it's generally a good idea to have let g:html_indent_style1 = "inc" in your vimrc for reasonable indentation of <style> tags. See :help html-indenting.

Configuration

Flag	Description
`g:htl_css_templates`	Enable css syntax inside css-tagged template literals (css`...`). Indentation behavior is currently not implemented.
`g:htl_all_templates`	(Experimental) Enable html syntax inside all template literals (`...`).
`g:htl_tag_names`	(Experimental) Specify the tag names in which to enable html syntax highlighting (default `['html']`).

Known Issues

Indentation in general still has some kinks. If you see an issue, please report it.
This plugin conflicts a bit with vim-jsx. Having both installed simultaneously may result in undesired indentation behaviors.
A patch in vim 8.1 introduced native typescript support in Vim. However, its region definitions are less precise and it's not easy to translate vim-html-template-literals indentation behavior to work with Vim's native typescript region definitions.

Tips

You can configure the vim-closetag plugin to work inside html template literals:

let g:closetag_filetypes = 'html,xhtml,phtml,javascript,typescript'
let g:closetag_regions = {
      \ 'typescript.tsx': 'jsxRegion,tsxRegion,litHtmlRegion',
      \ 'javascript.jsx': 'jsxRegion,litHtmlRegion',
      \ 'javascript':     'litHtmlRegion',
      \ 'typescript':     'litHtmlRegion',
      \ }