What are people using to auto format the template strings?

[zoaha]

I've been doing it by hand, but just wanted to know if there was an automated solution.

https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html
seems to change syntax highlighting (which doesn't help me much personally)
but is sadly an archived project

anyone using anything else?

[unusdon]

For the auto-formatting side, the current maintained combo is prettier-plugin-embed + prettier-plugin-sql. The -embed plugin handles the tagged-template detection, the -sql plugin formats the embedded string.

.prettierrc:

{
  "plugins": [
    "prettier-plugin-embed",
    "prettier-plugin-sql"
  ],
  "embeddedSqlTags": ["sql"],
  "language": "postgresql",
  "keywordCase": "upper"
}

Before / after on a postgres.js query:

// before
const rows = await sql`select u.id,u.email,count(o.id) as orders from users u left join orders o on o.user_id=u.id where u.created_at>${cutoff} group by u.id order by orders desc limit ${limit}`;

// after
const rows = await sql`
  SELECT u.id, u.email, count(o.id) AS orders
  FROM users u
  LEFT JOIN orders o ON o.user_id = u.id
  WHERE u.created_at > ${cutoff}
  GROUP BY u.id
  ORDER BY orders DESC
  LIMIT ${limit}
`;

Placeholders (${cutoff}, ${limit}) are preserved as-is — the SQL formatter treats them as opaque expressions, which is what you want.

Editor integration

For VS Code syntax highlighting on the string itself, install frigus02.vscode-sql-tagged-template-literals. It's the maintained successor to the older es6-string-html (which is archived and no longer highlights new PostgreSQL syntax).

Skip @potygen/prettier-plugin-pgsql — it monkey-patches Prettier itself and breaks on Prettier 3.x. The -embed + -sql combo above is the cleanly-plugged approach and is what most teams using postgres.js in production have settled on.

Pre-commit lint (optional)

If you also want lint, not just formatting:

// package.json
"lint-staged": {
  "*.{ts,tsx}": [
    "prettier --write",
    "sqlfluff lint --dialect postgres --templater raw"
  ]
}

Scope sqlfluff to the embedded blocks by piping through prettier-plugin-embed's extractor or by using a small regex-based pre-processor — but honestly, Prettier alone is enough for 95 % of cases.