SQL Format and Highlight

VS Code extension that adds SQL syntax highlighting and SQL formatting inside JavaScript/TypeScript tagged template literals marked with --sql.

Stop staring at unformatted, single-line SQL hiding inside backticks. Mark your queries with --sql and get the same affordances you'd have in a .sql file: keywords highlighted, indentation enforced, formatting one keystroke away — without losing template literal interpolation.

// Before                                                  // After (Shift+Alt+F)
const q = `--sql                                           const q = `--sql
  select id, name from users where active=1 order by id      SELECT
`;                                                                id,
                                                                  name
                                                              FROM
                                                                  users
                                                              WHERE
                                                                  active = 1
                                                              ORDER BY
                                                                  id
                                                           `;

Why

• Real formatter, not a one-off command. Registers as a native VS Code DocumentFormattingEditProvider, so Shift+Alt+F, Format Selection, and editor.defaultFormatter all just work.
• Interpolations survive formatting. ${expr} (including nested braces and quoted strings) is preserved verbatim. No more silent bail-outs on parameterized queries.
• Plays well with Prettier. Set this extension as the default formatter for your .ts/.js files and use Prettier elsewhere — or keep Prettier as default and opt into the dedicated save-formatter setting.
• Multi-database aware. Set a default dialect once, and override per-block with --sql@<alias> when a single codebase talks to several databases.
• Errors surface. Parse failures are logged to the SQL Format output channel instead of being swallowed.

Install

From the marketplace:

ext install andrelopes-code.sql-format-and-highlight

Or search "SQL Format and Highlight" in the Extensions view.

Quick start

1. Set your dialect once. The generic sql default rejects vendor-specific syntax (bracketed identifiers in T-SQL, RETURNING in Postgres, etc.). Pick the dialect that matches your primary database:

   "sqlFormatAndHighlight.dialect": "transactsql"

2. Mark a template literal as SQL by starting its content with --sql:

   const query = `--sql
     select id, name from users where active = 1
   `;

3. Format with Shift+Alt+F, Format Selection on the highlighted range, or run SQL Format: Format SQL strings in current file from the Command Palette.

4. (Optional) Enable format-on-save:

   "[typescript]": {
     "editor.defaultFormatter": "andrelopes-code.sql-format-and-highlight",
     "editor.formatOnSave": true
   }

The --sql marker may carry trailing text that other tooling can read; this extension preserves everything after --sql (and --sql@<alias>) intact on the marker line.

Multi-database codebases — --sql@<alias>

When a single codebase queries more than one database (e.g., a SQL Server app that also reads from a PostgreSQL replica), the global dialect setting can't fit both. Tag each block with a @<alias> and map aliases to dialects:

"sqlFormatAndHighlight.dialect": "transactsql",
"sqlFormatAndHighlight.databases": {
  "rm": "transactsql",
  "pesagem": "postgresql"
}

const pedidos = `--sql@rm
  SELECT [Id], [Status] FROM [dbo].[Pedidos]
`;

const balanca = `--sql@pesagem
  SELECT id, peso FROM balanca WHERE coletado_em > NOW() - INTERVAL '1 day'
`;

Each block is formatted using the dialect mapped to its alias. If the alias is not mapped (or is missing), the block falls back to the global dialect silently — no warning, no failure. Aliases follow the pattern [a-zA-Z_][a-zA-Z0-9_-]* (letters, digits, _, -, must start with a letter or _).

Configuration

Setting	Default	Description
sqlFormatAndHighlight.formatOnSave	false	Fallback save-formatting hook. Prefer the native editor.formatOnSave + editor.defaultFormatter combo.
sqlFormatAndHighlight.dialect	"sql"	One of sql, postgresql, mysql, sqlite, bigquery, mariadb, transactsql, plsql. Set this — the generic sql default fails on common vendor syntax (bracketed identifiers, @vars, RETURNING, etc.).
sqlFormatAndHighlight.databases	{}	Map --sql@<alias> markers to per-block dialects. See Multi-database codebases.
sqlFormatAndHighlight.keywordCase	"upper"	upper, lower, or preserve.
sqlFormatAndHighlight.functionCase	"preserve"	Casing for function names (COUNT, MAX, etc.).
sqlFormatAndHighlight.identifierCase	"preserve"	Casing for table/column/alias identifiers.
sqlFormatAndHighlight.dataTypeCase	"preserve"	Casing for data types (INT, VARCHAR, etc.) in CREATE/ALTER statements.
sqlFormatAndHighlight.indentStyle	"standard"	standard, tabularLeft, or tabularRight.
sqlFormatAndHighlight.tabWidth	4	Spaces per indentation level.
sqlFormatAndHighlight.useTabs	false	Indent with tab characters instead of spaces.
sqlFormatAndHighlight.expressionWidth	50	Maximum line width before parenthesized expressions wrap across multiple lines.
sqlFormatAndHighlight.linesBetweenQueries	1	Blank lines between consecutive SQL statements separated by ;.
sqlFormatAndHighlight.logicalOperatorNewline	"before"	Place AND/OR before or after line breaks.
sqlFormatAndHighlight.newlineBeforeSemicolon	false	Place the closing ; of each query on its own line.
sqlFormatAndHighlight.denseOperators	false	true removes spaces around operators (id=1 vs id = 1).
sqlFormatAndHighlight.paramTypes	[":"]	Named parameter prefixes to recognize. Allowed values: ":", "@", "$".

All settings are picked up live — no reload required.

Recipes

Use Prettier for TypeScript but still format SQL

"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
},
"sqlFormatAndHighlight.formatOnSave": true

Prettier handles the TS shape; this extension formats the SQL content inside backticks via the onWillSaveTextDocument hook.

Use this extension as the default for TS

"[typescript]": {
  "editor.defaultFormatter": "andrelopes-code.sql-format-and-highlight",
  "editor.formatOnSave": true
}

Cleanest setup, no conflicts. The formatter only edits text inside --sql template literals — everything else is left alone.

Named parameter prefixes other than :

"sqlFormatAndHighlight.paramTypes": [":", "@"]

Now both :userId and @userId parse cleanly.

Force uppercase data types in DDL

"sqlFormatAndHighlight.dataTypeCase": "upper"

int becomes INT, varchar(255) becomes VARCHAR(255) in CREATE TABLE statements, regardless of keywordCase.

Interpolations are preserved verbatim

const query = `--sql
  select * from ${schema.tableName} where id = ${id} and tags && ${ tags.map(t => `'${t}'`).join(',') }
`;

Even with backticks/quotes/braces nested inside ${...}, the expression is restored exactly after formatting.

Troubleshooting

• A query is not being formatted. Open the SQL Format output channel (View → Output → SQL Format) to see the parser error. Most often the SQL is invalid for the configured dialect. Try a more specific dialect (postgresql, transactsql, etc.) — or tag the block with --sql@<alias> and map the alias to the right dialect in sqlFormatAndHighlight.databases.
• @param is not recognized. Add "@" to sqlFormatAndHighlight.paramTypes.
• Prettier and this extension fight on save. Use a single default formatter per language. See Recipes.
• --sql@mydb is not being detected as an alias. Aliases must start with a letter or underscore and contain only letters, digits, _, and -. --sql@123db (digit start) is ignored.

Development

npm install
npm run compile         # tsc
npm run lint            # eslint src
npm run test:unit       # mocha unit tests (detector + formatter)
npm test                # full VS Code integration tests
npm run vscode:package  # build .vsix

Press F5 inside VS Code to launch the Extension Development Host for manual testing.

License

MIT © André Lopes