Awesome Tagged Template Literals

Template literals is a pretty simple thing - it is a multiline string with interpolations:

1// instead of this
2"old-school string " + variable + "\nmore text";
4// you can write this
5`template string ${variable}
6more text`;

Tagged template literal is a function (tag) attached to a template literal. For example:

2  color: red;
  • this function can parse CSS and return it as a JS object
  • or it can insert it in the DOM and return the corresponding HTML class
  • or it can run PostCSS over the input
  • etc.

Pretty simple idea, but it opens a fountain of creativity.

TTL + Syntax highlighting and IntelliSense

  • SQL tagged template literals - A VS Code extension, which enables syntax highlighting for template literals tagged with an sql function in JavaScript and TypeScript files
  • lit-html - Syntax highlighting and IntelliSense for html inside of JavaScript and TypeScript tagged template strings
  • vscode-styled-components - Syntax highlighting for styled components in JavaScript and TypeScript. Detailed CSS IntelliSense while working in styled strings.
  • vscode-graphql - Syntax highlighting (type, query, mutation, interface, union, enum, scalar, fragments, directives). Autocomplete suggestions
  • vscode-comment-tagged-templates Adds basic syntax highlighting for JavaScript and TypeScript tagged template strings using language identifier comments
  • Pug Template Literals - Adds language support for Pug of JavaScript and TypeScript template literals.
  • es6-string-markdown - Adds syntax highlight support for code, placed in ES6 template literals for Markdown.
  • vscode-njk-template-literal
  • Inline YAML Syntax Highlighting - Provides basic inline, template literal syntax highlighting through grammar injection for Javascript/Typescript files:

Search marketplace for “literal”

TTL + TypeScript

See Awesome Template Literal Types

TTL + babel macros

See Awesome babel macros


See Awesome Tagged Templates

Except where otherwise noted, content on this site is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 4.0