Add Prettier plugins to format SQL in JS / TS

[karlhorky]

Our Prettier configuration has formatted almost all of the files that we use in our courses:

• ✅ JavaScript and TypeScript w. JSX
• ✅ CSS
• ✅ CSS in template literals
• ✅ GraphQL
• ✅ GraphQL in template literals
• ❌ SQL in template literals

Formatting SQL in template literals has not been easy to achieve, I've been waiting years for this.

Challenges:

1. Although solutions like eslint-plugin-sql with eslint-plugin-unicorn exist in the ESLint ecosystem (lint problems on non-formatted strings, with auto-fix) we don't really want to require students to enable auto-fix in ESLint, because it's slow
2. Prettier plugins like prettier-plugin-sql, @potygen/prettier-plugin-pgsql, prettier-plugin-pg (not ready) do exist, but they do not format SQL code inside JavaScript/TypeScript tagged template literals
3. Support for sql tagged template literals in Prettier core has been proposed a number of times and rejected or stagnated:
   • Support library-specific plugin prettier/prettier#4424
   • Disable embedded language formatting by default and make it configurable prettier/prettier#5588
   • Add sql template literals support via plugins prettier/prettier#12139

Recently @Sec-ant announced a new amazing prettier-plugin-embed plugin in this comment, which works as follows for configuring with prettier-plugin-sql:

• Config + Code Examples in Readme Sec-ant/prettier-plugin-embed#20

This PR adds support for formatting SQL in template literals using these new packages.

---

Upgrade eemo:

$ pnpm prettier --write .

Commit: upleveled/next-js-example-fall-2023-atvie@53a0971

Kapture.2023-10-30.at.17.45.09.mp4