@backtickjs/prettier-plugin weekly downloads statistics

@backtickjs/prettier-plugin

A Prettier plugin that formats the code inside Backtick client scripts. Without it, Prettier leaves a ` cs… ` script as an opaque template string; with it, the script is formatted as TypeScript or JavaScript, like the rest of the file, with its splices kept in place.

Install

Prettier 3 and TypeScript ^6.0.3 are peer dependencies: the plugin uses your project's TypeScript to find scripts. Install it in the package that runs Prettier, which resolves plugins from there.

Setup

Name the plugin in .prettierrc:

Projects made with create-backtick-app already include this file. In VS Code, the Prettier extension reads the same config, so format-on-save formats scripts too.

The plugin applies to .ts, .tsx, .js and .jsx files. Other embedded templates, such as CSS or GraphQL, are formatted by Prettier as usual.

Example

Before:

After:

A splice of a bare identifier in code prints in its short form (${name} becomes $name); any other splice keeps its braces and is formatted as host code. A script that is a single JSX element gets parentheses only when it breaks across lines, and a trailing semicolon after a script's final expression is dropped. Formatting is idempotent.

Related

• @backtickjs/core: the cs tag • Backtick for VS Code: highlighting and type-checking inside scripts • How it works

License

MIT

Description from the npm listing.