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',
        \ }