diff --git a/playground/.prettierrc.json b/playground/.prettierrc.json
new file mode 100644
index 0000000000..bf357fbbc0
--- /dev/null
+++ b/playground/.prettierrc.json
@@ -0,0 +1,3 @@
+{
+  "trailingComma": "all"
+}
diff --git a/playground/src/Editor/ErrorMessage.tsx b/playground/src/Editor/ErrorMessage.tsx
index 4488bbca89..d5b6da4e34 100644
--- a/playground/src/Editor/ErrorMessage.tsx
+++ b/playground/src/Editor/ErrorMessage.tsx
@@ -18,7 +18,7 @@ export function ErrorMessage({ children }: { children: string }) {
           children.startsWith("Error: ")
             ? children.slice("Error: ".length)
             : children,
-          120
+          120,
         )}
       </p>
     </div>
diff --git a/playground/src/Editor/Header.tsx b/playground/src/Editor/Header.tsx
index 44a3287a95..91cc2f8234 100644
--- a/playground/src/Editor/Header.tsx
+++ b/playground/src/Editor/Header.tsx
@@ -45,7 +45,7 @@ export default function Header({
         "border-gray-200",
         "dark:border-gray-800",
         "bg-ayu-background",
-        "dark:bg-ayu-background-dark"
+        "dark:bg-ayu-background-dark",
       )}
     >
       <div className="flex space-x-5">
@@ -55,14 +55,14 @@ export default function Header({
             "relative flex py-3 text-sm leading-6 font-semibold focus:outline-none",
             tab === "Source"
               ? "text-ayu-accent"
-              : "text-gray-700 hover:text-gray-900 focus:text-gray-900 dark:text-gray-300 dark:hover:text-white"
+              : "text-gray-700 hover:text-gray-900 focus:text-gray-900 dark:text-gray-300 dark:hover:text-white",
           )}
           onClick={() => onChangeTab("Source")}
         >
           <span
             className={classNames(
               "absolute bottom-0 inset-x-0 bg-ayu-accent h-0.5 rounded-full transition-opacity duration-150",
-              tab === "Source" ? "opacity-100" : "opacity-0"
+              tab === "Source" ? "opacity-100" : "opacity-0",
             )}
           />
           Source
@@ -73,14 +73,14 @@ export default function Header({
             "relative flex py-3 text-sm leading-6 font-semibold focus:outline-none",
             tab === "Settings"
               ? "text-ayu-accent"
-              : "text-gray-700 hover:text-gray-900 focus:text-gray-900 dark:text-gray-300 dark:hover:text-white"
+              : "text-gray-700 hover:text-gray-900 focus:text-gray-900 dark:text-gray-300 dark:hover:text-white",
           )}
           onClick={() => onChangeTab("Settings")}
         >
           <span
             className={classNames(
               "absolute bottom-0 inset-x-0 bg-ayu-accent h-0.5 rounded-full transition-opacity duration-150",
-              tab === "Settings" ? "opacity-100" : "opacity-0"
+              tab === "Settings" ? "opacity-100" : "opacity-0",
             )}
           />
           Settings
diff --git a/playground/src/Editor/SettingsEditor.tsx b/playground/src/Editor/SettingsEditor.tsx
index 76e03db30f..a754fa00f8 100644
--- a/playground/src/Editor/SettingsEditor.tsx
+++ b/playground/src/Editor/SettingsEditor.tsx
@@ -36,7 +36,7 @@ export default function SettingsEditor({
     (value: string | undefined) => {
       onChange(value ?? "");
     },
-    [onChange]
+    [onChange],
   );
   return (
     <Editor
diff --git a/playground/src/Editor/SourceEditor.tsx b/playground/src/Editor/SourceEditor.tsx
index d4959e1945..11e326e015 100644
--- a/playground/src/Editor/SourceEditor.tsx
+++ b/playground/src/Editor/SourceEditor.tsx
@@ -44,7 +44,7 @@ export default function SourceEditor({
           check.code === "F401" || check.code === "F841"
             ? [MarkerTag.Unnecessary]
             : [],
-      }))
+      })),
     );
 
     const codeActionProvider = monaco?.languages.registerCodeActionProvider(
@@ -81,7 +81,7 @@ export default function SourceEditor({
             }));
           return { actions, dispose: () => {} };
         },
-      }
+      },
     );
 
     return () => {
@@ -93,7 +93,7 @@ export default function SourceEditor({
     (value: string | undefined) => {
       onChange(value ?? "");
     },
-    [onChange]
+    [onChange],
   );
 
   return (
diff --git a/playground/src/Editor/VersionTag.tsx b/playground/src/Editor/VersionTag.tsx
index ace2993115..dd80a9fc7c 100644
--- a/playground/src/Editor/VersionTag.tsx
+++ b/playground/src/Editor/VersionTag.tsx
@@ -17,7 +17,7 @@ export default function VersionTag({ children }: { children: ReactNode }) {
         "items-center",
         "dark:bg-gray-800",
         "dark:text-gray-400",
-        "dark:shadow-highlight/4"
+        "dark:shadow-highlight/4",
       )}
     >
       {children}
diff --git a/playground/src/Editor/settings.ts b/playground/src/Editor/settings.ts
index 6882f6019c..e67a584f9f 100644
--- a/playground/src/Editor/settings.ts
+++ b/playground/src/Editor/settings.ts
@@ -15,7 +15,7 @@ export function stringify(settings: Settings): string {
         return v;
       }
     },
-    2
+    2,
   );
 }
 
@@ -24,7 +24,7 @@ export function stringify(settings: Settings): string {
  */
 export function persist(settingsSource: string, pythonSource: string) {
   window.location.hash = lzstring.compressToEncodedURIComponent(
-    settingsSource + "$$$" + pythonSource
+    settingsSource + "$$$" + pythonSource,
   );
 }
 
@@ -33,7 +33,7 @@ export function persist(settingsSource: string, pythonSource: string) {
  */
 export function restore(): [string, string] | null {
   const value = lzstring.decompressFromEncodedURIComponent(
-    window.location.hash.slice(1)
+    window.location.hash.slice(1),
   );
 
   if (value) {
diff --git a/playground/src/main.tsx b/playground/src/main.tsx
index 0bfe007ea6..62fd07ae28 100644
--- a/playground/src/main.tsx
+++ b/playground/src/main.tsx
@@ -6,5 +6,5 @@ import "./index.css";
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <Editor />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
diff --git a/playground/src/third-party.d.ts b/playground/src/third-party.d.ts
index 29a97b8ece..9ce038a9ca 100644
--- a/playground/src/third-party.d.ts
+++ b/playground/src/third-party.d.ts
@@ -1,6 +1,6 @@
 declare module "lz-string" {
   function decompressFromEncodedURIComponent(
-    input: string | null
+    input: string | null,
   ): string | null;
   function compressToEncodedURIComponent(input: string | null): string;
 }