diff --git a/ui/.devcontainer/devcontainer.json b/ui/.devcontainer/devcontainer.json
index 0c9e5d0..4112a8d 100644
--- a/ui/.devcontainer/devcontainer.json
+++ b/ui/.devcontainer/devcontainer.json
@@ -22,6 +22,7 @@
 			// Add the IDs of extensions you want installed when the container is created.
 			"extensions": [
 				"dbaeumer.vscode-eslint",
+				"esbenp.prettier-vscode",
 				"mhutchie.git-graph",
 				"Syler.sass-indented",
 				"Vue.volar"
diff --git a/ui/.vscode/settings.json b/ui/.vscode/settings.json
index 6c1800c..c6c940c 100644
--- a/ui/.vscode/settings.json
+++ b/ui/.vscode/settings.json
@@ -1,5 +1,14 @@
 {
   "editor.formatOnSave": true,
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "editor.codeActionsOnSave": {
     "source.organizeImports": true
   },
@@ -7,5 +16,6 @@
   "editor.tabSize": 2,
   "sass.disableAutoIndent": true,
   "sass.format.convert": false,
-  "sass.format.deleteWhitespace": true
+  "sass.format.deleteWhitespace": true,
+  "prettier.trailingComma": "all",
 }
\ No newline at end of file
diff --git a/ui/src/App.vue b/ui/src/App.vue
index 69b3bab..aefb128 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -51,7 +51,7 @@ export default class extends Vue {
       "days/visible_days",
       (visible_days: number) => {
         this.visible_days = visible_days;
-      }
+      },
     );
   }
 }
diff --git a/ui/src/components/BulmaBreadcrumbs.vue b/ui/src/components/BulmaBreadcrumbs.vue
index 95657c0..43a1b67 100644
--- a/ui/src/components/BulmaBreadcrumbs.vue
+++ b/ui/src/components/BulmaBreadcrumbs.vue
@@ -1,8 +1,12 @@
 <template>
   <nav class="breadcrumb has-succeeds-separator">
     <ul>
-      <li v-for="(step, index) in steps" :key="`step-${index}`" :class="modelValue === index ? 'is-active' : ''"
-        @click="change_step(index)">
+      <li
+        v-for="(step, index) in steps"
+        :key="`step-${index}`"
+        :class="modelValue === index ? 'is-active' : ''"
+        @click="change_step(index)"
+      >
         <a>
           <span class="icon is-small">
             <font-awesome-icon :icon="step.icon" />
