DEV Community


Awesome Tagged Template Literals

Hello, I'm a full stack web developer. Follow me on Twitter!
Originally published at on ・2 min read

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

// instead of this
"old-school string " + variable + "\nmore text";

// you can write this
`template string ${variable}
more text`;
Enter fullscreen mode Exit fullscreen mode

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

 color: red;
Enter fullscreen mode Exit fullscreen mode
  • 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

TTL + TypeScript

See Awesome Template Literal Types

TTL + babel macros

See Awesome babel macros


See Awesome Tagged Templates

Discussion (0)