language-literals

Language Literals

Dedent named exports for tagged template literals. This is a sugar helper utility that can be used with the vscode Language Literals extension to provide syntax highlighting and dedent capabilities of template literal strings.

Install

pnpm add language-literals

Because pnpm is dope and does dope shit.

Usage

Use named import expressions, the syntax highlighting grammars will not work on * as import assignments.

import {
  html,
  liquid,
  xml,
  xhtml,
  json,
  jsonc,
  yaml,
  css,
  scss,
  sass,
  js,
  ts,
  jsx,
  tsx,
  md,
} from "language-literals";

html``;
liquid``;
xml``;
xhtml``;
json``;
jsonc``;
yaml``;
css``;
scss``;
sass``;
js``;
ts``;
jsx``;
tsx``;
md``;

Example

Let's take the following expression, wherein the html literal is indented at a depth of 3 from the right side:

import { html } from 'language-literals';

function example () {

  const object = {
    property: [

      /* WITHOUT LANGUAGE LITERAL */
      `

      <div>
        <h1>Hello World</h1>
      </div>

      `,

      /* WITH LANGUAGE LITERAL */
      html`

      <div>
        <h1>Hello World</h1>
      </div>

      `

    ]
  }
}

The output result would preserve the additional whitespace starting from the left side. Using the above sample:

Without Language Literal

      <div>
        <h1>Hello World</h1>
      </div>

Using Language Literal

<div>
  <h1>Hello World</h1>
</div>

Notice how the code output when using the html literal trims the leading and ending spaces. Very cool.

License

MIT