Format all files

package-lock.json

@@ -13,6 +13,7 @@
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^5.0.3",
         "@tsconfig/svelte": "^5.0.4",
+        "prettier": "^3.4.2",
         "svelte": "^5.15.0",
         "svelte-check": "^4.1.1",
         "typescript": "~5.6.2",
@@ -1108,6 +1109,22 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
+      "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/readdirp": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.1.tgz",

package.json

@@ -7,11 +7,13 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
+    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",
+    "format": "prettier ./src --write"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tsconfig/svelte": "^5.0.4",
+    "prettier": "^3.4.2",
     "svelte": "^5.15.0",
     "svelte-check": "^4.1.1",
     "typescript": "~5.6.2",

src/app.css

@@ -1,5 +1,6 @@
 :root {
-    font-family: "Open Sans", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Open Sans", Inter, system-ui, Avenir, Helvetica, Arial,
+    sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
@@ -70,13 +71,14 @@ button {
 }
 
 .clickable {
-    box-shadow: 0 3px 0 rgba(0, 0, 0, .75);
+  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.75);
   border: 2px solid #222;
   border-radius: 8px;
   background-color: #f1f1f1;
   display: block;
 
-    &:hover, &:focus {
+  &:hover,
+  &:focus {
     background-color: #e1e1e1;
   }
 
@@ -89,7 +91,8 @@ button {
   background-color: #e0e0e0;
   color: #000;
 
-    &:hover, &:focus {
+  &:hover,
+  &:focus {
     background-color: #d0d0d0;
   }
 }
@@ -116,4 +119,3 @@ button {
     margin: 0;
   }
 }
-    

src/main.ts

@@ -1,9 +1,9 @@
-import { mount } from 'svelte'
-import './app.css'
-import App from './App.svelte'
+import { mount } from "svelte";
+import "./app.css";
+import App from "./App.svelte";
 
 const app = mount(App, {
-  target: document.getElementById('app')!,
-})
+  target: document.getElementById("app")!,
+});
 
-export default app
+export default app;