Skip to content

Syntax highlighting for html template literals in javascript (as in lit-html and polymer 3)

License

Notifications You must be signed in to change notification settings

jonsmithers/vim-html-template-literals

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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