Awesome Tagged Template Literals

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

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

TTL + TypeScript

See Awesome Template Literal Types

TTL + babel macros

See Awesome babel macros

More

See Awesome Tagged Templates