feat: format JSON script tags (#424)

Also silences a (harmless) error log in the tests
closes #421
closes #419

Author: dummdidumm

CHANGELOG.md

@@ -1,5 +1,9 @@
 # prettier-plugin-svelte changelog
 
+## 3.2.0 (Unreleased)
+
+-   (feat) format JSON script tags
+
 ## 3.1.2
 
 -   (fix) handle `>` tags in attributes

src/embed.ts

@@ -11,6 +11,7 @@ import {
     getLeadingComment,
     isIgnoreDirective,
     isInsideQuotedAttribute,
+    isJSON,
     isLess,
     isNodeSupportedLanguage,
     isPugTemplate,
@@ -177,7 +178,7 @@ export function embed(path: FastPath, _options: Options) {
 
     const embedType = (
         tag: 'script' | 'style' | 'template',
-        parser: 'typescript' | 'babel-ts' | 'css' | 'scss' | 'less' | 'pug',
+        parser: 'typescript' | 'babel-ts' | 'css' | 'scss' | 'less' | 'pug' | 'json',
         isTopLevel: boolean,
     ) => {
         return async (
@@ -203,7 +204,7 @@ export function embed(path: FastPath, _options: Options) {
             // the user could have set the default language. babel-ts will format things a little
             // bit different though, especially preserving parentheses around dot notation which
             // fixes https://github.com/sveltejs/prettier-plugin-svelte/issues/218
-            isTypeScript(node) ? 'typescript' : 'babel-ts',
+            isTypeScript(node) ? 'typescript' : isJSON(node) ? 'json' : 'babel-ts',
             isTopLevel,
         );
     const embedStyle = (isTopLevel: boolean) =>
@@ -260,7 +261,7 @@ function getSnippedContent(node: Node) {
 
 async function formatBodyContent(
     content: string,
-    parser: 'typescript' | 'babel-ts' | 'css' | 'scss' | 'less' | 'pug',
+    parser: 'typescript' | 'babel-ts' | 'css' | 'scss' | 'less' | 'pug' | 'json',
     textToDoc: (text: string, options: object) => Promise<Doc>,
     options: ParserOptions & { pugTabWidth?: number },
 ) {

src/print/node-helpers.ts

@@ -268,6 +268,12 @@ export function isTypeScript(node: Node) {
     return ['typescript', 'ts'].includes(lang);
 }
 
+export function isJSON(node: Node) {
+    const lang = getLangAttribute(node) || '';
+    // https://github.com/prettier/prettier/pull/6293
+    return lang.endsWith('json') || lang.endsWith('importmap');
+}
+
 export function isLess(node: Node) {
     const lang = getLangAttribute(node) || '';
     return ['less'].includes(lang);

test/printer/samples/no-tag-snippings.html

@@ -1,8 +1,8 @@
 <svelte:head>
     <script type="application/ld+json">
         {
-          "@context": "https://schema.org",
-          "@type": "etc..."
+            "@context": "https://schema.org",
+            "@type": "etc..."
         }
     </script>
     {@html `<style>${getCssText()}</style>`}