Skip to content

jonsmithers/vim-html-template-literals

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
doc
 
 
 
 
 
 
 
 
 
 
 
 

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 (`...`).

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