Skip to content
Syntax highlighting for html template literals in javascript (as in lit-html and polymer 3)
Vim script Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
autoload Avoid re-sourcing syntax/javascript.vim Feb 7, 2020
doc
plugin
test Log skipped tests Jan 30, 2020
.editorconfig
.gitignore
LICENSE
readme.md

readme.md

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',
          \ }
You can’t perform that action at this time.