chore: switched to prettier for formatting

benmonro · benmonro · commit f53bcb930897 · 2020-06-09T21:17:46.000-07:00
diff --git a/package.json b/package.json
@@ -33,13 +33,12 @@
     "@babel/runtime": "^7.10.2",
     "@testing-library/dom": "^7.11.0",
     "crx-bridge": "^2.1.0",
-    "js-beautify": "^1.11.0",
+    "prettier": "^2.0.5",
     "tachyons": "^4.12.0"
   },
   "devDependencies": {
     "all-contributors-cli": "^6.14.2",
     "kcd-scripts": "^6.0.0",
-    "prettier": "^2.0.5",
     "rollup": "^2.12.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"
diff --git a/pages/elements-panel.html b/pages/elements-panel.html
@@ -3,8 +3,8 @@
         <link rel="stylesheet" href="css/highlight/styles/atom-one-dark.css">
         <link rel="stylesheet" type="text/css" href="css/tachyons.min.css" />
         <link rel="stylesheet" type="text/css" href="css/main.css" />
-        <script src="/dist/elementsPanel.js" ></script>
-       
+        <script src="/dist/elementsPanel.js" charset="utf-8" ></script>
+        <meta charset="utf-8">
     </head>
 
 <body class="bg-light-gray">
diff --git a/src/elementsPanel.js b/src/elementsPanel.js
@@ -1,5 +1,6 @@
 const Bridge = require("crx-bridge").default;
-const beautify = require("js-beautify").js;
+const prettier = require("prettier/standalone");
+const babelParser = require("prettier/parser-babel");
 const hljs = require("../lib/highlight.pack");
 Bridge.onMessage(
   "show-suggestion",
@@ -21,7 +22,10 @@ Bridge.onMessage(
 
     const codeBlock = document.querySelector("#query-code");
 
-    codeBlock.innerText = beautify(`screen.${suggestedQuery}`);
+    codeBlock.innerText = prettier.format(`screen.${suggestedQuery}`, {
+      parser: "babel",
+      plugins: [babelParser],
+    });
 
     hljs.highlightBlock(codeBlock);
   }
