↓Skip to main content

Awesome Tagged Template Literals

··
javascript macros programming syntax
Disclaimer: This article is older than 180 days. The author may not hold that opinion anymore.
Table of Contents

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

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

// you can write this
`template string ${variable}
more text`;

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

css`
  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

More #

See Awesome Tagged Templates

Read more: Metaprogramming, Some notes about naming conventions

↑