sec-ant / prettier-plugin-embed Goto Github PK

I would say a playground is worth a thousand words. @nene has open sourced a pretty one: https://github.com/nene/prettier-sql-playground. So the remaining problem would be:

• Figure out how to let users apply options.
• Change node: modules to dynamic imports.

I've been using Prettier's native embedded formatting for CSS template strings for a while; now I am installing prettier-plugin-embed in order to get embedded formatting for SQL, etc. However, enabling this plugin is changing the formatting of my previously Prettier'd CSS template strings.

Under the CSS section, the README says:

This can override the native formatting behavior for embedded CSS language. If you want to keep the native behavior, set embeddedCssComments or embeddedCssTags to [] or other values.

I've tried setting both of these options to [], but still the difference in behavior persists. For example:

   const menuDropdownStyle = css`
     display: flex;
-    ${width ? `min-width: ${width};` : ''}
-    align-items: center;
+    ${width ? `min-width: ${width};` : ''} align-items: center;

On native Prettier, align-items: center; remained on a separate line after the interpolation, but after enabling this plugin, it is moved onto the same line as the interpolation, even with embeddedCssTags set to []. The only way I can get the same behavior as before is by not using the prettier-plugin-embed plugin.

For this particular example, moving the semicolon from inside the interpolation to after it results in a format output like I want, but diffs like this occur many times throughout my codebase, and I don't want to change all these cases when native Prettier was perfectly fine for them.

Is there any way I can get the native embedded CSS behavior while still having prettier-plugin-embed enabled so that I can use it for other embedded languages?

Thanks in advance!

.prettierrc.yml

printWidth: 120
singleQuote: true
trailingComma: es5
plugins:
  - prettier-plugin-sql-cst
  - prettier-plugin-embed
embeddedNoopComments:
  - nofmt
embeddedSqlTags:
  - psql
  - dsql
embeddedCssComments: []
embeddedCssTags: []
embeddedSqlPlugin: prettier-plugin-sql-cst
embeddedOverrides: .prettier-embedded.json

.prettier-embedded.json

[
  {
    "tags": ["psql"],
    "options": { "parser": "postgresql", "sqlParamTypes": ["$nr"] }
  },
  {
    "tags": ["dsql"],
    "options": { "parser": "bigquery", "sqlParamTypes": [":name"] }
  }
]

First of all, thank you for creating this plugin! It's exactly what I've been looking for in a while.

I managed to make it work pretty easily, but I'd like to customize the options passed to prettier-plugin-sql. In the readme you say:

And options supported by prettier-plugin-sql can therefore be used to further control the formatting behavior.

But I am not sure where to put those options. My Prettier config looks like this now:

export default {
  semi: false,
  singleQuote: true,
  trailingComma: 'none',
  plugins: ['prettier-plugin-embed', 'prettier-plugin-sql'],
  overrides: [
    {
      files: '*.sql',
      options: {
        formatter: 'sql-formatter',
        keywordCase: 'upper',
        language: 'mysql'
      }
    }
  ]
}

I would like to use the same options for SQL template literals as I'm using for *.sql files so MySQL as a language and uppercase keywords. How can I set this up?

I tried to use it and get

See prettier/prettier#15265 & prettier/prettier#15266

I am guessing that you will probably find this to be out of scope of your plugin, but maybe not, so I figure I'd ask:

If you are writing SQL functions, it's pretty common to have SQL embedded inside SQL; for example (straight out of Postgres documentation):

CREATE FUNCTION dup(int) RETURNS dup_result
    AS $$ SELECT $1, CAST($1 AS text) || ' is text' $$
    LANGUAGE SQL;

In this case, $$ is a string quoting delimiter, and SELECT $1, CAST($1 AS text) || ' is text' is a quoted string.

The issue is that most SQL formatters (and in particular, the one used by prettier-plugin-embed do not recurse into these quoted string function bodies, so the function declaration is prettified but the function implementation remains ugly. Here's what I get if I run the above through prettier with prettier-plugin-sql (regardless of whether prettier-plugin-embed is on):

create function dup (int) returns dup_result as $$ SELECT $1, CAST($1 AS text) || ' is text' $$ language sql;

What I wish I got would be more like

create function dup (int) returns dup_result as $$ 
    select
        $1,
        cast($1 as text)||' is text'
$$ language sql;

(That's what I get if I manually run the function body through prettier-plugin-sql and then paste it inside $$ delimiters.

Now, on the one hand, I realize that the description of prettier-plugin-embed specifically says that its only intent is to handle tagged strings in TS/JS, so if you just want to turn this idea away, I get that. But if you're looking for another cool thing to do in the realm of embedded string prettification, well, then I think this one is a good candidate 🙂

https://github.com/changesets/changesets

Hi @Sec-ant, hope you're well 👋

Installing prettier-plugin-embed and prettier-plugin-sql and configuring for embedded SQL formatting as in this example leads to a crash of the plugin, mentioning that a required dependency @xml-tools/parser is not installed:

["ERROR" - 5:34:36 PM] Cannot find package '@xml-tools/parser' imported from /Users/k/p/project/node_modules/prettier-plugin-embed/dist/index.js
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@xml-tools/parser' imported from /Users/k/p/project/node_modules/prettier-plugin-embed/dist/index.js
    at new NodeError (node:internal/errors:399:5)
    at packageResolve (node:internal/modules/esm/resolve:895:9)
    at moduleResolve (node:internal/modules/esm/resolve:944:20)
    at defaultResolve (node:internal/modules/esm/resolve:1159:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36)

Adding @xml-tools/parser to my dependencies fixed the problem, but I'm guessing many users would not find that in the output panel. (also often users would not see the peer dependencies error)

@xml-tools/parser is a peer dependency, as are a few other packages:

However, I guess it would be better for this to not crash by default for users, by either:

1. Moving @xml-tools/parser to be a regular dependency OR
2. Add installation instructions for users to instruct users to install @xml-tools/parser manually

Does prettier-plugin-embed work with generic type annotations on literal tags?

The following snippet doesn't seem to work if I have the <Revenue> annotation after the "sql" tag. If I remove the <Revenue> annotation or use /* sql */ inline it does work.

Doesn't seem to work:

    const data = await sql<Revenue>`
      SELECT
        *
      FROM
        revenue
    `;

This does work.

    const data = await sql<Revenue>/* sql */ `
      SELECT
        *
      FROM
        revenue
    `;

Thanks for the great tool!

Hi @Sec-ant 👋 Hope you're good!

I encountered a problem with prettier-plugin-sql (using sql-formatter) indentation with interpolation in a condition of a WHERE condition line:

Expected:

sql`
  SELECT
    *
  FROM
    longer_table_name_with_many_characters
  WHERE
    longer_table_name_with_many_characters.id IN ${sql(
      longerTableNameWithManyCharactersIds,
    )}
