🚸 [editor] User prettier to format the output JSON

evan-liu · Feb 12, 2025 · 4f328f9 · 4f328f9
1 parent c4a357e
commit 4f328f9
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -22,6 +22,7 @@
     "clsx": "^2.1.1",
     "esbuild-wasm": "^0.25.0",
     "monaco-editor": "^0.52.2",
+    "prettier": "^3.5.0",
     "prism-react-renderer": "^2.4.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

diff --git a/docs/src/editor/karabiner.worker.ts b/docs/src/editor/karabiner.worker.ts
@@ -1,4 +1,7 @@
 import * as esbuild from 'esbuild-wasm'
+import { format } from 'prettier'
+import prettierBabelPlugin from 'prettier/plugins/babel'
+import prettierEstreePlugin from 'prettier/plugins/estree'
 
 import * as lib from '../../../dist/index'
 
@@ -26,9 +29,17 @@ self.onmessage = async (event) => {
       }),
       { description: '', manipulators: [] },
     )
-    self.postMessage({ input, output: JSON.stringify(config, null, 2) })
+    format(JSON.stringify(config), {
+      parser: 'json',
+      plugins: [prettierBabelPlugin, prettierEstreePlugin],
+    }).then(
+      (output) => self.postMessage({ input, output }),
+      (error) => self.postMessage({ input, output: error?.message }),
+    )
   } catch (e) {
-    let error = (e as Error)?.message || 'Unknown Error'
-    self.postMessage({ input, output: JSON.stringify({ error }, null, 2) })
+    self.postMessage({
+      input,
+      output: (e as Error)?.message || 'Unknown Error',
+    })
   }
 }