@@ -41,4 +45,4 @@ export default class extends Vue {
     this.$emit("update:modelValue", next_step);
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/ui/src/components/Calendar.vue b/ui/src/components/Calendar.vue
index f287b01..07a9b0a 100644
--- a/ui/src/components/Calendar.vue
+++ b/ui/src/components/Calendar.vue
@@ -5,8 +5,14 @@
     <figure class="image">
       <img :src="$advent22.api_url('general/background')" />
       <ThouCanvas>
-        <CalendarDoor v-for="(_, index) in doors" :key="`door-${index}`" :door="doors[index]" @doorClick="door_click"
-          @doorSuccess="door_success" @doorFailure="door_failure" />
+        <CalendarDoor
+          v-for="(_, index) in doors"
+          :key="`door-${index}`"
+          :door="doors[index]"
+          @doorClick="door_click"
+          @doorSuccess="door_success"
+          @doorFailure="door_failure"
+        />
       </ThouCanvas>
     </figure>
   </section>
@@ -53,7 +59,7 @@ export default class extends Vue {
 </script>
 
 <style lang="scss" scoped>
-section>figure {
+section > figure {
   user-select: none;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/components/CalendarDoor.vue b/ui/src/components/CalendarDoor.vue
index fbd11ca..31e3001 100644
--- a/ui/src/components/CalendarDoor.vue
+++ b/ui/src/components/CalendarDoor.vue
@@ -16,11 +16,7 @@ import SVGRect from "./rects/SVGRect.vue";
   props: {
     door: Door,
   },
-  emits: [
-    "doorClick",
-    "doorSuccess",
-    "doorFailure",
-  ],
+  emits: ["doorClick", "doorSuccess", "doorFailure"],
 })
 export default class extends Vue {
   public door!: Door;
@@ -35,9 +31,9 @@ export default class extends Vue {
         let msg = "Unbekannter Fehler, bitte wiederholen!";
 
         if (
-          (reason instanceof AxiosError)
-          && (reason.response !== undefined)
-          && (reason.response.status === 401)
+          reason instanceof AxiosError &&
+          reason.response !== undefined &&
+          reason.response.status === 401
         ) {
           msg = "Netter Versuch :)";
         }
@@ -53,4 +49,4 @@ export default class extends Vue {
 rect {
   cursor: pointer;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/components/door_map/DoorChooser.vue b/ui/src/components/door_map/DoorChooser.vue
index b862679..03662ca 100644
--- a/ui/src/components/door_map/DoorChooser.vue
+++ b/ui/src/components/door_map/DoorChooser.vue
@@ -13,7 +13,11 @@
     <figure class="image">
       <img :src="$advent22.api_url('general/background')" />
       <ThouCanvas>
-        <PreviewDoor v-for="(_, index) in doors" :key="`door-${index}`" v-model:door="doors[index]" />
+        <PreviewDoor
+          v-for="(_, index) in doors"
+          :key="`door-${index}`"
+          v-model:door="doors[index]"
+        />
       </ThouCanvas>
     </figure>
   </section>
@@ -46,7 +50,7 @@ export default class extends Vue {
 </script>
 
 <style lang="scss" scoped>
-section>figure {
+section > figure {
   user-select: none;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/components/door_map/DoorPlacer.vue b/ui/src/components/door_map/DoorPlacer.vue
index 98fa94b..67745b0 100644
--- a/ui/src/components/door_map/DoorPlacer.vue
+++ b/ui/src/components/door_map/DoorPlacer.vue
@@ -10,7 +10,12 @@
     </div>
     <figure class="image">
       <img :src="$advent22.api_url('general/background')" />
-      <RectangleCanvas :rectangles="rectangles" @draw="on_draw" @drag="on_drag" @remove="on_remove" />
+      <RectangleCanvas
+        :rectangles="rectangles"
+        @draw="on_draw"
+        @drag="on_drag"
+        @remove="on_remove"
+      />
     </figure>
   </section>
 </template>
@@ -72,7 +77,7 @@ export default class extends Vue {
 </script>
 
 <style lang="scss" scoped>
-section>figure {
+section > figure {
   user-select: none;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/components/door_map/PreviewDoor.vue b/ui/src/components/door_map/PreviewDoor.vue
index bb738b8..15d62bc 100644
--- a/ui/src/components/door_map/PreviewDoor.vue
+++ b/ui/src/components/door_map/PreviewDoor.vue
@@ -1,12 +1,27 @@
 <template>
   <SVGRect :rectangle="door.position" :focused="editing" />
-  <foreignObject :x="Math.round(parent_aspect_ratio * door.position.left)" :y="door.position.top"
-    :width="Math.round(parent_aspect_ratio * door.position.width)" :height="door.position.height"
-    :style="`transform: scaleX(${1 / parent_aspect_ratio})`">
-    <div xmlns="http://www.w3.org/1999/xhtml" class="is-flex is-align-items-center is-justify-content-center"
-      @click.left="on_click">
-      <input v-if="editing" v-model="day_str" ref="day_input" class="input is-large" type="number" min="-1"
-        placeholder="Tag" @keydown="on_keydown" />
+  <foreignObject
+    :x="Math.round(parent_aspect_ratio * door.position.left)"
+    :y="door.position.top"
+    :width="Math.round(parent_aspect_ratio * door.position.width)"
+    :height="door.position.height"
+    :style="`transform: scaleX(${1 / parent_aspect_ratio})`"
+  >
+    <div
+      xmlns="http://www.w3.org/1999/xhtml"
+      class="is-flex is-align-items-center is-justify-content-center"
+      @click.left="on_click"
+    >
+      <input
+        v-if="editing"
+        v-model="day_str"
+        ref="day_input"
+        class="input is-large"
+        type="number"
+        min="-1"
+        placeholder="Tag"
+        @keydown="on_keydown"
+      />
       <div v-else class="is-size-1 has-text-weight-bold">
         <template v-if="door.day >= 0">{{ door.day }}</template>
       </div>
@@ -122,9 +137,9 @@ export default class extends Vue {
 foreignObject {
   cursor: pointer;
 
-  >div {
+  > div {
     color: red;
     height: inherit;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/components/door_map/RectangleCanvas.vue b/ui/src/components/door_map/RectangleCanvas.vue
index 816bbe7..d8b4763 100644
--- a/ui/src/components/door_map/RectangleCanvas.vue
+++ b/ui/src/components/door_map/RectangleCanvas.vue
@@ -1,7 +1,18 @@
 <template>
-  <ThouCanvas @mousedown.left="draw_start" @mouseup.left="draw_finish" @mousedown.right="drag_start"
-    @mouseup.right="drag_finish" @mousemove="on_mousemove" @click.middle="remove_rect" @dblclick.left="remove_rect">
-    <SVGRect v-for="(rect, index) in rectangles" :key="`rect-${index}`" :rectangle="rect" />
+  <ThouCanvas
+    @mousedown.left="draw_start"
+    @mouseup.left="draw_finish"
+    @mousedown.right="drag_start"
+    @mouseup.right="drag_finish"
+    @mousemove="on_mousemove"
+    @click.middle="remove_rect"
+    @dblclick.left="remove_rect"
+  >
+    <SVGRect
+      v-for="(rect, index) in rectangles"
+      :key="`rect-${index}`"
+      :rectangle="rect"
+    />
     <SVGRect v-if="preview_visible" :focused="true" :rectangle="preview_rect" />
   </ThouCanvas>
 </template>
@@ -137,4 +148,4 @@ export default class extends Vue {
 * {
   cursor: crosshair;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/components/door_map/calendar.ts b/ui/src/components/door_map/calendar.ts
index 5b17511..0f40e44 100644
--- a/ui/src/components/door_map/calendar.ts
+++ b/ui/src/components/door_map/calendar.ts
@@ -10,7 +10,7 @@ export class Door {
   }
 
   public get day(): number {
-    return this._day
+    return this._day;
   }
 
   public set day(day: unknown) {
@@ -23,4 +23,4 @@ export class Door {
       this._day = Math.max(Math.floor(result), -1);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/ui/src/components/rects/SVGRect.vue b/ui/src/components/rects/SVGRect.vue
index 8dc4417..5180347 100644
--- a/ui/src/components/rects/SVGRect.vue
+++ b/ui/src/components/rects/SVGRect.vue
@@ -1,6 +1,11 @@
 <template>
-  <rect :class="focused ? 'focus' : ''" :x="rectangle.left" :y="rectangle.top" :width="rectangle.width"
-    :height="rectangle.height" />
+  <rect
+    :class="focused ? 'focus' : ''"
+    :x="rectangle.left"
+    :y="rectangle.top"
+    :width="rectangle.width"
+    :height="rectangle.height"
+  />
 </template>
 
 <script lang="ts">
@@ -35,4 +40,4 @@ rect {
     stroke: yellow;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/components/rects/ThouCanvas.vue b/ui/src/components/rects/ThouCanvas.vue
index 24eb8cc..839bfbf 100644
--- a/ui/src/components/rects/ThouCanvas.vue
+++ b/ui/src/components/rects/ThouCanvas.vue
@@ -1,7 +1,16 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000" preserveAspectRatio="none"
-    @contextmenu.prevent @mousedown="transform_mouse_event" @mousemove="transform_mouse_event"
-    @mouseup="transform_mouse_event" @click="transform_mouse_event" @dblclick="transform_mouse_event">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    viewBox="0 0 1000 1000"
+    preserveAspectRatio="none"
+    @contextmenu.prevent
+    @mousedown="transform_mouse_event"
+    @mousemove="transform_mouse_event"
+    @mouseup="transform_mouse_event"
+    @click="transform_mouse_event"
+    @dblclick="transform_mouse_event"
+  >
     <slot name="default" />
   </svg>
 </template>
@@ -19,7 +28,7 @@ function get_event_thous(event: MouseEvent): Vector2D {
 
   return new Vector2D(
     Math.round((event.offsetX / target.clientWidth) * 1000),
-    Math.round((event.offsetY / target.clientHeight) * 1000)
+    Math.round((event.offsetY / target.clientHeight) * 1000),
   );
 }
 
@@ -65,4 +74,4 @@ svg {
 
   z-index: auto;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/components/rects/rectangles.ts b/ui/src/components/rects/rectangles.ts
index 5dfb8d7..a316623 100644
--- a/ui/src/components/rects/rectangles.ts
+++ b/ui/src/components/rects/rectangles.ts
@@ -20,8 +20,7 @@ export class Vector2D {
   }
 
   public equals(other: Vector2D): boolean {
-    return this.x === other.x &&
-      this.y === other.y;
+    return this.x === other.x && this.y === other.y;
   }
 }
 
@@ -38,7 +37,7 @@ export class Rectangle {
     return new Vector2D(
       Math.min(this.corner_1.x, this.corner_2.x),
       Math.min(this.corner_1.y, this.corner_2.y),
-    )
+    );
   }
 
   public get left(): number {
@@ -53,7 +52,7 @@ export class Rectangle {
     return new Vector2D(
       Math.max(this.corner_1.x, this.corner_2.x),
       Math.max(this.corner_1.y, this.corner_2.y),
-    )
+    );
   }
 
   public get size(): Vector2D {
@@ -69,7 +68,7 @@ export class Rectangle {
   }
 
   public get middle(): Vector2D {
-    return this.origin.plus(this.size.scale(0.5))
+    return this.origin.plus(this.size.scale(0.5));
   }
 
   public get area(): number {
@@ -77,22 +76,20 @@ export class Rectangle {
   }
 
   public equals(other: Rectangle): boolean {
-    return this.origin.equals(other.origin) &&
-      this.corner.equals(other.corner);
+    return this.origin.equals(other.origin) && this.corner.equals(other.corner);
   }
 
   public contains(point: Vector2D): boolean {
-    return point.x >= this.origin.x &&
+    return (
+      point.x >= this.origin.x &&
       point.y >= this.origin.y &&
       point.x <= this.corner.x &&
-      point.y <= this.corner.y;
+      point.y <= this.corner.y
+    );
   }
 
   public update(corner_1?: Vector2D, corner_2?: Vector2D): Rectangle {
-    return new Rectangle(
-      corner_1 || this.corner_1,
-      corner_2 || this.corner_2,
-    );
+    return new Rectangle(corner_1 || this.corner_1, corner_2 || this.corner_2);
   }
 
   public move(vector: Vector2D): Rectangle {
diff --git a/ui/src/d.ts/shims-advent22.d.ts b/ui/src/d.ts/shims-advent22.d.ts
index 88800a1..3688f91 100644
--- a/ui/src/d.ts/shims-advent22.d.ts
+++ b/ui/src/d.ts/shims-advent22.d.ts
@@ -7,4 +7,4 @@ declare module "@vue/runtime-core" {
   }
 }
 
-export { };
+export {};
diff --git a/ui/src/d.ts/shims-vue.d.ts b/ui/src/d.ts/shims-vue.d.ts
index 3804a43..55e0ca6 100644
--- a/ui/src/d.ts/shims-vue.d.ts
+++ b/ui/src/d.ts/shims-vue.d.ts
@@ -1,6 +1,6 @@
 /* eslint-disable */
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }
diff --git a/ui/src/main.ts b/ui/src/main.ts
index 299eedb..57c3e68 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -1,12 +1,12 @@
-import { Advent22Plugin } from "@/plugins/advent22"
-import { FontAwesomePlugin } from "@/plugins/fontawesome"
-import { createApp } from 'vue'
-import App from './App.vue'
+import { Advent22Plugin } from "@/plugins/advent22";
+import { FontAwesomePlugin } from "@/plugins/fontawesome";
+import { createApp } from "vue";
+import App from "./App.vue";
 
-import "@/main.scss"
+import "@/main.scss";
 
-const app = createApp(App)
-app.use(Advent22Plugin)
-app.use(FontAwesomePlugin)
+const app = createApp(App);
+app.use(Advent22Plugin);
+app.use(FontAwesomePlugin);
 
-app.mount('#app')
+app.mount("#app");
diff --git a/ui/src/plugins/advent22.ts b/ui/src/plugins/advent22.ts
index 38570a1..30845e1 100644
--- a/ui/src/plugins/advent22.ts
+++ b/ui/src/plugins/advent22.ts
@@ -1,5 +1,5 @@
-import axios, { AxiosInstance, ResponseType } from 'axios';
-import { App, Plugin } from 'vue';
+import axios, { AxiosInstance, ResponseType } from "axios";
+import { App, Plugin } from "vue";
 
 export class Advent22 {
   private axios: AxiosInstance;
@@ -13,7 +13,6 @@ export class Advent22 {
     // in production mode, return "//host/api"
     if (process.env.NODE_ENV === "production") {
       return `//${window.location.host}/api`;
-
     } else if (process.env.NODE_ENV !== "development") {
       // not in prouction or development mode
       console.warn("Unexpected NODE_ENV value");
@@ -24,11 +23,13 @@ export class Advent22 {
   }
 
   public api_url(endpoint?: string): string {
-    if (endpoint === undefined)
+    if (endpoint === undefined) {
       return this.api_baseurl;
+    }
 
-    while (endpoint.startsWith('/'))
+    while (endpoint.startsWith("/")) {
       endpoint = endpoint.substring(1);
+    }
 
     return `${this.api_baseurl}/${endpoint}`;
   }
@@ -52,7 +53,8 @@ export class Advent22 {
       responseType: responseType,
     };
 
-    this.axios.get<T>(this.api_url(endpoint), req_data)
+    this.axios
+      .get<T>(this.api_url(endpoint), req_data)
       .then((response) => on_success(response.data))
       .catch((reason) => on_failure(endpoint, reason));
   }
@@ -68,12 +70,12 @@ export class Advent22 {
         const reader = new FileReader();
         reader.readAsDataURL(data);
         reader.onloadend = () => {
-          if (typeof reader.result === "string")
+          if (typeof reader.result === "string") {
             on_success(reader.result);
-
-          else
+          } else {
             on_failure(endpoint, "failed data url");
-        }
+          }
+        };
       },
       on_failure,
       "blob",
@@ -112,5 +114,5 @@ export class Advent22 {
 export const Advent22Plugin: Plugin = {
   install(app: App) {
     app.config.globalProperties.$advent22 = new Advent22();
-  }
-}
+  },
+};
diff --git a/ui/src/plugins/fontawesome.ts b/ui/src/plugins/fontawesome.ts
index da115c5..10d708a 100644
--- a/ui/src/plugins/fontawesome.ts
+++ b/ui/src/plugins/fontawesome.ts
@@ -1,20 +1,20 @@
-import { App, Plugin } from 'vue';
+import { App, Plugin } from "vue";
 
 /* import the fontawesome core */
-import { library } from '@fortawesome/fontawesome-svg-core';
+import { library } from "@fortawesome/fontawesome-svg-core";
 
 /* import specific icons */
-import { fab } from '@fortawesome/free-brands-svg-icons';
-import { fas } from '@fortawesome/free-solid-svg-icons';
+import { fab } from "@fortawesome/free-brands-svg-icons";
+import { fas } from "@fortawesome/free-solid-svg-icons";
 
 /* add icons to the library */
 library.add(fas, fab);
 
 /* import font awesome icon component */
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 export const FontAwesomePlugin: Plugin = {
   install(app: App) {
-    app.component('font-awesome-icon', FontAwesomeIcon);
-  }
-}
\ No newline at end of file
+    app.component("font-awesome-icon", FontAwesomeIcon);
+  },
+};