`

Actual:

(the 2 lines after sql( are missing 1 indent level)

sql`
  SELECT
    *
  FROM
    longer_table_name_with_many_characters
  WHERE
    longer_table_name_with_many_characters.id IN ${sql(
    longerTableNameWithManyCharactersIds,
  )}
`

This problem also extends to any other indented areas, eg. this FROM clause:

sql`
  SELECT
    *
  FROM
    ${sql(
    evenLongerTableNameWithManyCharactersKeepsGoingEvenLongerAndLongerAndLonger,
  )}
`

The sql-formatter demo seems to indent correctly, with a parenthesized expression spanning multiple lines (no ability to interpolate here, since it's only SQL, no JS template strings):

SELECT
  *
FROM
  longer_table_name_with_many_characters
WHERE
  longer_table_name_with_many_characters.id IN (
    111,
    222,
    333
  );

Hi @Sec-ant, hope things are going well 👋

When patching prettier-plugin-sql to add the sql-formatter dialect option, there's an "unstable formatting" bug here (different formatting on subsequent saves) with prettier-plugin-embed (not present with prettier-plugin-sql alone in .sql files) when the dollar-quoted string is multiple lines, eg. the code that @innermatrix posted in #44:

Original code:

create function dup (int) returns dup_result as $$ 
  select
      $1,
      cast($1 as text)||' is text'
$$ language sql;

First format:

create function dup (int) returns dup_result as $$ 
      select
          $1,
          cast($1 as text)||' is text'
    $$ language sql;

Second format:

create function dup (int) returns dup_result as $$ 
            select
                $1,
                cast($1 as text)||' is text'
        $$ language sql;

Config:

import { postgresql } from 'sql-formatter';

/** @type {import('prettier').Config} */
const prettierConfig = {
  plugins: [
    'prettier-plugin-embed',
    'prettier-plugin-sql',
  ],
  singleQuote: true,
  trailingComma: 'all',
};

/** @type {import('prettier-plugin-embed').PrettierPluginEmbedOptions} */
const prettierPluginEmbedConfig = {
  embeddedSqlIdentifiers: ['sql'],
};

/** @type {import('prettier-plugin-sql').SqlBaseOptions} */
const prettierPluginSqlConfig = {
  // https://github.com/un-ts/prettier/issues/322#issuecomment-1837193944
  dialect: JSON.stringify(postgresql),

  expressionWidth: 8,
};

const config = {
  ...prettierConfig,
  ...prettierPluginEmbedConfig,
  ...prettierPluginSqlConfig,
};

export default config;

identifier is not intuitive and is easily confused with the identifier in JavaScript.

It should be replaced by tag and comment. For backward compatibility before its full removal, values set in identifier should be applied to both tag and comment.

There seems to be a problem with 0.4.11 and 0.4.12. My typescript and tsx files are not formatting when I include prettier-plugin-embed as a plugin.

If I revert to 0.4.10 my typescript files correctly format. If I move to 0.4.11 or 0.4.12 they no longer format. I don't see any errors in the prettier logs.

I simplified my prettier config to:
const config = {
plugins: ["prettier-plugin-tailwindcss", "prettier-plugin-embed"],
endOfLine: 'lf',
singleQuote: true,
tabWidth: 2,
printWidth: 80,
useTabs: false,
}

If I remove "prettier-plugin-embed" as a plugin in the config formatting works again.

After updating prettier-plugin-embed from v0.3.2 to v0.4.1, embedded SQL formatting in .mts files (via prettier-plugin-sql v0.18.0) no longer happens, and in the VS Code output for the Prettier extension, there are no errors logged.

There is no changelog or GitHub release description to understand the changes in the v0.4 releases; what are the breaking changes? How do you migrate a project to the newer version?

Hi,

Unfortunately, the project I am trying to add this to is not an ES module. When prettier is loading the plugin, it is failing with a message similar to:

Invalid configuration file `foo.sql`: require() of ES Module /Users/foobar/dev/helloworld/node_modules/prettier-plugin-embed/dist/index.js from /Users/foobar/dev/helloworld/prettier.config.js not supported.

Is there any way to add cjs output for this library?

It seems we have to expand a details section to check what languages are supported and we have to jump into the source codes to see what related identifiers are supported.

In our codebase we use the following syntax:

const lang = "JavaScript";
const embedded = Syntax.js`const foo =  "This is embedded ${lang}!"; console.log(foo)`;

Unfortunately this doesn't appear to be supported by the plugin. I tried configuring it like this:

{
  "plugins": ["prettier-plugin-embed"],
  "embeddedEsIdentifiers": ["Syntax.js"]
}

but Prettier doesn't touch the embedded JavaScript.

It does work if I use

const lang = "JavaScript";
const embedded = /* js */`const foo =  "This is embedded ${lang}!"; console.log(foo)`;

or

const lang = "JavaScript";
const embedded = js`const foo =  "This is embedded ${lang}!"; console.log(foo)`;

I'll consider updating our codebase to use the comment form, but obviously I'd prefer it if our current syntax would work :)

The prettier-plugin-embed-embed does not load the prettier-plugin-sql on Windows machine in VS Code and shows this error on the VS Code DevTools when saving a file.

Error: Cannot format embedded language identified by "sql", because plugin "prettier-plugin-sql" is not loaded.

No error shows up in the output panel of VS Code, as it shows that the formatting was completed, this was also mentioned here

["INFO" - 12:28:29 PM] Formatting completed in 810ms.

This the content of the Prettier config file

/** @type {import('prettier').Config} */
const prettierConfig = {
  plugins: ['prettier-plugin-embed', 'prettier-plugin-sql'],
  singleQuote: true,
  trailingComma: 'all',
};

/** @type {import('prettier-plugin-embed').PrettierPluginEmbedOptions} */
const prettierPluginEmbedConfig = {
  embeddedSqlComments: ['sql'],
  embeddedSqlTags: ['sql'],
};

/** @type {import('prettier-plugin-sql').SqlBaseOptions} */
const prettierPluginSqlConfig = {
  language: 'postgresql',
  keywordCase: 'upper',
  identifierCase: 'lower',
  dataTypeCase: 'lower',
  functionCase: 'lower',
  expressionWidth: 30,
};

const config = {
  ...prettierConfig,
  ...prettierPluginEmbedConfig,
  ...prettierPluginSqlConfig,
};

export default config;

The SQL code that should be formatted

export async function up(sql: Sql) {
await sql`
CREATE TABLE workshops (
id integer PRIMARY key generated always AS identity,
title varchar(70) NOT NULL,
workshop_date varchar(40) NOT NULL,
timeframe varchar(40) NOT NULL,
location varchar(40),
category varchar(40),
image varchar(50) NOT NULL,
price integer NOT NULL,
description varchar NOT NULL
    )
  `;
}

I am using the following versions for the plugins

"prettier": "^3.2.5",
"prettier-plugin-embed": "^0.4.13",
"prettier-plugin-sql": "^0.18.0",

Running this Prettier command from the command line was able to format the file

pnpm prettier migrations/00000-createTableWorkshops.ts --write 

Hi @Sec-ant , hope you're well! 👋

(very similar to #35, maybe the same issue)

sql-formatter crashes with prettier-plugin-embed, embedded SQL in JavaScript/TypeScript template string and prettier-plugin-sql, when the $$ delimiter is used:

a.sql

CREATE
           OR REPLACE FUNCTION INCREMENT (
  i INTEGER
) RETURNS INTEGER AS $$
        BEGIN
                RETURN i + 1;
            END;
$$ LANGUAGE plpgsql

a.js

function up(sql) {
  await sql`CREATE
     OR REPLACE FUNCTION INCREMENT (
  i INTEGER
) RETURNS INTEGER AS $$
        BEGIN
                RETURN i + 1;
            END;
$$ LANGUAGE plpgsql`;
}

$ pnpm prettier a.sql --write
a.sql 58ms

$ pnpm prettier a.js --write
a.js
Error: Parse error: Unexpected "$$
       " at line 4 column 22
    at TokenizerEngine.createParseError (file:///Users/k/p/project/node_modules/sql-formatter/lib/lexer/TokenizerEngine.js:53:12)
    at TokenizerEngine.tokenize (file:///Users/k/p/project/node_modules/sql-formatter/lib/lexer/TokenizerEngine.js:35:22)
    at Tokenizer.tokenize (file:///Users/k/p/project/node_modules/sql-formatter/lib/lexer/Tokenizer.js:16:47)
    at LexerAdapter.tokenize (file:///Users/k/p/project/node_modules/sql-formatter/lib/parser/createParser.js:16:76)
    at LexerAdapter.reset (file:///Users/k/p/project/node_modules/sql-formatter/lib/parser/LexerAdapter.js:17:24)
    at Parser.feed (/Users/k/p/project/node_modules/nearley/lib/nearley.js:281:15)
    at Object.parse (file:///Users/k/p/project/node_modules/sql-formatter/lib/parser/createParser.js:26:18)
    at Formatter.parse (file:///Users/k/p/project/node_modules/sql-formatter/lib/formatter/Formatter.js:32:49)
    at Formatter.format (file:///Users/k/p/project/node_modules/sql-formatter/lib/formatter/Formatter.js:25:22)
    at formatDialect (file:///Users/k/p/project/node_modules/sql-formatter/lib/sqlFormatter.js:79:57)
a.js 40ms (unchanged)

At first, from the error message, I thought it was the lack of support for $$ delimiters:

• sql-formatter-org/sql-formatter#184

...but the $$ delimiter does not crash with prettier-plugin-sql used directly with .sql files.

I logged out the query variables in both cases from inside prettier-plugin-sql, but the query seems to be visually the same...

a.sql

CREATE
OR REPLACE FUNCTION INCREMENT (
  i INTEGER
) RETURNS INTEGER AS $$
        BEGIN
                RETURN i + 1;
        END;
$$ LANGUAGE plpgsql

a.js

CREATE
OR REPLACE FUNCTION INCREMENT (
  i INTEGER
) RETURNS INTEGER AS $$
        BEGIN
                RETURN i + 1;
            END;
$$ LANGUAGE plpgsql

My versions and config, maybe I've configured something incorrectly? 🤔

package.json

    "prettier": "3.1.0",
    "prettier-plugin-embed": "0.2.5",
    "prettier-plugin-sql": "0.16.0",

prettier.config.mjs

/** @type {import('prettier').Config} */
const prettierConfig = {
  plugins: [
    'prettier-plugin-tailwindcss',
    'prettier-plugin-embed',
    'prettier-plugin-sql',
  ],
  // Avoid excessive diffs on changes to MDX files
  proseWrap: 'never',
  singleQuote: true,
  trailingComma: 'all',
};

/** @type {import('prettier-plugin-embed').PrettierPluginEmbedOptions} */
const prettierPluginEmbedConfig = {
  embeddedSqlIdentifiers: ['sql'],
};

/** @type {import('prettier-plugin-sql').SqlBaseOptions} */
const prettierPluginSqlConfig = {
  language: 'postgresql',
  keywordCase: 'upper',
  // - Wrap all parenthesized expressions to new lines (eg. `INSERT` columns)
  // - Do not wrap foreign keys (eg. `REFERENCES table_name (id)`)
  // - Do not wrap column type expressions (eg. `VARCHAR(255)`)
  expressionWidth: 8,
};

const config = {
  ...prettierConfig,
  ...prettierPluginEmbedConfig,
  ...prettierPluginSqlConfig,
};

export default config;

cc @JounQin

Hi @Sec-ant , hope you're well! 👋

(very similar to #34, maybe the same issue)

sql-formatter crashes with prettier-plugin-embed, embedded SQL in JavaScript/TypeScript template string and prettier-plugin-sql, when a cast is used:

a.sql

SELECT '[]'::jsonb;

a.js

function up(sql) {
  await sql`SELECT '[]'::jsonb;`;
}

$ pnpm prettier a.sql --write
a.sql 58ms

$ pnpm prettier a.js --write
a.js
Error: Parse error: Unexpected "::jsonb;" at line 1 column 12
    at TokenizerEngine.createParseError (file:///Users/k/p/project/node_modules/sql-formatter/lib/lexer/TokenizerEngine.js:53:12)
    at TokenizerEngine.tokenize (file:///Users/k/p/project/node_modules/sql-formatter/lib/lexer/TokenizerEngine.js:35:22)
    at Tokenizer.tokenize (file:///Users/k/p/project/node_modules/sql-formatter/lib/lexer/Tokenizer.js:16:47)
    at LexerAdapter.tokenize (file:///Users/k/p/project/node_modules/sql-formatter/lib/parser/createParser.js:16:76)
    at LexerAdapter.reset (file:///Users/k/p/project/node_modules/sql-formatter/lib/parser/LexerAdapter.js:17:24)
    at Parser.feed (/Users/k/p/project/node_modules/nearley/lib/nearley.js:281:15)
    at Object.parse (file:///Users/k/p/project/node_modules/sql-formatter/lib/parser/createParser.js:26:18)
    at Formatter.parse (file:///Users/k/p/project/node_modules/sql-formatter/lib/formatter/Formatter.js:32:49)
    at Formatter.format (file:///Users/k/p/project/node_modules/sql-formatter/lib/formatter/Formatter.js:25:22)
    at formatDialect (file:///Users/k/p/project/node_modules/sql-formatter/lib/sqlFormatter.js:78:57)
a.js 40ms (unchanged)

Other casts that also fail:

SELECT '[]'::jsonb->0;
SELECT ARRAY['5', '6']::int[];

Tildes

This also crashes similarly on the ~ (tilde) operator:

SELECT 'ABC' ~ '^[A-Z]{3}$';

Error:

Error: Parse error: Unexpected "~ '^ABC$';" at line 1 column 14

Square brackets for PostgreSQL exact length arrays

Another failing pattern:

CREATE TABLE x(
        y integer[5]
  )

Error: Parse error: Unexpected "[5]
  )" at line 2 column 18

$$ delimiter

• #34

At first, from the error messages, I thought it was the lack of support for casts or tilde operators or square brackets in sql-formatter, but they are all supported with prettier-plugin-sql when used directly with .sql files.

My versions and config, maybe I've configured something incorrectly? 🤔

package.json

    "prettier": "3.1.0",
    "prettier-plugin-embed": "0.2.5",
    "prettier-plugin-sql": "0.16.0",

prettier.config.mjs

/** @type {import('prettier').Config} */
const prettierConfig = {
  plugins: [
    'prettier-plugin-tailwindcss',
    'prettier-plugin-embed',
    'prettier-plugin-sql',
  ],
  // Avoid excessive diffs on changes to MDX files
  proseWrap: 'never',
  singleQuote: true,
  trailingComma: 'all',
};

/** @type {import('prettier-plugin-embed').PrettierPluginEmbedOptions} */
const prettierPluginEmbedConfig = {
  embeddedSqlIdentifiers: ['sql'],
};

/** @type {import('prettier-plugin-sql').SqlBaseOptions} */
const prettierPluginSqlConfig = {
  language: 'postgresql',
  keywordCase: 'upper',
  // - Wrap all parenthesized expressions to new lines (eg. `INSERT` columns)
  // - Do not wrap foreign keys (eg. `REFERENCES table_name (id)`)
  // - Do not wrap column type expressions (eg. `VARCHAR(255)`)
  expressionWidth: 8,
};

const config = {
  ...prettierConfig,
  ...prettierPluginEmbedConfig,
  ...prettierPluginSqlConfig,
};

export default config;

cc @JounQin

Firstly thanks for the work on this project; it's my first day trying it and this could be a game changer! We have a lot of SQL template strings in TypeScript modules and manually formatting it all is a big hassle.

With this TypeScript config compilerOptions:

{
  "allowJs": true,
  "forceConsistentCasingInFileNames": true,
  "verbatimModuleSyntax": true,
  "maxNodeModuleJsDepth": 10,
  "module": "nodenext",
  "noEmit": true,
  "strict": true,
  "target": "es2022"
}

And with this prettier.config.mjs:

// @ts-check

/**
 * Prettier config for the plugin `prettier-plugin-embed`.
 * @type {import("prettier-plugin-embed").PrettierPluginEmbedOptions}
 */
const prettierConfigPluginEmbed = {
  embeddedSqlIdentifiers: ["sql", "tricentisVisualTestingSql"],
};

/**
 * Prettier config for the plugin `prettier-plugin-sql`.
 * @type {import("prettier-plugin-sql").SqlBaseOptions}
 */
const prettierConfigPluginSql = {
  language: "postgresql",
};

/**
 * Prettier config.
 * @type {import("prettier").Config}
 */
const prettierConfig = {
  plugins: ["prettier-plugin-embed", "prettier-plugin-sql"],
  ...prettierConfigPluginEmbed,
  ...prettierConfigPluginSql,
};

export default prettierConfig;

And with the dev dependencies prettier-plugin-embed and prettier-plugin-sql installed, running a TypeScript type check on the project results in these 3 TypeScript errors:

node_modules/prettier-plugin-embed/dist/embedded/sql/options.d.ts:34:31 - error TS2312: An interface can only extend an object type or intersection of object types with statically known members.

34     interface Options extends PrettierPluginDepsOptions {
                                 ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/prettier-plugin-embed/dist/embedded/xml/parser.d.ts:1:30 - error TS2307: Cannot find module 'chevrotain' or its corresponding type declarations.

1 import type { CstNode } from "chevrotain";
                               ~~~~~~~~~~~~

node_modules/prettier-plugin-sql/shim.d.ts:4:3 - error TS1203: Export assignment cannot be used when targeting ECMAScript modules. Consider using 'export default' or another module format instead.

4   export = JSOX
    ~~~~~~~~~~~~~


Found 3 errors in 3 files.

Errors  Files
     1  node_modules/prettier-plugin-embed/dist/embedded/sql/options.d.ts:34
     1  node_modules/prettier-plugin-embed/dist/embedded/xml/parser.d.ts:1
     1  node_modules/prettier-plugin-sql/shim.d.ts:4

The first seems to be a TypeScript error about how interfaces and object types are composed, which is surprising because surely if they are incorrect the prettier-plugin-embed compilation tooling would have reported it? Maybe the types are manually authored but not type checked by TypeScript? I haven't looked into it.

The second one looks like it might be a tricky error relating to optional peer dependencies or something, since I'm not using xml formatting yet in this project? Ideally runtime code as well as types would not get pulled into your project if they are not being used by your project.

The one relating to the shim definitions looks like a legit bug to be fixed in the way the prettier-plugin-sql types are generated, regarding module format.

Hi @Sec-ant , thanks for the great Prettier plugin! (and thanks @JounQin for prettier-plugin-sql, which also enables the formatting of SQL tagged template literals!)

Would be great to see a few complete config examples like the config code examples in comments in #16

Either:

A) full interactive examples (eg. CodeSandbox) or "recipes"
B) including configuration and code as in below

prettier.config.js

/** @type {import('prettier').Config} */
const prettierConfig = {
  plugins: ['prettier-plugin-embed', 'prettier-plugin-sql'],
};

/** @type {import('prettier-plugin-embed').PrettierPluginEmbedOptions} */
const prettierPluginEmbedConfig = {
  embeddedSqlIdentifiers: ['sql'],
}

/** @type {import('prettier-plugin-sql').SqlBaseOptions} */
const prettierPluginSqlConfig = {
  language: 'postgresql',
  keywordCase: 'upper',
}

const config = {
  ...prettierConfig,
  ...prettierPluginEmbedConfig,
  ...prettierPluginSqlConfig,
};

export default config;

index.ts (before)

const animals = await sql`
      SELECT
*                 
                       FROM
       animals
`;

index.ts (after)

const animals = await sql`
  SELECT
    *                 
  FROM
    animals
`;

Thanks for your work!

I could be missing something in the docs, but from what I understand, if I wanted xyzzy to mean postgres, I could set embeddedSqlIdentifiers to ['postgresql', 'xyzzy'], but I am not sure how to make sql mean postgresql because sql is already its own dialect.

I think that overriding sql to mean a specific dialect will be a very common use case so I hope this can be added as a feature. I think a simple implementation might be to allow something like `embeddedSqlIdentifiers = ['sql:postgresql', …].

We need to add tests for this plugin and all the supported languages.

Language specific formatting tests are not required because they are already tested in the corresponding plugin. But tests for this plugin should be added. Some of the things I can think of:

1. All the options that are introduced by this plugin only. Language-Specific Options (in each language) and Language-Agnostic Options (for all the languages).
2. Different kinds of expressions + quasis combinations in template literals for each language.
3. Ability to run in different runtimes.